Image Performance Problem Areas
The main items to consider when optimizing website images are:
- Size – The width and height of the image file should match the displayed size. Delivering images that are too wide or tall is wasteful for you and the user.
- Screen size – You’ll need multiple sizes of each image for mobile, tablet, desktop, and everything in between.
- Screen density – Many devices now feature high-density screens, meaning one-dimensional pixel is actually multiple physical pixels. Standard-density images might be perceived as blurry to users accustomed to these sharp screens.
- Optimization – An optimized image can have a 10x smaller download size than the original yet appear the same to the human eye.
- File type – Modern image file types like webp and avif offer smaller download sizes and faster rendering. But you’ll still need to provide a fallback to traditional file types for browsers that don’t support these yet.
That’s quite a lot to consider. So how do we address all these variables in the context of, say, a WordPress site?
Traditional Approach and Pain Points
WordPress automatically generates multiple sizes of each image you upload (e.g. 2000px upload, WordPress generates 1200px, 800px, and 400px), so that partially addresses the image size and screen size issues, but not fully. The problem is WordPress generates a fixed number of sizes for each image, usually about 4, but each image is displayed at potentially hundreds of different sizes, especially if displayed full width on mobile devices, which vary greatly in screen size. So if the image is displayed at 500px, the 400px image is too small, so the 800px image is downloaded. In general this means that most images in WordPress are oversized.
On high-density screens, oversized images are acceptable, since the extra pixels will actually be used, but we shouldn’t settle for accidentally delivering oversized images for improved sharpness – we should deliver intentionally sized images that match the calculated size; so for an image displayed at 500px on a screen with a density of 2, we should deliver a 1000px image. Traditionally we’ve used a plugin called Perfect Images to accomplish this, and it works great. But if we had to find a drawback to this plugin it’d be that it resizes the image on your website server, just like the vanilla WordPress image resizing, which makes the server less responsive for its main purpose – to serve web pages to users.
Then there’s the image optimization and file types, which are typically handled by an image optimization plugin, such as Imagify, ShortPixel, or EWWW. These plugins are great because they pair with a cloud-based service, so the image processing is handled on a remote server instead of your website server. And they also convert the images to modern image formats and serve those to modern browsers, and intelligently fallback to traditional images on old browsers.
Considering all these issues and addressing them with several different plugins can become a bit overwhelming. And even then you’ll still be serving oversized images in most cases. What if there was a way to automatically deliver an optimized image at the exact size it is displayed for every screen size and density?
New Approach
Recently several all-in-one solutions have popped up that solve all of these problems, including ShortPixel Adaptive Images and Optimole. We have settled on ShortPixel. Keep in mind these are paid services because you are using their server resources to power your images.
These services do the inverse of the traditional method: instead of optimizing the images in your WordPress media library at upload time, they generate the images on-demand, sized exactly to the use case, per device. So if the image is displayed at 564px, the image is sized and delivered at exactly that size – or, based on the screen density, the scaled factor of that size.
Instead of requesting the image directly from your web server, the image is requested from ShortPixel’s server. The request basically says, “give me this image, at this size, with this density, in this format”, essentially guaranteeing the best image performance for every image on your site for every device. Also note, all this work is done on the ShortPixel server, leaving your server free to serve pages. As a bonus, ShortPixel also lazy loads all the images. You may be starting to see why we love ShortPixel.
To get started, install the ShortPixel Adaptive Images plugin on your WordPress site, and activate it. Then follow the guided setup to create a ShortPixel account (we like the Unlimited plan for $99/yr), and in the settings be sure to set the compression level to Lossy, and enable WEBP and AVIF. You should be well on your way to a faster site and happier users.
