Over the past few years many clients have asked me all sorts of questions about uploading images on their websites. The main reoccurring question is:

‘How big should the image be?’

Unfortunately there is no easy answer to this question, which is why I’ve written this post! Hopefully it should clear up a few things.

TL;DR = 2800px wide .jpg

Quick Guide

• Filenames: just use lowercase, no spaces (use hyphens instead), no special characters. Also a good idea to include some identifying info (project name, subject matter).
• File type: the vast majority of images on the web are .jpg – this is because it can retain quality whilst also being light on file size. Use SVG (vector) wherever possible, and only use .pngs when the image needs to have areas of transparency.
• Photos: Start with the highest quality image you can get – going down in dimensions and file size is easy, but increasing the dimensions of a small image always looks blocky and blurry.

Image sizes on the web

The modern standard for displaying images in HTML is with a ‘set’ of the same image at different sizes. This allows the browser download the appropriate size. You don’t need to download a huge 2500px image when viewing on an iPhone.

The important thing to know is the server or CMS will (or should) generate the various resized images behind the scenes – the website admin just needs to upload an image of sufficient quality for the highest resolution (and the code will do the rest).

Alt Text

All images on the web should have suitable ‘alt text’. ‘Alt Text’ should describe the content of the image. It is used by screen readers, SEO (google) crawlers and will be displayed if the image fails to load. It’s often overlooked, but it’s important for both SEO and visually-impaired users.

Small (file size) vs. Small (pixel size)

When a developer is talking about images being small or large, they may be talking about one of two things:

• the dimensions of the image (measured in pixels).
• the file size of the image (measured in kilobytes).

The file size is the amount storage space the file takes up. A computer, USB stick, phone or TV recording box has only a certain amount of storage space on it, and can only fit a certain number of items on it. You can think of it like a fridge, all the items in it take up a different amount of space, but once it’s full, it’s full.

The dimensions of the image is the number of pixels wide and tall it is. If you keep zooming into a picture on the web, eventually you’ll see the tiny squares of solid colour – these are the pixels. Every pixel is made up of a blend of Red, Green and Blue (which is why you’ll often hear RGB mentioned when talking about images.) The smaller dimensions of the image, the smaller the file size – simply because there are less pixels in the image. But if you have a small dimensioned image and it’s stretched too large the single pixels are stretched over multiple pixels and the image appears blocky. It can really ruin the impression of a website if the images are blurry and unclear.

So then, a balance needs to be struck. You don’t want an image to be too large, as it’ll take too long to download, but equally you don’t want it too small as it’ll look bad.

Size vs Quality

When you visit a website, your internet browser must download all the assets that make up that webpage (html, css, js, images, videos, etc) from the server to your machine. Put simply, the bigger the files are, the longer the files take to download, and the slower the site. We all know how frustrating a slow website can be, and statistics show users don’t hang around – if it takes too long, they will give up and go somewhere else. This is the main consideration on the web – being fast is not just a nice to have, it’s vitally important, and images (and videos) are often the biggest asset to download.

The trade-off on compressing images, or using small images