Optimizing images in WordPress with lazy loading and Webp format

Image optimization in WordPress, refers to the process of optimizing images to improve their performance and reduce their file size without significantly compromising their visual quality.

Let's look at some techniques and practices, aimed at enhancing the loading speed of images on a WordPress website. This usually results in improved user experience and better search engine rankings (because search engines don't like slow-loading websites).

Let's look at some common techniques for optimizing images in WordPress.

This involves reducing the file size of an image without losing too much visual quality. You can compress images using various methods and using online image compression tools, WordPress plugins, or image optimization software.

Images should be resized to their display dimensions on the website, to avoid unnecessary bandwidth usage. With that said, still try to keep your amount of crop sizes to a minimum, other plugins, even themes can register additional crop sizes to your WordPress, luckily you can disable them, so be careful.

Cropping allows you to remove any unwanted parts of an image that are not essential to the content. WordPress has 3 built-in crop sizes, thumbnail, medium and large. Only the thumbnail size has a checkbox that allows cropping to exact dimensions, the other sizes are in fact resizing proportionately. There is a way to change the dimensions from your admin screen. Visit Settings > Media to change them.

Pro Tip: You'll need to regenerate your thumbnails (it means all the sizes smaller than the original) for the existing images to be cropped to the media setting sizes. See more on controlling image sizes in WordPress.

Note: If you actually want to have high resolution images on your site, for whatever reason, then try and keep the dimensions at the maximum width or height of your largest crop size.

Choosing the right file format for images can significantly impact file size and loading speed. JPEG is typically suitable for photographs and complex images, while PNG is better for images with transparent backgrounds or simple graphics. With WebP you can have the best of both worlds, small file sizes and very little loss in visual quality.

With lazy loading, images are loaded only when they become visible in the visitor's viewpoint, rather than all at once. This technique reduces the initial page load time, especially for pages with lots of images. Since WordPress 5.5 lazy loading is now a default feature.

Caching involves storing images on the visitor's browser, allowing subsequent page loads to retrieve the images locally rather than downloading them again. This reduces server load and speeds up page loading. Use plugins such as WP Super Cache (which is what we're using on wplake.org), W3 Total Cache or LiteSpeed Cache to enable cache for your website.

These techniques aren't really that complex, they just require a few more steps. But if you do use them, you'll likely gain other fringe benefits too. Let's have a look.

Utilizing a CDN helps deliver images more efficiently. Of course, a CDN is much more than just an image delivery service. In short, it speeds up your site, by storing copies on servers distributed across different geographic locations. This reduces the distance and latency between the user's browser and the image server.

There are several WordPress plugins, such as Smush, Imagify, and EWWW Image Optimizer, that automate image optimization processes. I'd always recommend first trying them on a stage environment until you know what it does. Because if you're not sure what it does, it could as an example, delete your original images (it means when you try something else, the new images aren't cropped from the originals, but rather from a smaller version of the image). Furthermore, these plugins can handle tasks like compression, resizing, lazy loading, and caching, simplifying the optimization workflow.

Pro Tip: Remember, be mindful not to override or duplicate steps. For instance if you have Image Optimizing plugin and it offers caching too, don't turn that on if you already have a Cache plugin in use.

A lot of times it is really a trial-and-error scenario when doing page speed optimization and image optimizations, but be aware that if your site doesn't contain a lot of images, then the impact won't be as large as if it were the contrary.

By implementing these techniques, you can significantly improve the loading speed and performance of images on your WordPress website, resulting in a better user experience and potentially higher search engine rankings. There are many other techniques you can use to optimize your WordPress website because ultimately a fast website improves UX and as you should know by now, search engines love it.

I hope you found this article useful.

Happy Optimizing!