Top 5 ways to optimize images for WordPress

Last updated on September 5, 2022 | By

A complete list of how to improve your WordPress image loading times and better user experience.

Optimizing images in WordPress may require you to compress the images through an image compress plugin or a web app. If you have your images in a reasonable size and properly compressed, you may jump to lazyload, CDN, and preloading processes.

Convert PNGs and JPEGs to Webp format

Convert your PNGs or JPEG images to a modern image format such as WebP to improve on size but keep the quality. The AVIF format is still not popular but as more WordPress plugins add support, you should consider it.

Consider our Imagify vs Smush vs Optimole post on choosing the best plugin for converting your images to webp.

Serve images in next-gen formats WordPress

The WordPress Performance team recently released a free plugin that does create webp versions from new jpeg images, it’s in beta use at your own risk. Download Performance Lab. This improvement will be later merged on WordPress Core.

⚠️ Using a plugin that converts your images from png and jpeg to webp may increase your website storage usage. 

Use a CDN

CDN is a Content Delivery Network, which is loading assets from distributed servers to speed up the load time.

We have a list of free image CDNs. Consider using Jetpack plugin and their free unlimited CDN for uploading your images and serving them freely by Jetpack, reducing the server’s cost.

Consider paid CDNs such as RocketCDN which has full support with Wp Rocket, or use a full performance plugin with built-in CDN like Nitropack for better results.

Cut, compress, and use a different image for the mobile

Cut the size of your images and use a smaller image for the mobile viewport. Modern themes have built-in UI to change responsive images. Cloudinary offers a free Website Image Analysis Tool that identifies opportunities to compress and size images across the page, including AVIF and WEBP formats.

Resizing or cutting the size of images to improve load time isn’t always necessary as using a modern compressed image format like Webp or AVIF. When using these two formats, the image will maintain its quality but reduce the load time.

If the lazyload is done correctly, the remaining images of the page won’t interfere with the page’s initial load, but only on server costs.

Preload images and/or preload only when necessary

Avoid preloading images when it’s not necessary, use a WordPress function to preload the image only on the specific pages it appears.

Use Perfmatters and its conditional preloading to preload assets only on certain parts of your website, or its “Preload Critical Images” beta feature that will automatically preload the number of leading images that you choose (0-5).

preaload perfmatters
Preload assets with a conditional option
preload critical images perfmatters
“Preload Critical Images” beta feature

Lazyload images and remove lazyload from elements above the fold

Lazyload your images. Lazyloading is when you delay the load or initialization of assets until they’re needed to improve performance.

Avoid lazyloading the logo and any above-the-fold assets, by adding them to the exceptions list on Wp Rocket if you’re using it. Another tip is to consider lazyloading the background images too.

WordPress 5.9 update brings a new logic for lazyload wichs improves a lot the way it loads images. WordPress will now skip the very first “content image or iframe” on the page from being lazy-loaded. This improvement depends on how many images your website loads.

As told WordPress 5.9 has native and improved lazyload support but WP Rocket has lazyload with an option to remove unwanted lazyloading images, such as logo and other images that may be degrading the LCP(Largest Contentful Paint) on its UI, facilitating for non-developers people:

image 1

Other lazyload plugins:

  • Lazyload (Wp Media) – Free plugin with a filter to remove unwanted images from lazy loading(Improper lazyload leads to bad LCP).
  • Lazy Load Elementor Background Images – Free plugin that lazyloads Elementor background images.

Get your Core Web Vitals optimized

Leave a Comment