Resizing images for the web is one of the main pain points our clients face. The truth is there is no one rule that applies to every website, the only constant is that your web images need to have a file size that is as small as you can possibly achieve.
We all know what Bandwidth is right? The speed at which the website and its assets can download, or transfer across the wire in to our browser and render on screen. The faster our bandwidth, the faster things happen.
This can be understood with the most simple of equations: If your bandwidth is 1MB a second, an image that is 1MB in size will take one second to fully download all of its data to the browser. If you make that image 100KB, a tenth of the size, it will take a tenth of a second to download. Thats what we want to achieve with our image sizes
The only constant is that your web images need to have a file size that is as small as you can possibly achieve
In the print world, DPI is everything. On the web, this is virtually meaningless. So don't get hung up on it.
Retina is a term Apple coined to describe the new generation of screens that have more pixels per inch than the screens that came before. They describe this as double density, triple density, etc. This sounds a bit like DPI right? It is, only increasing the DPI of your image will do nothing to help you manage retina images.
The way retina screens render images is by pixel width. Let's say an iPhone has a screen width of 320px, at 2x density that means a 640px wide image, at 3x density, thats a 960px wide image required to render 1:1. And this is how you will resize your images for the web.
If you're a web content manager, and you are seeking to get the best possible image fidelity without compromising bandwidth, page speed, or SEO rank, you need to take your understanding of how images work on the web to the next level. Asking your developer the question "how big should all my images be?" is far too vague and can never be answered with just one simple instruction.
Many web platforms, like Shopify, Squarespace, Swell, etc. have image resizing features that allow your developers to specify the final output size(s) of the image. What this means is that you only need to be concerned with uploading a file that is big enough or bigger than the final output file.
If your image doesn’t need transparency, don’t use a PNG. And if you’re using an image with transparency to create some sort of graphical treatment, consider other methods of achieving the same affect. Speak to your developer about how SVGs with CSS might achieve the same result.
The web changes fast. What is common practice today probably won't be 3 years from now. Will Apple release a 4x density iPhone screen, probably. Will bandwidth get exponentially faster, maybe not. Will there ever be one rule on how to size images for the web, definitely not.
