Convert images to optimized formats

[tijmenbruggeman]

With file conversion enabled customers can choose to generate an additional image in a modern format. WebP and AVIF are known to produce a better quality and performance image. Unfortunately, not all browsers support it 100% so therefor we choose to supply it as an addition instead of replacing the image.

• We will convert using Tinify API/SDK after the image has been compressed.
• The converted image is set in a picture element when it exists.

Changes

• Added a setting to enable/disable conversion. When enabled, the user can choose between:
• • Lowest amount of kb. Our recommendation. This will send both the avif and webp parameter to the Tinify API. Tinify will decide wether to return AVIF or WebP.
• • AVIF
• • Webp
• Changed the API request to Tinify (both through SDK and the API). If conversion is enabled, it will do an additional request to Tinify to retrieve the converted images. Thus it wil cost an additional "compression" and more disk space.
• • We've added a hint that the disk space will also increase when enabling this feature.
• Added a new class Tiny_Picture. If conversion is enabled, this class will be instantiated and hooked into template_redirect (https://developer.wordpress.org/reference/hooks/template_redirect/). This will parse the page and read all images from the page. For each image, it will check if the disk contains a WebP or AVIF on the same location. If any, it will create a picture element and add the WebP/AVIF sources as a source attribute.
• Split up statistics to show compression only. Currently conversion is new so the amount saved is still based on compression vs original.
• Renamed some statistics variables to be more explicit on what is optimized.
• Added a check to see if width / height was actually a value of resize_options in class-tiny-compress.php:195. This would cause warnings in the customers' UI. This went unnoticed because we previously uploaded files and didn't need the ID of the recently uploaded file.
• Improved stability and speed of integration tests by clearing the media library through an AJAX/PHP request instead of going through the UI. This was done by adding a AJAX hook in our fixture and calling that before each test.

Screenshots

The settings screen will show the options for conversion.

The media library list view ill show compression and conversions. Conversions are hidden if the conversion setting is disabled

Show image statistics for conversion..

Image statistics when conversion is disabled.

The image source is replaced by a picture element with the sources as attribute

Further Improvements

Below are further improvements we can make on this feature. Discussion is open to see if these are all could haves or if some of them are must haves.

• Bulk generate optimized formats for all ungenerated images
• Add htaccess rules in addition to picture elements
• Generate webp/avif for theme provided images.
• Add option to replace original image
• CDN/WP Offload support