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


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 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 support

      NitroSmush; 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 onm y 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

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

  • WebP Converter for Media uses GD library Simple and efficient; supports only server rewrites

  • 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

Really proper plugin: Fly Dynamic Image Resizer

Interesting idea: Image Optimizer for Google Lighthouse


ŠTA JE bRE OVO

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

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