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

Use article The Humble Element And Core Web Vitals as well as Maximally optimizing image loading for the web for a comprehensive review of all modern techniques for serving images.

Plugins: Automatic Image Size Optimization

Other plugins

• CW Image Optimizer uses the Linux littleutils image optimization tools. This means your images never leave your server. Image optimizers included are: opt-jpg, opt-png, opt-gif, recomp-jpg. Već 8 godina nije održavan, ali kao osnova za custom rešenje, možda.

• Kraken Image Optimizer koristi SaaS web service Kraken.io. There is a free developer account which comes with 100 MB of testing quota, ever, not monthly. Kraken seems to be using the same optimization backend as desktop ImageOptim as per this (source)

• PunyPNG is no more

WordPress and it’s media library problem

Store Thumbnails and Full Size Image Uploads in Separate 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

WP-Optimize

Although WP-Optimize is a product by the respected company, it unfortunately has an abundance of unnecessary features. They have a consistent idea, but still, I can’t seem to get cache or image optimization to work, and both are included. If you’re foolish enough to buy it anyway, it will start optimizing your images using the external service reSmush.it or Nitrosmush (not anymore) and you can choose either service from the “Show advanced options” drop-down.

Check out how to increase your website’s speed with the WP-Optimize plugin for more detailed information. NitroSmush is now dead or abandoned?.

Define Compression Level Targets

Vrlo je bitno da ustanoviš koja je to kompresija ona koja te zadovoljava, odnosno koja je prosečno target veličina fotke u bajtovima.

Najnovije su ove dimenzije i težine slika: Best Image Size for Websites: Dimensions, Ratio, Weight | TinyIMG

ChatGPT je rekao: The recommended maximum image weight for mobile internet is typically around 100-200 KB.

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.

Relocate thumbnails: via plugin Fr Thumbnails Folder / Github - thumbnails will be generated automatically, not on uploading but when viewed in media library. Therefore I need a plugin to allow regeneration of thumbnails. For now, let’s just don’t use it and settle with having in image subfolder, that should be officaly supported.

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 (srcset)

1.1 Serve Responsive / Adaptive Images (srcset & sizes)

Both are explained in separate article.

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

WP-Optimize Plugin Accused of Cheating PageSpeed and Other Performance Testing Tools – WP Tavern The great WP-Optimize Debacle | maciek palmowski

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, repo at nosilver4u/imsanity: Imsanity automatically resizes huge image uploads.

• 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

  • Official Statically plugin
  • Flying Images by WP Speed Matters uses Statically CDN and does everything;

• 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, ali nije loš - osim što je removed i ne podržava AVIF.

  EWWW Image Optimizer kinda works locally even in the free version. They say EWWW IO is the only plugin that lets you optimize images using tools on your own server (jpegtran, optipng, pngout, pngquant, gifsicle, cwebp). The core plugin is free and always will be but u Pro ali nema ga na GPL sajtovima)

  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 now 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. Read about second method from this article on How to Serve Images as WebP in WordPress? Some of notable features are Nginx server support, great “CDN friendly” mode that does HTML rewriting, storing WebP images in separate folder, creating files upon request - missing files are auto generated upon visit a.k.a. on-the-fly conversion, etc. Folder used for WebP is by default quite unusal: wp-content/webp-express/webp-images/doc-root

Plugin supports different ways of delivering WebP’s to browser: favorite is by altering the HTML, replacing image tags with tags. The author also had a plan to create an AVIF version, but stopped working on it many years ago - rosell-dk/avif-convert.

Anyway, he has created many useful libraries that I may use as learning resources.

• If you want to use the Cloud Service for this plugin, refer to rosell-dk/webp-convert-cloud-service. Please note that this is often no longer necessary because the latest PHP natively supports WebP.

• For replacing <img> tags with <picture> tags, refer to the code in the rosell-dk/dom-util-for-webp library and adapt it for AVIF and WebP. The ImageUrlReplacer class utilizes Simplehtmldom for parsing and modifying HTML. It is chosen because it can handle invalid HTML without affecting the invalid parts. On the other hand, the PictureTags class currently uses regular expressions to perform the replacement.

The WebP Express Plus is a completely independent plugin developed by another author. It adds a user interface (UI) for exclusions, which already exist in the original plugin, but without a graphical user interface (GUI) for them.

Plus WebP is developed by a minimalist Japanese author, and it allows you to generate WebP images in bulk or upon upload. However, it does not support generating WebP images on request for individual images, and it does not handle the serving of these images. Instead, its sole focus is on image generation.

Not needed:

• Compression bash script Image compression tool for websites
• Bash script for Wordpress to optimize, upload to spaces S3 and purge CDN cache: opicron/cli-spaces-sync

Articles:

• Battle of the Image Compression WordPress Plugins (2015)
• 5 Best WordPress Image Compression Plugins Compared (2018)

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 square
medium:       300px × 300px (maximum 300px width and height)
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 (maximum 1024px width and height)

How WordPress optimizes “larger” images 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 Full Screen Hero images: 2880 x 1500px Landscape feature image: 1200 x 900 Portrait feature image: 900 x 1200px 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/

There is a list of Plugins For Image Cleanup here in article on 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

PNG Compress je od istog autora, ali to meni nije bitno, za rekompresiju PNG formata

WordPress 5.8 adds WebP support – Make WordPress Core

Perfect Images (Manage Image Sizes, Thumbnails, Replace, Retina) koji stavlja naglasak na “WP-Retina-2x” je od Jordy Meow ali nisam siguran koliko je koristan a podržava samo WebP a ne i AVCF, a izgleda da i u free verziji ima generisanje   elementa, koje radi tako što ob_start buffer ceo output, što je meni najlošije rešenje.

Nisam siguran koliko je ovo baš-baš bitno, ali pročitaj iz 2021: Image Block and improving sizes="…" and srcset="…" · Issue #17959 · WordPress/gutenberg i plugin za to WPezPlugins / wpez-guten-better-image · GitLab

Sad imamo najnovije super parametar sizes=auto is a great idea – Chris Coyier i plugin Wordpress za to: Auto-sizes for Lazy-loaded Images

Baš lepo napisan plugin WebP & SVG Support

Image Optimization APIs and WordPress Plugin | MegaOptim gdarko/megaoptim-compress