Tag Archives: webp

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.

Easter bunny special: Autoptimize 2.5

Autoptimize 2.5 has been released earlier today (April 22nd).

Main focus of this release is more love for image optimization, now on a separate tab and including lazyload and WebP support.

Lots of other bugfixes and smaller improvements too off course, e.g. an option to disable the minification of excluded CSS/ JS (which 2.4 did by default).

No Easter eggs in there though :-)

Autoptimize 2.5 almost ready, last call for testers!

Autoptimize 2.5 is almost ready! It features a new “Images”-tab to house all Image optimization options, including support for lazy-loading images and WebP (the only next-gen image format that really matters, no?);

So download the beta and test lazy-loading and WebP (and all of the other changes) and let me know of any issue you might find!