A complete list on how to improve your WordPress image loading times and better user experience.
Use a CDN
We have a list of free CDN’s. Consider using Jetpack free CDN for uploading your images and serving them freely by Jetpack, reducing servers cost. Consider paid CDN’s 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.
Avoid lazyload elements above-the-field
This may include especially logos. Avoid lazyloading the logo, by adding it to the exceptions list on Wp Rocket if you’re using it. Another tip is to consider lazyloading the background images too.
Preload only when necessary
Avoid preloading images when it’s not necessary, use a WordPress function to preload the image only in the specific pages it appears.
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. Compress your image using a modern image format such as webp.
Consider our Imagify vs Smush vs Optimole post on choosing the best plugin for converting your images to webp.
Resizing/Cutting the size of images to improve load time isn’t always necessary as using a modern compressed image with Webp or AVIF support would maintain the image quality but reduce the load time. If lazyload correctly the remaining images of the page don’t interfere with the page initial load, but only on server costs.