Autoptimize Image Optimization to be less “lazy” with pictures

Up until now Autoptimize, when performing image optimization, relies on JS-based lazyloading (with the great lazysizes component) to differentiate between browser that support different image formats (AVIF, WebP and JPEG as fallback).
As JS-based Lazyload is going out of fashion though (with native lazyload being supported by more browsers and WordPress having out-of-the-box support for it too), it is time to start working on <picture> output in Autoptimize to serve “nextgen image formats” where different <source> tags offer the AVIF and WebP files and the <img> tag (which includes the  loading=”lazy” attribute) with JPEG as fallback.
For now that functionality is in a separate “power-up”, available on Github. If you have Image Optimization active in Autoptimize (and you are on the Beta version, Autoptimize 2.8.1 is missing a filter which the power-up needs so download & install the Beta if not done yet), you can download the plugin Github and give it a go. All feedback is welcome!

AO image optimization: transparent .png to avif issue

if “Load WebP or AVIF in supported browsers?” is on, .png files with transparency will loose that transparency in browsers that support AVIF due to a recent technical change in Shortpixel’s AVIF toolchain.
Shortpixel is looking at alternative solutions, but until then as a workaround you can either:

  • add .png to Autoptimize’s lazyload exclusion field
  • or to use below code snippet to disable AVIF images;

add_filter( 'autoptimize_filter_imgopt_do_avif', '__return_false');

About that new autoptimize_filter_imgopt_lazyload_from_nth filter

Some people asked for documentation/ information on that new autoptimize_filter_imgopt_lazyload_from_nth filter which allows one to tell AO not to optimize the first X images found in the HTML, so here is an example code snippet that sees AO not lazyload the first 5 images:
add_filter( 'autoptimize_filter_imgopt_lazyload_from_nth', function(){ return 5; } );
Update: as from AO 2.8.2 this will also be an option on the settings page, see screenshot 🙂
 

Fixed: WordPress 5.6 required Autoptimize settings change

PSA: WordPress 5.6 changes the filename of jQuery core. If you’re using Autoptimize and you have jQuery excluded (which is default) you will want to update your JS optimization exclusion list from js/jquery/jquery.js to js/jquery/jquery.min.js.
Update: Autoptimize 2.8 will automagically fix this, urgently looking for some testers to download https://github.com/futtta/autoptimize/archive/beta.zip (make sure 2.7.8 is disabled when enabling the beta). If all goes well and I get some confirmation the update (which has a lot more then just the fix) will go out today!
Update2: AO28 was released, all is (or should be) OK now 🙂

Santa wrapping up Autoptimize 2.8!

I’m sure you have been good this year so Santa cannot but put a nice ribbon around the next version of Autoptimize, out later this month. These are the most important changes:

  • JavaScript: new option “defer but don’t aggregate” which *might* help with “total blocking time”
  • Images: add field to list images to be excluded from image optimization
  • Critical CSS: major improvements of the job processing mechanism, reducing time spent from up to 1 minute to just a couple of seconds.
  • Critical CSS: under “advanced options” replace “request limit” with “queue processing time limit” (default 30s).
  • Extra | Google Fonts: better parsing of version 2 Google Font URL’s (/css2/).
  • Misc. other minor fixes, see the GitHub commit log

In case you want to give Santa a hand with all that wrapping up, you can always download the Beta version here and take it out for a spin.

Autoptimize with support for AVIF images

You probably have heard about AVIF already, but if not; it is a new image format which is based on the AV1 video format and generally has superior compression than the better-known WebP, JPEG, PNG and GIF formats. Avif is currently supported by Chrome & Opera and can be enabled by setting the image.avif.enabled flag in Firefox.
So now you know what it is you may want to use it on your WordPress site? In that case -and the title kind of gives it away- the freshly released Autoptimize 2.7.8 now has support for AVIF if you have image optimization active. Just as for WebP Autoptimize hooks into the lazyload JavaScript to detect if your visitor’s browser supports AVIF and will switch the requests to the ShortPixel CDN to that format if so. If AVIF is not support but WebP is, the requests will be for WebP images and if those are not supported old-fashioned JPEG’s will be loaded.
So there you have it, AVIF is now available in WordPress!

Want to test AVIF images with Autoptimize’s Image Optimization?

So AVIF is a new(ish) image format that promises even better optimization then WebP and is supported in desktop Chrome & behind a preference in Firefox; go to about:config and set image.avif.enabled to true.
If you are using Autoptimize to optimize your images and you want to test AVIF images, you can use below code snippet to do so;

add_filter('autoptimize_filter_imgopt_webp_js', function(){return '<script data-noptimize="1">function c_img(a,b){src="avif"==b?"data:image/avif;base64,AAAAIGZ0eXBhdmlmAAAAAGF2aWZtaWYxbWlhZk1BMUIAAADybWV0YQAAAAAAAAAoaGRscgAAAAAAAAAAcGljdAAAAAAAAAAAAAAAAGxpYmF2aWYAAAAADnBpdG0AAAAAAAEAAAAeaWxvYwAAAABEAAABAAEAAAABAAABGgAAABoAAAAoaWluZgAAAAAAAQAAABppbmZlAgAAAAABAABhdjAxQ29sb3IAAAAAamlwcnAAAABLaXBjbwAAABRpc3BlAAAAAAAAAAEAAAABAAAAEHBpeGkAAAAAAwgICAAAAAxhdjFDgQ0MAAAAABNjb2xybmNseAACAAIAAYAAAAAXaXBtYQAAAAAAAAABAAEEAQKDBAAAACJtZGF0EgAKCBgADsgQEAwgMgwf8AAAWAAAAACvJ+o=":"data:image/webp;base64,UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA==";var c=new Image;c.onload=function(){var d=0<c.width&&0<c.height;a(d,b)},c.onerror=function(){a(!1,b)},c.src=src}function s_img(a,b){w=window,"avif"==b?!1==a?c_img(s_img,"webp"):w.ngImg="avif":!1==a?w.ngImg=!1:w.ngImg="webp"}c_img(s_img,"avif");document.addEventListener("lazybeforeunveil",function({target:a}){window.ngImg&&["data-src","data-srcset"].forEach(function(b){attr=a.getAttribute(b),null!==attr&&-1==attr.indexOf("/client/to_")&&a.setAttribute(b,attr.replace(/\/client\//,"/client/to_"+window.ngImg+","))})});</script>';});

Use the the code snippets plugin to add this (easy and safe) or if you’re adventurous add it to your theme’s functions.php.

Autoptimize < 2.7.7 security vulnerabilities debrief

screenshot of the arbitrary file upload fix on github. quite happy with my work thereWith Autoptimize 2.7.7 released on August the 23rd and having been pushed to all sites that were still on 2.7.0-2.7.6 by the WordPress plugins team on Aug. 30th and 31th, resulting in just under one million downloads in 8 days time, it is now the moment for a small debrief of the security issues that were fixed in this version.
2.7.7 fixed two vulnerabilities, one authenticated cross-site scripting and one arbitrary file upload.

  1. XSS:
    1. Problem: administrator users were able leave JavaScript in the exclusion-fields for CSS and JS optimization, leading that JS to be executed when the page was (re-)loaded.
    2. Risk: This could be abused by one administrator to execute JS against another administrator.
    3. Solution: This was fixed by applying esc_html (to become esc_attr in the next version as suggested by George Stephanis) to escape the JS-code and avoid it getting executed.
  2. Arbitrary File Upload:
    1. Problem: the code that processes Critical CSS settings imports did insufficient checks to ensure no malicious files were uploaded as it lacked a user capability check, did not check file extension of to uploaded file to be zip and did not check the contents of the zip-file. It did however check for a correct nonce for that specific action.
    2. Risk: this could lead to authenticated attackers uploading PHP-files that could be executed, but that risk was very much limited by the nonce-check (which all exploits I have seen happily ignore).
    3. Solution: the code has been updated to do a capability check, to make sure the file uploaded is a zip-file and most importantly to delete any unknown file found immediately after unzipping (based on an list of known-good files).

A big thank you to the two security researchers (Erin Germ for the XSS and an anonymous whitehatter for the file upload problem) who reported these vulnerabilities in a responsible manner and to the WordPress plugin team for their invaluable help in keeping our users safe.