Rendimiento

Optimizing images in WordPress

Por workalibur 5 min de lectura

Optimizing images on your WordPress website is important for improving site speed and reducing loading times. Here are some ways to optimize your WordPress images:

  • Compress your images: large images can slow down your website. Use an image compression plugin such as WP Smush or ShortPixel to compress your images and reduce their file size without compromising quality.
  • Use the right file format: choose the correct format for each image. For photographs or images with many colours, use JPEG; for logos or graphics, use PNG. Avoid BMP, TIFF or GIF formats, as they produce very large files.
  • Resize your images: before uploading images to your website, resize them to the correct dimensions. This ensures your website loads faster and that images display properly.
  • Use lazy loading: use a lazy loading plugin such as Lazy Load or WP Rocket to load images only when they are visible on screen. This helps reduce the initial page loading time.
  • Enable caching: enable caching for your images using a caching plugin such as WP Rocket or W3 Total Cache. This helps speed up your website’s loading time.
  • Use a content delivery network (CDN): use a CDN to serve your images from a server closer to your visitors. This helps improve your website’s loading time, especially for visitors who are geographically far from your server.

By optimizing your images using these techniques, you can significantly improve your website’s loading time, providing a better experience for your visitors.

Which image plugin to choose

Compressing images by hand before uploading them is good practice, but it doesn’t scale: on a site with hundreds of images you need a plugin that does it automatically, both when each image is uploaded and on those already in the media library. These are the five most widely used and how they differ:

  • Smush: compresses without visible loss, in bulk and with one click, and is the easiest to set up. The free version has a per-image size limit; for more, you need to upgrade to Smush Pro.
  • ShortPixel: offers three compression levels (lossless, lossy and «glossy», an intermediate option) and achieves very high reductions while keeping good visual quality. It converts to WebP and AVIF and also optimizes PDFs.
  • EWWW Image Optimizer: is the one we use on most of our projects, because it can compress on your own server without sending images to an external service, converts to WebP, includes lazy loading and works well with a CDN. It also exposes the most options, so it’s worth reviewing its settings carefully.
  • Imagify: from the same team as WP Rocket, with three compression levels (normal, aggressive and ultra), conversion to WebP and AVIF, and bulk optimization of the media library. Very convenient if you already use WP Rocket.
  • Smush Pro: the paid version of Smush: no size limit, WebP conversion, lazy loading, automatic resizing and delivery through its own CDN. It also optimizes images from your theme and plugins, not just those in the media library.

All five do the basic job well. Choose based on two criteria: whether you want images to leave your server and go to an external service for optimization (EWWW allows you to avoid this), and whether you need modern formats and lazy loading in the same plugin. And use only one: two image plugins running at the same time can conflict and leave the media library half-processed.

Modern formats: WebP and AVIF

JPEG and PNG have been around for decades. Modern formats compress far more efficiently at the same visual quality: according to a compression study published by Google, WebP files are about a third smaller than a JPEG of equivalent quality, and AVIF reduces size even further, at the cost of taking longer to generate. Both support transparency, so they can replace PNG as well. Today, all current browsers display WebP, and the major browsers now display AVIF too.

In WordPress you don’t need to change the images you already have: it accepts WebP uploads and, in recent versions, AVIF. The practical approach is to have one of the plugins above generate a WebP (or AVIF) version of each image, and let the server or CDN serve it to browsers that support it while keeping the original JPEG for those that don’t. How to set up that substitution, whether with server rewrite rules or a function on your CDN, is explained in our complete guide to speeding up WordPress. It is one of the improvements with the greatest effect on LCP, the metric that carries the most weight in PageSpeed, and it changes nothing visible for your visitors.

Is your website slow or does nobody look after it?

We host it, keep it up to date and make backups. You focus on your business. Take a look at PF Hosting or get in touch.