How To Efficiently Encode Images In WordPress (PSI Item)

How To Efficiently Encode Images In WordPress (PSI Item)

If you ran your WordPress site through PageSpeed Insights, you may come across a recommendation to efficiently encode images.

In WordPress, you can efficiently encode images by compressing them with an image optimization plugin and serving them from a CDN. To further reduce your image load times, make sure you properly size images, specify image dimensions, and convert images to WebP.

Lighthouse scans all images on the page you test, then sets the compression level to 85%. If the saving are 4KiB or greater, they will flag the image and you will see it as an error in your report.

 

1. Compress Images To 85%

Not all image optimization plugins are reliable.

ShortPixel, TinyPNG, and Smush are highly rated plugins in Facebook Groups. Flying Images was also developed by WP Speed Matters and uses Statically’s free CDN to serve your images.

Most image optimizations let you set the compression level. Since Lighthoue uses 85% compression, that is a good starting point. Depending on your site and how much you want to compress images, you may set it higher or lower since it can have an impact on image quality.

 

2. Serve Images From A CDN

CDNs don’t always serve images by default.

You may need to use a CDN rewrite which can be done in Perfmatters, some CDN settings, or by using a CDN Rewrite plugin. This will rewrite all your images URLs to include your CDN URL.

WordPress CDN Rewrite

Flying images is a free image optimization plugin that automatically rewrites images to be served from Statically’s CDN. It also supports WebP, adaptive images, and native lazy loading.

Flying Images Statically CDN

Old Image URL (Without CDN Rewrite): https://onlinemediamasters.com/wp-content/uploads/2021/01/Tom-Dupuis-Widget.png

New Image URL (With CDN Rewrite): https://onlinemediamasters.b-cdn.net/wp-content/uploads/2021/01/Tom-Dupuis-Widget.png

 

3. Lazy Load Images

Lazy loading images was built-in to WordPress 5.5 and is the “defer offscreen images” recommendation in PageSpeed Insights.

This can also be done in most image optimization and cache plugins. Ideally use an option that support a browser’s native lazy loading if available and lazy loading inlined background images.

 

4. Specify Image Dimensions

Specify image dimensions means you need to add a width and height attribute to the image’s HTML or CSS. If images are

[…]

 



This article was written by Tom Dupuis and originally published on Tom Dupuis.

Disclosure: Some of the links in this post are "affiliate links." This means if you click on the link and purchase the product, We may receive an affiliate commission.

Leave a Comment

You have to agree to the comment policy.

Show Your ❤️ Love! Like Us
Scroll to Top