Sizing a Photograph Before You Fall in Love

Decide the pixel width, the crop and the file weight before you commission or upload the picture. A page stays quick on a phone when the widest image is no more than about 1,600 pixels across and no file is heavier than about 200 KB. Everything else is taste, and taste can wait until the numbers are settled.

Start with the widest slot, not the best picture

Measure the widest place the photograph will ever appear. On most small business sites that is a full width banner on a desktop screen, which is about 1,440 pixels of usable width once the browser chrome is taken out. Add a little for screens that render at 1.25 or 1.5 times, and 1,600 pixels across is the sensible ceiling. A picture uploaded at 4,000 pixels across is four times the width it will ever be shown at, and the browser throws that detail away on every visit.

A photographer working a fast outdoor subject knows this arithmetic well. The same discipline runs through sport photography in Normandy, where a handball court or a coastal finish line is shot to a crop that will hold at the size it is published, not at the size it came off the card.

What pixel width should a website photograph be?

Between 1,200 and 1,600 pixels on the long edge for a full width image, and between 600 and 800 pixels for anything that sits in a column beside text. A thumbnail in a gallery grid needs 400 pixels at most. These are the widths the browser actually uses on a phone, a laptop and a large monitor, and anything above them is paid for in download time and never seen.

Work backwards from the layout rather than forwards from the camera. If the image sits in a two column block on a 1,200 pixel page, the column is about 560 pixels wide, so a 600 pixel file is generous and a 3,000 pixel file is waste. The same photograph can be exported three times at three widths and served to the right screen, which is what the srcset attribute is for.

Crop for the slot, then check it at 320 pixels wide

Crop before you export, not in the page builder. A content management system that crops on the fly still downloads the whole file first, so the saving is cosmetic. Decide the aspect ratio the slot needs, 16:9 for a banner, 4:5 for a portrait card, 1:1 for a grid tile, and cut the picture to it in the editing software.

Then shrink the crop to 320 pixels wide and look at it again. That is roughly the width of a phone in portrait, and it is where a face becomes a smudge and a busy background becomes noise. If the subject does not read at 320 pixels, the crop is wrong, however good it looks at full size. This is the test that separates a picture that works on a page from a picture that only works in a portfolio.

How heavy should the file be?

Aim for 150 to 200 KB for a full width image and under 100 KB for anything smaller. A well made JPEG at quality 75 to 80 will hit those figures at the widths above, and the difference between quality 80 and quality 100 is invisible on a screen while the file is three or four times heavier. A page with six images at 200 KB each is 1.2 MB of pictures, which is about four seconds on a slow mobile connection and well under a second on a good one.

WebP and AVIF do better than JPEG at the same visual quality, often 25 to 35 per cent lighter. Serve them with a JPEG fallback if the audience includes older devices, and let the server decide which format to send. The saving is real but it is not a substitute for getting the width right first: a 4,000 pixel WebP is still heavier than a 1,600 pixel JPEG.

Strip the metadata you do not need

Exporting for the web should remove the camera data, the location tag and the editing history. Keep the copyright line and the creator name, because those are the fields that identify the picture if it travels. A file straight from the camera can carry several hundred kilobytes of metadata, and some of it, such as GPS coordinates, is information the business has no reason to publish.

Check the colour profile too. Convert to sRGB before export. A photograph left in Adobe RGB will look flat and slightly wrong in most browsers, and the fix costs nothing at the export stage and a re-export of every image later.

Name the file before it goes up

The file name is read by search engines and by screen readers, and it is read by whoever maintains the site in two years. A name such as handball-caen-2024-01.jpg tells all three what the picture is. A name such as IMG_4471.jpg tells them nothing, and a folder of them is a maintenance problem waiting to happen.

The alt text is a separate job and a short one: describe what is in the frame for someone who cannot see it, in a sentence, without repeating the caption. Decorative images take an empty alt attribute, which tells the screen reader to skip them.

Test on a phone before you sign it off

Open the page on a real phone on mobile data, not on the office wifi. Watch the images arrive. If the banner appears in pieces, or the layout jumps as each picture lands, the files are too heavy or the dimensions are not declared in the markup. Setting the width and height attributes on every image reserves the space and stops the jump, and it costs one line per picture.

Run the page through a speed test and look at the largest contentful paint figure. On a small business site, that number is usually the hero image, and it is the number that decides whether a visitor stays. Getting it under 2.5 seconds on a mid range phone is the target, and the width and weight decisions above are most of the work.

Settle the numbers, then choose the picture

A photograph chosen first and sized afterwards will always be too big, cropped badly or both. A photograph chosen for a slot that already has a width, a ratio and a weight limit will fit, load quickly and survive a redesign. Write the three numbers into the brief, hand them to the photographer or the person exporting the files, and the page keeps its speed without anyone having to think about it again.