Image optimization and WebP
As part of our WordPress optimization service at WPsupportly Pagespeed we are always presented with images that require optimization in order to speed up WordPress websites.
There are a number of tools available to optimize your images but another area that really helps with image load times is the image format in use. Typically that is compressed JPG files or the larger compressed PNG file for use only where transparency is required.
The use of SVG files makes sense as these are computationally derived and vector based, so whilst being extremely efficient, the size displayed has negligible impact on the file size, unlike photographs. At Offshorly.com, our parent digital agency, SVG files are used for logos, animation work and graphics where possible. Infact if you look at the images served on this website you will see most of the graphics employed are SVG files.
Scan your site at WPScanly to see if you can improve load times by focusing on your image optimization techniques.
Once images are optimized then it’s definitely worth delivering these as WebP images to browsers that support the format – otherwise the fallback will be the optimized JPG and PNG’s.
WebP is a more efficient modern compression technology that can lead to additional image size reduction and therefore faster loading WordPress websites. Typically an additional 30% – 50% size reduction can be achieved.
Luckily these days most modern browsers support the relatively new WebP format (Safari being the exception)
Workflow
This is an overview of the tools and techniques we use to optimize our clients images. Whilst it’s by no means the only way to do this, we have found this combination of tools works well for us and consistently produces good results.
Imsanity
A useful step to prevent huge image uploads is to install the plugin Imsanity. Here you can dictate the maximum image size used by the website – we usually set this to 1920px width.
Imagify
We use Imagify to optimize all images. You might want to play with the settings here and read their guide, but Normal compression works quite well. Aggressive is just that and tends to pixelate and blur images.
Occasionally we use https://tinypng.com/ in addition to resize the image.
WebP images – select the preferred method to use as picture tags
Consider using a CDN here too, as that will also decrease load times, depending on geographical location. We use KeyCDN for our own websites.
WPRocket
Clearly WPRocket is a caching plugin, however as we use this on almost all our clients WordPress optimizations, we make use of the setting in this to serve WebP images to the browser.
Enable WebP caching on WP Rocket here: WP Rocket Settings > Media > Toggle Enable WebP Caching
Don’t want to use WPRocket ?
If WP Rocket is not installed and you have no other plugins to use to serve the WebP images there is an alternative:
WebP Express
With the free WebP Express plugin, you can serve auto-generated WebP images to browsers that support WebP, while still serving JPEGs/PNGs to Safari users. This option works on any images on your site, including those in the media library, galleries, and themes.
Use the Operation Mode: Standard or No conversion if you have set Imagify to convert for you.
- Select “Activate redirection” again only if not using Imagify first
- Tick “Alter HTML” – enabling this alters the HTML code such that WebP images are served to browsers that supports WebP.
- Select – Replace <img> tags with <picture> tags, adding the webp to srcset.
- Tick – Dynamically load picturefill.js on older browsers
- Select – The complete page (using output buffering)
- If you are using a CDN, specify its URL
- Check the site to make sure nothing is broken.
- Inspect the HTML element, it should have the <picture> tag.
- Most importantly, check the site on a Safari browser.
This concludes an overview on basic image optimisation and delivery and is a small part of our PageSpeed WordPress optimization service. If you would like to know more, please visit WPsupportly PageSpeed for details.