Getting images ready for the web

Images are usually the heaviest thing on a small business website, and the easiest to fix. A single photo straight off a phone can weigh more than the rest of the page put together, and every visitor on mobile data pays for it in waiting time.

Getting images right does not need expensive software. It comes down to format, dimensions, compression and how you put the image on the page. This is the process I follow for client sites.

Choosing a format

For photos on a website, WebP is my default: well supported, and noticeably smaller than JPEG. AVIF can go smaller still, but fewer tools can save it, and the Image Compressor only offers it when your browser can create it.

Common mistakes:

• Photos saved as PNG. PNG keeps every pixel exactly, which is ideal for a screenshot and wasteful for a photo.
• Logos as JPEG. Ask the client’s designer for the original vector file. An SVG logo is often a few kilobytes and crisp on every screen.
• Animated GIFs. A short muted video is usually far smaller. (The Image Compressor turns an animated GIF into a still of its first frame.)

Getting the dimensions right

Most phones and many laptops have high-density screens, which use two or more physical pixels for every pixel in your CSS. An image displayed 600 pixels wide in CSS needs to be about 1,200 pixels wide to look sharp on those screens.

My rule of thumb is to make an image roughly twice the largest width it will be shown at. Three times rarely pays off: the extra detail is hard to see and the file grows quickly. To find the display width, right-click the image, choose Inspect and hover over the element.

These are my starting points, not rules. The file sizes assume WebP or a well-compressed JPEG.

Busy photos (foliage, crowds, textured fabric) compress less well, so some will land above these targets. That is fine: the aim is to avoid the 5 MB hero image, not to hit an exact number.

In the Image Compressor, Fit within shrinks each image to a maximum width and height, keeping its proportions. It never enlarges an image, which would only blur it.

How much to compress

JPEG, WebP and AVIF are lossy: they throw away detail you are unlikely to notice in exchange for much smaller files.

For photos, somewhere between 75 and 85 is a good balance, and the Image Compressor starts at 80. Go lower for thumbnails. Check the result at full size where compression shows first: smooth gradients such as sky, skin tones, and fine detail such as hair or text.

Two things worth knowing:

• Quality numbers are not comparable between formats. Quality 80 in WebP does not look the same as quality 80 in JPEG. Judge by eye and by file size, not by the number.
• Always compress from the original. Each lossy save loses a little more, so keep the originals somewhere safe and never recompress an already compressed file. The Image Compressor re-processes from your originals each time you change an option, so experimenting costs nothing.

If a compressed file comes out bigger than the original, the original was probably already heavily compressed. Try a lower quality or smaller size.

Responsive images

A phone does not need the 2,400 pixel version of your hero image. Responsive images let the browser choose a suitable size for each screen, so phones download less.

You do this with two attributes on the img element:

• srcset lists the same image at several widths, each followed by its width and a w, for example srcset="shop-480.webp 480w, shop-960.webp 960w, shop-1600.webp 1600w".
• sizes tells the browser how wide the image will be displayed, because it has to choose before the CSS has loaded. For example, sizes="(min-width: 50rem) 50vw, 100vw" means “half the screen width on wider screens, otherwise the full width”.

Keep a normal src as the fallback. The browser then picks a file, taking the screen’s pixel density into account.

Two more attributes matter for every image, responsive or not:

• width and height, set to the image’s real pixel size. The browser reserves the right space, so the page does not jump about as images load. CSS can still scale the image.
• loading="lazy" for images further down the page, so they load only when someone scrolls near them. Do not use it on the main image at the top of the page, which should load as early as possible.

To make the different widths, run the images through the Image Compressor once per width and put the width in each file name. WordPress creates several sizes on upload and writes srcset for you, so there your job is simply to upload a sensibly sized original rather than a 6,000 pixel photo.

To offer AVIF with a fallback, the picture element lets you list formats in order of preference. web.dev’s Learn Images course covers this in more depth.

Alt text

Alt text is read aloud by screen readers and shown when an image fails to load. It should say what the image contributes to the page.

• Describe the purpose, not just the contents. “The owner icing a wedding cake in the bakery kitchen” is more useful than “woman with cake” or a string of keywords.
• Leave out “image of”. Screen readers already announce that it is an image.
• Use an empty alt="" for purely decorative images, so screen readers skip them. Empty is different from missing: a missing alt attribute can lead screen readers to read out the file name.
• If the image contains text, include that text.
• If the image is a link, describe where it goes, such as the business name followed by “home” for a logo.

The W3C has a helpful alt text decision tree for the awkward cases.

Strip the metadata

Phone photos carry hidden metadata: the date, the device and often the GPS location, which for photos taken at home is a home address.

The Image Compressor removes metadata whenever it re-encodes an image. If you want to keep the image exactly as it is, the EXIF Remover removes EXIF, XMP and IPTC data without recompressing. It keeps the colour profile, so colours do not shift, and it can keep the orientation so portrait photos stay the right way up. It works with JPEG, PNG and WebP, but not HEIC. I explain more in how to remove location data from photos.

Favicons and app icons

Favicons are shown tiny, so simplicity beats detail. Start from a square image at least 512 × 512 pixels, or an SVG if you have one. The Favicon Generator makes the small set of files modern browsers need: favicon.ico for tabs and bookmarks, a 180 pixel Apple touch icon, 192 and 512 pixel icons for Android, a maskable icon for Android’s different icon shapes, and the web manifest.

Check the 16 pixel preview: if you cannot tell what it is, try a single letter or simplified mark. Browsers cache favicons stubbornly, so if an old one keeps appearing, add a version to the link, such as favicon.ico?v=2.

Placeholders and palettes during the build

When the real photos have not arrived, the Placeholder Image Generator makes images at exact dimensions, labelled with their size by default. That keeps the layout honest and tells the client what size to supply. Just replace them all before launch.

To pick accent colours that suit the client’s photography or logo, the Colour Palette Generator can extract five to eight dominant colours from an image and show roughly how much of the picture each covers. It finds the most common colours, not necessarily the most striking, so a small bright logo on a large background may not show up. Before using any of them for text, read accessible brand colours.

My routine for a batch of client photos

1. Put the originals in a folder that never goes on the server.
2. Work out each image slot’s display width and double it.
3. Run the photos through the Image Compressor as WebP, quality 80, with Fit within set to that width.
4. Check a couple of results at full size, looking at skies, faces and edges.
5. For responsive images, repeat at smaller widths and put the width in each file name.
6. Write the alt text as you place each image, not as a job for the end.
7. Load the finished page with the Network tab open and check the total image weight.