WPLake > Blog > Optimizing images in WordPress with lazy loading and Webp format
  • Deutsch
  • Español
  • Français
  • Italiano

Optimizing images in WordPress with lazy loading and Webp format

Time to read: 3 mins

-

Plugins Tips and Tricks

-

Updated 17.07.23

Let's look at some techniques and practices aimed at optimizing images in your WordPress website. Improve loading time and user experience.
Cameras take large photos

Table of Contents

What is Image Optimization?

#link copied

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).

Common techniques for optimizing images

#link copied

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

Image compression

#link copied

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.

Resizing and cropping

#link copied

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.

Visually the same, but much smaller
Visually the images are the same, but the optimized image is 76% smaller in file size.

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.

File formats

#link copied

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.

Lazy loading

#link copied

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.

Image caching

#link copied

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.

Complex techniques for optimizing images

#link copied

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.

Content Delivery Network (CDN)

#link copied

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.

WordPress plugins

#link copied

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.

Conclusion

#link copied

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!

About the Author
Baxter Jones

Working in the web industry for over 15 years gaining experience in design,user experience and web best practices. Has a keen eye for detail and enjoys having a process when working and creating. He thinks WordPress is the best thing since sliced bread and when he’s not behind his computer he’ll be in the garden.

0 Comments

    Leave a comment

    Reply to 

    Please be considerate when leaving a comment.

    Not shown publicly

    Got it