The complete pre-publish checklist for web images

Most image problems on published pages were preventable in the five minutes before upload. This checklist runs the whole gauntlet — dimensions, format, compression, transparency, metadata, naming, alt text and delivery markup — in the order that catches expensive mistakes while they are still cheap.

An image passes through more hands than almost any other asset on a page — camera or designer, editor, CMS, template, CDN, browser — and it can pick up a defect at every hand-off: the wrong size, the wrong format, a stripped colour profile, a missing alt text, a filename with spaces that breaks a URL. Post-publish, each defect is a small incident; pre-publish, each is a checkbox. The difference between sites whose images are consistently right and sites that lurch from fix to fix is not talent. It is a list, run every time, in the right order.

This is that list, ordered as a pipeline: decisions that cannot be undone later come first (master, dimensions, format), then optimisation (compression, metadata), then publication craft (names, alt text, markup), then the verification pass that most teams skip and shouldn't.

Stage 1: the master and its dimensions

1. Confirm you are starting from the master — the camera file, layered design file or original export. If all you have is a previously compressed copy, flag it; every later stage is compromised quietly.
2. Set the crop and focal point deliberately. Decide what the image is of, and crop to it at the aspect ratio the layout uses, rather than letting CSS crop blindly from the centre.
3. Resize to the slot's needs: display width × 2 for retina headroom (× 1 and × 3 variants if srcset serves them), generated from the master in parallel — never a chain of resizes.
4. Convert colour to sRGB and embed the profile, so browsers render your colours rather than their guess at them.

Stage 2: format and compression

1. Pick the format by content: photo → WebP (AVIF if your pipeline produces it, JPEG for maximum compatibility); graphics with text or sharp edges → PNG or lossless WebP; cut-outs → a real alpha format; drawn artwork → SVG before any raster.
2. Compress at final size, stepping quality down while viewing at 100% in the layout, and stop one notch before the danger zones (gradients, faces, fine detail) complain.
3. Sanity-check the result size: a compressed file larger than its source means the source was already compressed or the format is wrong — investigate rather than ship.
4. Keep the master untouched and separate. Published derivatives are disposable; the moment a derivative becomes the only copy, quality is capped forever.

Stage 3: metadata, names and text alternatives

1. Strip EXIF deliberately: remove GPS/location and camera serials from public images (a real privacy and safety issue for photos of homes, schools and people), while keeping copyright and credit fields where your workflow uses them.
2. Name the file for the web: lowercase kebab-case, descriptive words (harbour-boats-dawn.jpg), no spaces, no dates-as-names, no IMG_4021-final-v2. Filenames are URLs, documentation and search signals in one.
3. Write the alt text now, while you can see the image's purpose: describe what a reader who cannot see it needs from it in context; leave alt empty (alt="") for purely decorative images; never start with 'image of'.
4. Check captions and credits: licence terms honoured, photographer credited where required, and no caption promising content the crop removed.

Stage 4: delivery markup and the verification pass

1. Wire up srcset and sizes for any image shown at more than one width; declare width and height attributes (or aspect-ratio) so the layout reserves space and CLS stays at zero.
2. Set loading honestly: the hero/LCP image loads eagerly and is never lazy; everything below the fold may be lazy. Add decoding="async" where the platform supports it.
3. Verify on the staged page: correct image (not the near-duplicate), correct crop at mobile and desktop, no visible artefacts at 100%, transparency clean on both light and dark backgrounds.
4. Throttled check: load the page on a simulated slow connection and watch the image's weight in the network panel — the number you predicted in stage 2, arriving in practice.
5. Screen-reader once-over: listen to the alt text in context. If the page makes sense with your eyes closed, the image is published; until then it is merely uploaded.

Mistakes and pitfalls

Running the checklist in the CMS after upload

Most stages — master, crop, sizing, format, metadata — are decided more cheaply and more safely before upload, on the original file. A checklist that starts in the CMS starts after the expensive mistakes have already been made.

Treating the checklist as senior-staff-optional

Image defects are not correlated with the publisher's seniority; they are correlated with hurry. The list is short precisely so that it survives hurry — two minutes, every image, no exceptions for people who 'know this stuff'.

Checking quality on the editing monitor only

Brightness, gamut and pixel density flatter images in the studio and betray them in the wild. The verification stage belongs on ordinary hardware, ideally including a mid-range phone — the device most of your audience actually holds.

Common questions

How long should this checklist take per image?

About two minutes once it is habit — most of it is confirming decisions stages 1–3 already made during editing. Hero and campaign images deserve the full ceremony; a routine article image still deserves every stage, faster.

One image is needed at five sizes. One pass or five?

One pass through the checklist, five derivatives out of stage 1 — all generated from the master, all sharing the format, name stem and alt text decided once. The checklist scales by decision, not by file.

What is the single most-skipped item with the worst consequences?

Metadata. Dimensions and formats fail visibly and get fixed; GPS coordinates embedded in a published photo fail silently and cannot be unpublished. Strip deliberately, every time, before anything leaves your machine.

To wrap up

Good images on the web are not an accident of good taste; they are the output of a small, ordered discipline — master first, dimensions before compression, format by content, metadata and names decided on purpose, and a verification pass on the real page. Print the list, tape it to the wall, and let it be boring. Boring, repeated, is what quality looks like from the inside.