Image optimization isn't one task — it's a short stack of decisions that compound. Miss one and you leave speed on the table; get them all and images stop being your site's bottleneck entirely. Here's the complete checklist, in the order that matters, with the reasoning behind each step.
Before upload
1. Pick the right format. Photos → WebP (or JPEG for maximum compatibility). Screenshots, logos, diagrams, transparency → PNG or lossless WebP. Never a photo as PNG.
2. Resize to display dimensions. Find the largest size the image will ever display (usually 1920 px for heroes, 1280 px for content images) and resize to it. File size scales with pixel count — this step alone is often an 80% saving.
3. Compress at quality 70–80. The sweet spot where photos remain visually identical but files shrink dramatically. Verify with a before/after comparison on your first few images until you trust the setting.
4. Name the file descriptively. walnut-standing-desk-corner.webp, hyphens between words. Takes five seconds; helps image search forever.
In your HTML
5. Set width and height attributes. The browser reserves the right space before the image loads, so the page never jumps (CLS = 0 for images).
6. Write real alt text. One specific sentence describing the image content — for accessibility first, search second.
7. Lazy-load below the fold. loading="lazy" on everything the visitor can't see immediately — and explicitly not on the hero/LCP image. For the hero, consider fetchpriority="high".
8. Serve responsive sizes with srcset. Provide 480 / 800 / 1280 / 1920 px variants and let the browser pick. Phones download a quarter of the bytes; nothing changes visually.
On your server
9. Enable long browser caching. Images rarely change — cache them for months (Cache-Control: max-age or Apache's mod_expires). Returning visitors then load your pages with zero image bytes.
10. Enable compression for everything else. Gzip/Brotli doesn't shrink already-compressed images, but it does shrink the HTML/CSS/JS around them — the page as a whole renders sooner.
11. Consider a CDN when your audience is global. Serving images from a location near the visitor cuts latency per request. For a local-audience site, decent hosting + caching covers most of the benefit.
Ongoing
12. Audit quarterly. Run your top pages through PageSpeed Insights. New content sneaks in unoptimized; a quarterly 15-minute audit catches the regressions before they accumulate.
What the payoff looks like
A typical small-business page carries 3–6 MB of images before optimization and 300–600 KB after — a 10× reduction. In practice that moves Largest Contentful Paint from 5–8 seconds on mobile to under 2.5, flips Core Web Vitals from failing to passing, and measurably reduces bounce. No redesign, no new hosting, no code rewrite — just the checklist above applied consistently.
Steps 1–4 are the highest-leverage items and need nothing but a compressor. Start there; add the HTML and server steps as you touch each template.
Compress your images now
Ready to put this into practice? Use the free WebPcompress compressor — it runs entirely in your browser, handles 20 images at a time, and your photos never leave your device.