How big should your images be when you save them for the web?

Images: they are the currency of Intergoogles. A website that doesn't make use of any kind of imagery, whether that's photography, illustration, or diagrams, is a very rare thing indeed. If you were to stumble upon one, you might well think it a remnant from 1999. Buffer, the team that allows you to stack up your social media posts for timed release, analysed the power of images on Twitter. It concluded that tweets containing images receive 18% more clicks than those without, and a few other tasty image-related nuggets besides.

Given that we're a photography-related site, running a story without at least one image is almost unthinkable for us. It's most certainly a peeve of mine when PR people send me press releases without any accompanying appropriate imagery. No image means no story, and having to chase them is a bit of a bore.

But heavens-above, joining the billions of images floating about on this interconnected web of servers and wires and fibre and routers is a great deal of confusion regarding just how big a photo needs to be.

Pixels per inch

Let's clear up one misconception immediately: it doesn't matter how many blinking pixels per inch (ppi) or dots per inch (dpi) your image has if it is going to be displayed on the web. If an image is intended for print, that is a whole different ball game, but on a computer screen you can use 72, 240, or 300 pixels per inch. It won't make a shred of difference. Not sure if you believe me? I have some examples.

This image was created 800 pixels wide image at 300ppi — This image was created 800 pixels wide image at 300ppi

How different is the image above, which is 800 pixels wide and has 300ppi, to the image below, which is also 800 pixels wide, but has 72ppi? If you can spot anything, let me know.

Also created at 800 pixels wide, but this time with 72ppi

Should you be concerned about anyone downloading your images and printing them, then you might wish to use a smaller pixels per inch count. But when it comes to screen rendering, you don't have to worry.

Width (and length)

What you really need to think about is how wide you want your images to display. There are only so many pixels filling the screens of our devices–my laptop has 1,280 across and 800 downwards and my tablet 1,920 by 1,200, although there are plenty of larger displays out there as well as 'Retina' displays, more on those in a bit–which means that an over-sized image will be wasted pixels. By uploading too-large images you will either create more work for your host as it has to re-size the images in order to display them, it won't be able to render them properly, or there will be a negative impact on performance when people try to access a page. This is counter-productive, costing you speed, professionalism, and therefore traffic. So pick your image size wisely.

Uploaded at 1,500 pixels wide, but re-sized by Squarespace

Photocritic uses a clever, responsive platform which automatically resizes images to comfortably fit within the margins of a device, but even then, it cannot handle images in excess of 1,500 pixels wide.

This one was uploaded at 800 pixels wide

The maximum image size for a Wordpress blog will depend on the theme that you're using, but the chances are, it won't need to be any larger than 1,200 pixels.

Facebook will allow you to upload images as large as 2,048 pixels across, which is great for storing back-ups, but not so great for people wanting to look at them. With Flickr, you can upload the largest version you have of an image (great for backing up), but limit the size at which it displays (much better for bandwidth).

What about retina displays?

Ah, yes, retina displays. The retina display is a term coined by Apple to describe one of its screens that enjoys a far higher pixel density than a regular screen, achieved by ramming many more, smaller sized pixels into a display. (There are 2560 by 1600 pixels in a 13" MacBook Retina.) This increased pixel density allows for images to be rendered sharper and clearer, assuming that there are sufficient pixels in the image to fill them, of course. With a retina display you're looking at double the number of pixels when compared to a non-retina display screen of the same size.

So the next, and most obvious question is, 'What the hell will a photo that's 800 pixels wide look like on a retina display? It's going to be either tiny, or some ghastly interpolation will happen that makes it appear the correct size, but awfully grainy, no?' Not quite. Thankfully.

The pixels in the retina display are sufficiently small that you can share one of the 800 pixels from an image across two of them and the image won't look horrific. So that's what happens. An 800 by 533 pixel image will occupy 1,600 by 1,066 'retina pixels' and not look that much the worse for it.

Yes, a 1,600 pixel-wide image will look better on a retina display, but using an 800 pixel-wide image won't be the end of the world.

File size and quality

What are the chances that you've been saving your images at 100% quality for web display? I'll go for high, but I'd like to be proved wrong. What are the chances that you really need to be displaying images at the highest quality on the web? I'll guess low this time. What's the difference in file size between an 800 pixel-wide image saved at 100% quality, 80% quality, and 50% quality? That would be 429KB against 239 KB against 136 KB respectively.

Chilis drying in the sun at 100% quality

What impact will the difference in those file sizes have on the speed at which your pages load? Quite a bit.

And what's the discernible difference in a 100%, 80%, and 50% quality image? You tell me.

At the end of it all

Choosing the right image size and quality is important. It can have a significant impact on your site's performance and if people can't see your images because they don't load properly, they take too long to load, or they eat into their valuable bandwidth, you won't reap the benefits of displaying them in the first place.

Remember: you can forget about pixels per inch; think about how wide an image really needs to be; and consider the trade-off of file size and performance against image quality. You can make yours, and your website's visitors' lives, a whole lot easier.