Best image sizes for web
Adjusting image size is usually the best measure to optimize performance and cost of any website. We've got significant improvements in web KPIs and millions of euros of annual savings in the CDN bill for our largest customers, just revising and adjusting their image breakpoints.
To optimize the speed of our web, we should be responsive delivering graphic content. We'd ideally deliver an image with a resolution that fits the image display size. Here, we mean the size in real pixels not the virtual size. But to be fast, we also should take advantage of our CDN cache, using a limited amount of well chosen breakpoints. In this regard, on-the-fly image processing is not a good choice in most cases. It incurs in some image processing latency and the uneven allocation of CDN cache doesn't ensure a consistent experience across our users.
The fact is we should analyze the layout of our front-ends and the characteristics of the devices of our users. Here, we'll do the analysis and draw a proposal of breakpoints. We'll do it with a typical ecommerce layout in mind, since it covers the most frequent uses of images in the web. We'll also comment on different types of tools to accomplish the task.
We should start recognizing that mobile is the chief. Not only because of the higher traffic volume generated by mobile devices, but also because of two important reasons. First, the exposition of mobile users to adverse network conditions, which increases the impact of web optimization on their UX. Second, for mobile users the statistics of displaying widths can be fairly estimated, based on device characteristics.
Most smartphones present one of few display resolutions. Navigation in mobile webs is much less flexible compared to dektop. In mobile we don't open browser windows with an arbitrary size. Moreover, mobile layouts are much more repetitive in how they use images, usually full or half width. This makes the displaying size of images much more predictable in mobile compared to desktop.
Mobile display resolutions
If we look at iPhone display sizes, the vast majority feature a resolution of 750x1334, and the X models feature a 1125x2436 display resolution. In a typical layout, images will have full screen or half screen width. So we'll mostly find displaying resolutions of 375, 750, 563, and 1125 pixels width.
For Android, we have a similar situation. Most models have either a HD (720x1280) or a full HD display (1080x1920). That is, most images will be displayed with a width of 360, 720, 540, or 1080 pixels. There are even some models with 2K resolution displays (1440x2960). These models will add some cases that feature a width of 1440 px.
A selection of breakpoints
After considering only mobile devices, we already have 9 likely-to-occur image displaying widths!. As we add more widths to represent the most usual desktop displays, the list will grow even longer. This may challenge our first commitment to keep it simple.
But, do we need all these image sizes as breakpoints?. Not really. Even for a slow 3G network of 2.4Mbps speed, the impact of changing the width between some of the widths will be negligible. For instance, the time to transfer two files with a weight difference of less that 15 KB will differ in less than 50ms, even for such a slow network. That's certainly negligible.
That means we can simplify the list of mobile-related breakpoints joining iPhone and Android cases that are close. For instance, we can choose: 375, 750, 563, 1125, and 1440. Then we may end by adding some usual display sizes for desktop users: 1024, 1280, and 1920.
Of course, if we don't have much iPhone users we may rather stick to Android sizes. As well, we may add larger sizes for zoom images and maybe a smaller one for shopping cart thumbnails. All these tweaks will depend on our layout and our users' devices.
Workflows and tools for the creation of image derivatives
Different types of workflows to create image derivatives require different types of tools. The good news is that there are many tools out there to deploy an image processing pipeline for the creation of image derivatives.
Powerful open source solutions like ImageMagick allow to develop an inhouse pipeline. However, a proper use of these tools comes with some limitations and many hidden costs. Their integration in our workflows still requires knowledge and development and maintenance effort and time.
Fortunately, there are cloud tools that can handle all the image transformations and optimizations required by a general web business. A case that is both cost-effective and easy to deploy is Abraia Multichannel Image Optimization Workflows. The configuration of derivatives is very easy to do.
It supports different use cases, from cloud to local hot folders for image optimization. We only have to leave our pictures in these online or local hot folders, to have all our image derivatives created.
It also supports very flexible API-based integrations for image optimization available in python, node.js, or php. And even a command-line integration for batch image optimization.