Images: sizes, captions, compression

Keep pages lively and fast: right-sized assets, compression that preserves meaning, solid alt text, consistent ratios, and tidy cropping.

Images bring a page to life — and can just as easily slow it down. The goal: keep meaning and quality without extra weight. Follow these rules to stay both beautiful and fast.

1) Right size (no bigger than needed)

Prepare images for the block they live in. Don’t ship “8K wallpapers” if the image covers half the screen.

Width guidelines:

hero/cover: 1600–2000 px
inline image: 1000–1400 px
previews/cards: 400–800 px

How to tell: zoom to 125–150%. Still sharp? Size is fine. If it blurs, increase width (within reason).

2) Compression without losing meaning

Compress before upload. Same perceived quality, less weight.

Weight guidelines:

cover: ≤ ~300–400 KB
inline: 120–250 KB
preview: 40–100 KB

How to tell: a page with 5–8 images loads quickly on mobile — good. Visible artifacts? Nudge quality up.

3) Formats for the job

Photos: JPG or WebP.
Logos/icons: SVG (ideal) or PNG when transparency is needed.
Screenshots/diagrams: often PNG/WebP to keep text crisp.

How to tell: need transparency — not JPG. Logo looks fuzzy when scaled — use SVG.

4) Captions & alt text: keep the meaning

A caption explains what the image shows and why it’s here.
Alt text is for those who can’t see the image (screen readers / slow networks).

Alt cheat sheet: “What is it?” + “Why is it here?” — short, no “image of…”.
Example: “Booking flow: request → confirmation → payment.”

How to tell: hide the image (DevTools/paper). Does the caption+alt preserve meaning? Perfect.

5) Consistent ratios & careful cropping

Pick 1–2 aspect ratios for cards (e.g., 4:3 or 1:1) and stick to them to keep the grid steady.

Cropping: keep the important subject in the safe area (center). For portraits, slightly above center.

How to tell: scroll fast. Rows keep equal heights? No jumping? Ratios are consistent.

6) Names & folders save hours

Use clear filenames: services-pricing-2025-hero.jpg, not IMG_8392.jpg.
Organize by section: /images/blog/2025/....

How to tell: can you find the right asset in 30 seconds a month from now? If yes, structure works.

7) Small speed bonuses

Enable lazy loading (below-the-fold loads later) and responsive sizes (smaller variants on phones) when your platform supports it.

How to tell: on mobile data, the top of the page appears before the bottom — that’s lazy loading at work.

10-minute mini-checklist

Images are no wider than their slots.
Weight: covers ≤ 400 KB, inline ≤ 250 KB, previews ≤ 100 KB.
Formats: photos — JPG/WebP; logos — SVG/PNG; screenshots — PNG/WebP.
Important images have a caption and/or alt text.
Cards keep one aspect ratio (e.g., 4:3).
Filenames are clear; folders reflect sections.
On mobile, pages load fast and look tidy.

Follow these and your images will serve meaning and speed — even on weak connections.