Plugins: Automatic Image Size Optimization

related: Unpublished\eTaktiker\Design & Content - Image Optimizations.md

Plugins: Automatic Image Size Optimization

Other plugins

  • CW Image Optimizer
    CW Image Optimizer uses the Linux littleutils image optimization tools. This means your images never leave your server. Image optimizers are: opt-jpg, opt-png, opt-gif, recomp-jpg.

  • Kraken Image Optimizer
    One of the best image optimization web service is Kraken.io. There is a free developer account which comes with 50 MB of testing quota. Kraken seems to be using the same optimization backend as ImageOptim (source)

  • PunyPNG


Wordpress and it’s media library problem

Store thumbnails and uploads in different directories?

https://perishablepress.com/disable-wordpress-generated-images/

Problems to solve:

  • thumbnail images. Most important thing, as I can opimize images manually, and this is impossible to do manualy
  • scaled images srcset webp

  • How to increase website speed with WP-Optimize plugin

    The WP-Optimize plugin will start optimizing your images using the external service reSmush.it or Nitrosmush. You can choose either service from the ‘Show advanced options’ drop-down. By default, reSmush.it will be the service selected.


Compression level targets

  • PageSpeed Insights moved to Lossy Compression and they use freely available ImageMagick utility at quality 85 to compress images. source and source

-1: Physical Folders

In the past, I assumed that having physical folders was the best way to handle media. Now, I don’t think so; media locations should be abstracted and prepared to move to “bucket” storages which don’t necessary support hierarchical folder-like structures but more often some tagging features.

To conclude: there is no need for physical folders. The only requirement is to separate thumbnails and variously sized images.

0: Thumbnails, image sizes and their location

I want to have thumbnails and various image sizes, but in separate folder from other uploads.

How to remove all the default image shit:

Relocate thumbnails: via plugin Fr Thumbnails Folder / Github - thumbnails will be generated automatically, not on uploading but when used-inserted into content?. Therefore I need a plugin to allow regeneration of thumbnails.

or with PHP code:

Store thumbnails and uploads in different directories Each custom image size in custom upload directory Hide certain upload folders in media library … exhaustive answer

!!! Exclude folders: see how it’s done in “Organize Media Library by Folders” plugin

1: Resize images and create thumbnails

First thing to do is to have proper image sizing and possibly serve srcset adaptive images.

1.1 Serve Responsive / Adaptive Images

Creates srcset to deliver resized images based on device.

Responsive Images the Simple Way Introducing WP Image Processing Queue - On‑the‑Fly Image Processing Done Right

2. Optimize JPEG images

My decision: simple: use CDN plugin advanced: reSmush.it (or nitrosmush) and a plugin for that

Feature requests:

  • optimize everything: all images, including thumbnails, should be optimized
  • optimize on upload: automatically optimize when uploaded into WordPress
  • bulk optimization: an option to optimize all your existing images
  • original image backup; before optimization starts, all images are being stored in original quality
  • a way to serve WebP format

Good comment: https://wordpress.org/support/topic/local-and-or-open-source-image-optimization-plugin/

Plugins:

  • SaaS for compression; local delivery:

    could use also for my sites, as final result is the same as completely local Image optimization SaaS reSmush.it is best to convert and then serve from my server; reSmush.it also has solid compression rate; alternative services are: imagify.io (by WP Rocket)

    • Robin Image Optimizer uses resmush.it; original image backup; optimize thumbnails; reliable author; paid version is required to automatically create WebP copies; can specify custom compression quality Stores original images in separate folder wio_backup (hardcoded value) fully preserving the folder structure. Also creates some wrio where it stores his log files compress thumbnails? yes, but doesn’t work on relocated thumbnails (Thumbnails Optimized: 0)

    • reSmush.it doesn’t do WebP; original image backup; the only limit for reSmush.it is 5Mb file size, which is not a problem at all; plugin still can’t move “unsmushed” pictures to another folder, but that’s in a roadmap; does optimization of thumbnails but only if they are in the same location as original image;

      There is a CLI tool for charlyie/resmushit-cli

    • Smush / WP Smushit is the most-famous one; can use obiPlabon/wp-nonstop-smushit to disable bulk limit; unlimited number of files for free, but maximum file size is 1M;

      Based an old Yahoo! Inc. Smush.it service, and that service is no longer live: smush.it is dead, long live smushing

    • WP-Optimize; great UI and lots of options; premium version has WP CLI support; Three in one: cache, database cleaner and image compressor, by very respected authors of UpdraftPlus: WP-Optimize

      uses reSmush.it for image compression and NitroSmush (dead now); maximum file size: 100 MB; supported by WP-Optimize; not responding in june 2020; born in 2015 and probably abandoned now

    • EWWW Image Optimizer can use their cloud service and the pricing for “Compress API” is quite fair

    • Imagify by authors of WP Rocket; free 25MB of images per month but pricing of “One time plans” is quite fair; supports WebP

    • WP Compress has NO free nothing; and works via API

    • Imsanity is light version from EWWW author

    • ShortPixel Image Optimizer uses ShortPixel which offers 100 pics/month for free; their one-time plans are fair; Autoptimize plugin supports ShortPixel itself; does WebP

    • TinyPNG & TinyJPG are great services and a Photoshop plugin’s, and are supported in Wordpress with this. There is a free Developer API key; first 500 compressions per month are free, so roughly 100 images can be uploaded to WordPress for free, no strings attached!

  • CDN based compression and delivery; simplest

    On the fly via some CDN (Statically) Probably use on “external” client sites

  • Local compression:

    only possible on my servers; should enable me the most freedom and best compression results

    • Warp iMagick uses Imagick (not bundled on EUnet but on my servers I have it) and GD for WebP

    • EWWW Image Optimizer kinda works locally even in the free version

      EWWW is the only option that allows you to do all of the optimization on your hosted environment.

      Problem is that it requires exec() to perform local compression. The tools used for optimization are jpegtran, TinyJPG, JPEGmini, optipng, pngout, pngquant, TinyPNG, and gifsicle. Most of these are freely available except TinyJPG/TinyPNG and JPEGmini. By default, EWWW Image Optimizer uses lossless optimization techniques, so your image quality will be exactly the same before and after the optimization.

      Has a neat option to totally disable creating of additional sized images in Wordpress (but that can also easily be done manually)

      Has various configuration options like ignored folders and similar; supports WebP

      Note: You need to tick the option to remove the metadata, but to keep it for the original image. Also, don’t forget to enable pngout.

There is also google/guetzli encoder for JPEG

  • Nice idea Opti MozJpeg Guetzli WebP There is no necessity to install them into your hosting as it has built-in ssh client so it can access encoders remotely via ssh tunnel.

  • A helper WP CLI plugin guetzli but a little outdated

3. Serve WebP images / do WebP Conversion

simple: some CDN plugin advanced: use WebP Express plugin with native GD library and enabling .htaccess rewrites

PHP has native imagewebp() function inside GD library, so WebP conversion is really easy. There is also a library: rosell-dk/webp-convert

The best way to serve WebP images is with server rewrites, as then even CSS background images are supported.

  • WebP Express uses webp-convert library that also supports GD library as one of engines. Much more mature solution then other plugins and accepted by community. See method #2 from this article: How to Serve Images as WebP in WordPress? Notable features: Nginx server support; great “CDN friendly” mode that does HTML rewriting; can store WebP in separate folder; create files upon request, missing files are auto generated upon visit a.k.a. on-the-fly conversion.

    folder for WebP: wp-content/webp-express/webp-images/doc-root

    Supports different ways of delivering WebP’s to browser: favorite is by altering the HTML, replacing image tags with picture tags Author of this plugin is also author of all supporting libraries: great!

  • WebP Converter for Media uses GD library Simple and efficient; supports server rewrites and “PassThru?"; images are saved in a separate directory

  • Plus WebP by experienced minimalistic author; generate WebP; only bulk and on-upload generation but not on single image; not dealing with rewrites at all but just with file generation

Not needed:


Articles:


  • Hammy
    speeds up your website by generating and serving resized images depending on content width.

    Instead of reducing the size of your images, Hammy grabs images from your posts and pages and generates a couple of smaller images. When a reader get to your website, Hammy automatically serves the most appropriate image. This gives your mobile users a better experience. The plugin relies on jQuery, but if the latter is unavailable, Hammy will fall back to the original image.

    Unfortunately, the plugin does not support custom post types and takes quite some configuring to work.

Thumbnails and featured images share a default size of 150px by 150px. If you use the_post_thumbnail() function without an argument to specify

Default thumbnail sizes:

thumbnail:    150px × 150px
medium:       300px × 300px
medium_large: 768px × 0px (768px max width); added to take advantage of responsive image support, which is why it isn’t included in the settings page
large:        1024px × 1024px

“Web-Optimizing” Larger Images In WordPress The default threshold value is 2560px (this can be altered using the new big_image_size_threshold filter). If an image’s height or width is above this threshold, it will be scaled down – with the threshold being used as max-height and max-width value.

The WordPress Thumbnails image size was introduced in version 2.9 but was quickly changed to Featured Images in version 3.0, but alas, the name stuck. So you’ll often hear featured images referred to as thumbnails in tutorials and even in the function names.

Thumbnails and featured images share a default size of 150px by 150px.

// add_image_size( ‘single-feature’, 1024, 768, true );

add_action( ‘after_setup_theme’, function () { add_image_size( ‘archive-featured’, 792, 446, true ); });

This function accepts 4 parameters in this order:

The name you give your custom image size The image width in pixels The image height in pixels Should the image be cropped to fit the width and height you specified above

Good info:

Recommended Image Sizes for WordPress Content If you decide that the image sizes WordPress automatically generates when uploading new media don’t fit with what you need, here are some recommended sizes for content to look at its best on any device.

Blog posts: 1200 x 630px Hero images (full screen images): 2880 x 1500px Landscape feature image: 900 x 1200px Portrait feature image: 1200 x 900 Fullscreen slideshow: 2800 x 1500px Gallery images: 1500px x auto width

https://visualcomposer.com/blog/wordpress-image-sizes-guide/


add_action( ‘after_setup_theme’, function () { add_theme_support( ‘post-thumbnails’ ); add_image_size( ‘post-thumbnail’, 150, 150, true ); });


add_theme_support( ‘post-thumbnails’ ); // These are the new image sizes we cooked up add_image_size( ‘post-image’, 660 ); // Now we register the size so it appears as an option within the editor add_filter( ‘image_size_names_choose’, ‘my_custom_image_sizes’ ); function my_custom_image_sizes( $sizes ) { return array_merge( $sizes, array( ‘post-image’ => __( ‘Post Images’ ), ) ); }


add_theme_support( ‘post-thumbnails’ ); set_post_thumbnail_size( 150, 150 );

add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 150, 150, true ); // default Post Thumbnail dimensions (cropped)

https://www.elegantthemes.com/blog/tips-tricks/how-to-change-thumbnail-size-in-wordpress-and-why-you-want-to


So,

set_post_thumbnail_size( $width, $height, $crop );

is a shortcut for

add_image_size( 'post-thumbnail', $width, $height, $crop );

https://wordpress.stackexchange.com/questions/251789/prevent-wordpress-from-generating-medium-large-768px-size-of-image-uploads

NAJBOLJI TEKST: Image Sizes in WordPress

https://wpbeaches.com/remove-wordpress-default-image-sizes/


How To Clean Up Your WordPress Media Library | WP Engine®


Images

Interesting idea: Image Optimizer for Google Lighthouse


ŠTA JE bRE OVO

https://wptavern.com/wordpress-5-3-improves-large-image-handling


Old, unmaintained, but interesting

Due to use of bfi_thumb library which completely takes over wordpress WP_Image_Editor classes

GitHub - gambitph/WP-OTF-Regenerate-Thumbnails: Automatically regenerates your thumbnails on the fly when thumbnail sizes change.

OTF Regenerate Thumbnails

uploads - How to generate thumbnails when needed only? - WordPress Development Stack Exchange

Other solutions:

FWS On-Demand-Resizer](https://wordpress.org/plugins/fws-resize-on-demand/) Really proper plugin, probably the best: Fly Dynamic Image Resizer

date 01. Jan 0001 | modified 05. Aug 2021
filename: Wordpress Plugin - Image Size Optimization