Optimizing images is crucial for enhancing the performance and user experience of any website. Probably the most important considerations is file size reduction without unduly compromising quality. Large image files can significantly slow down page loading times, negatively impacting both user satisfaction and search engine rankings.
Utilizing appropriate image formats such as WebP, and specifying image dimensions can also help strike a balance between visual appeal and fast loading. Additionally, integrating responsive design practices ensures that images adapt seamlessly to different devices and screen sizes, enhancing overall accessibility.
Leveraging lazy loading, a technique that defers the loading of off-screen images until they are about to be displayed, further accelerates page loading by prioritizing the initial rendering of visible content. Regularly auditing and optimizing images, or ensuring that a system is in place to optimize images as soon as they are uploaded, is essential for maintaining a high-performing WordPress site.
Which Image Format Should You Use?
The image format is one of the most basic choices that has to be made. We’ve seen far too many websites using PNG images in situations where a number of other formats would have worked just as well and provided much better performance. Here’s a quick rundown of the pros and cons of the most popular formats in use today.
| Format | Pros | Cons |
|---|---|---|
| AVIF | Superior compression efficiency | Limited browser support |
| Supports lossy and lossless compression | Encoding can be slower | |
| JPEG | Very good compression for photographs | Lossy compression may lead to quality loss |
| Widely supported across browsers and devices | Not suitable for images with transparency | |
| Progressive rendering | File sizes are larger than with more modern formats | |
| PNG | Lossless compression maintains image quality | Larger file sizes, especially for photographs |
| Supports transparency (alpha channel) | Limited support for advanced compression techniques | |
| GIF | Supports animation | Limited color support (256 colors) |
| Lossless compression for a limited color palette | Larger file sizes compared to modern formats | |
| WebP | Excellent compression with both lossy and lossless options | Limited support in older browsers without workarounds, but this is almost a non-issue now, as all modern browsers support it |
| Generally smaller file sizes than JPEG and PNG | ||
| Supports transparency and animation | ||
| SVG | Vector format, resolution-independent | Not suitable for complex images or photographs |
| Can be scaled without loss of quality | Limited support for certain effects and filters |
A few quick takeaways: WebP, SVG, and the occasional GIF should be all most sites need. Almost any JPEG or PNG image can be converted to WebP with considerable size reduction and no loss in quality. Unless it is very simple line art or clip art style image, GIFs should usually be replaced by either WebP of SVG, and you will have the added benefit that nobody will argue over the pronunciation!
There might still be a place for PNGs when transparency is needed, but WebP can usually handle that just fine. SVG is a great format for icons, logos, and other small images, but since it is a vector format, not bit mapped, there is no simple way to convert from a JPG or PNG. AVIF shows a lot of promise, but is not yet well enough supported for general use. Lastly, if you are still using BMPs, well…, just don’t!
Image Size: How Big Should You Go?
Once you have the format decided on, you need to decide how large your images will be. Obviously, there is no point in having an image larger than a visitor will ever view it. However, that calculation is made more difficult by modern 2K, 4K, and even 8K monitors.
As a general rule, unless your site needs to display artworks or geographic details with the absolute greatest clarity possible, 2560 pixels in width is the absolute maximum you will ever need to go. Many sites use no more than 2048px. This is for images that will be allowed to stretch the full width of a site. For smaller images in the body of a page or post 1200px is usually plenty.
Manual or Automatic?
Painstakingly analyzing and optimizing images by hand on a growing dynamic website is a hopeless task. Even trying to specify the image dimensions can be really difficult with responsive designs. The only manual task that makes sense—assuming you know at least basic PHP coding (or find a plugin to do it for you), is to create custom image sizes appropriate for your site. When you upload an image, WordPress automatically creates several copies of that image at different sizes.
The default sizes are a good compromise for most sites, but you should examine your theme to see if there are specific sizes you use often, such as hero images or featured images on blog posts, and add those in or change the existing sizes to match. Beyond that, automation is the way to go. Some of the advantages of using a plugin for WordPress image optimization are:
Bulk Optimization: Plugins enable bulk optimization, allowing you to optimize multiple images at once. This is great if your library already contains hundreds or thousand of images.
Real-time Optimization: Most plugins provide real-time optimization during the image upload process. So there is nothing to forget.
Settings and Customization: Plugins often offer settings and customization options to tailor optimization based on your specific needs.
Format Conversion: Most plugins will automatically convert images to more efficient formats like WebP.
Lazy Loading: Many plugins include lazy loading. Implementing this manually can be complex.
Image Sizes: Plugins will often offer the option to add the image size attributes to the HTML, resulting in considerable improvement in both speed and Cumulative Layout Shift, a core component of Core Web Vitals.
CDN Integration: Most plugins offer easy integration with a content delivery network (CDN), and some even offer a direct connection with a CDN from the same company.
Updates and Maintenance: Plugins are regularly updated by developers to incorporate the latest optimization techniques and compatibility improvements. Manually optimizing images may not benefit from ongoing improvements.
This being WordPress, there are of course a huge number of image optimization plugins. While the following list is not exhaustive, as of the time of this writing, I am not aware of any advantages offered by any other plugins that would make them worth adding.
| Plugin | Pros | Cons |
|---|---|---|
| Smush | User-friendly | Free version has limitations |
| Automatic compression | ||
| Bulk optimization | ||
| ShortPixel | High compression | Limited in the free version |
| Supports WebP | ||
| PDF optimization | ||
| Imagify | Three compression levels | Limited free plan |
| Seamless integration | Compression limits | |
| Optimole | Dynamic image resizing | Pricing based on bandwidth |
| Lazy loading | ||
| WebP support |
Our recommendation is to use ShortPixel if you want the ultimate in file size vs. quality. However, if you are using WP Rocket for other performance optimization, it makes sense to go with Imagify since they are from the same developers and integrate with no issues. Optimole can sometimes be really good, but we’ve experienced compatibility issues at times. And lastly, Smush generally will not get images as small as the others, but it still works quite well and is possibly the easiest to use.
Note: This is not an affiliate site. We make no money if you purchase one of these plugins. We’re just trying to share our experience.