Website image optimisation is preparing pictures so they are sharp at the size visitors see, small enough to download, and described when they contain information. The work is format, pixel dimensions, compression, and alternative text.
Loading metrics such as how a large image affects the first view are discussed in Core Web Vitals. This page stays on the asset itself.
Formats
| Format | Typical use | Watch-outs |
|---|---|---|
| JPEG or WebP photo | Photographs, hero images | Over-compression turns text in the photo to mush |
| PNG | Logos and graphics that need a hard edge or transparency | Large if used for photos |
| WebP or AVIF | Modern delivery of photos and many graphics | Keep a fallback if you must support very old browsers |
| SVG | Logos, icons, simple illustrations | Do not use SVG for photographs |
Serve a size close to the displayed size. A 4000px photo squeezed into a 600px column wastes data and can still look soft if the browser does the only resize.
Dimensions and responsive images
Decide the largest display width for each slot: card thumbnail, content image, full-bleed hero. Export at that width and, when the layout changes, at the smaller width too. HTML srcset and sizes let the browser pick. The layout shifts that make those widths necessary are covered in responsive breakpoints.
Also set width and height (or aspect-ratio) so the page can reserve space before the file arrives. A gallery that jumps as each photo pops in is an image problem as much as a script problem.
Compression should be checked by eye on the text inside the image, such as a shopfront sign. Decorative backgrounds can be compressed harder than a product photo where colour accuracy matters.
Alternative text
Alt text is read by screen readers and shown if the image fails to load. It is not a keyword list.
- Informative image — state the fact the image conveys: “Warehouse aisle with pallet racking in Shah Alam.”
- Functional image — a logo that is a link home can use the destination name, such as the company name.
- Decorative image — empty alt (
alt="") so assistive tools skip it. - Text in an image — avoid it for headings. If a diagram contains words, repeat those words in HTML nearby.
Writing “image, photo, picture of” adds nothing. Stuffing product keywords into every alt attribute helps neither visitors nor clarity.
Accessibility context for non-text content sits in website accessibility.
Preparing one content image
- Crop to the slot’s aspect ratio
- Export at the display widths you actually use
- Compress and compare detail on a phone
- Add informative alt text or mark it decorative
- Reserve layout space so the page does not jump
A practical example
A project photo is uploaded at 5000px PNG because that was the camera file. On the site it appears 800px wide. The team exports a WebP at 1600px for sharp screens and a smaller width for cards, writes alt text that names the project type rather than “DSC_1044”, and leaves the background texture behind the hero as decorative. The page weight drops without a redesign.
Key takeaways
- Match format and pixel size to the slot on the page.
- Compress, then look at the result on a phone.
- Alt text describes meaning. Decorative images get an empty alt.
- Reserve space so images do not shove the layout down.
FAQ
Is WebP always smaller than JPEG?
Often, not always. Compare the same photo. A badly encoded WebP can lose more detail than a careful JPEG.
Should every image have a caption and alt text?
Alt text is for the image’s role in the page. A caption is visible text for everyone. Use a caption when the credit or explanation matters on screen. Do not duplicate a long caption into alt word for word if the caption is already next to the image; a shorter alt is enough.
Can we upload originals and resize later?
Only if the site really generates the sizes you need. If editors upload print files and the template shows them unchanged, fix the template or the habit. Do not rely on hope.