Images are the single largest contributor to page weight on most websites. Getting them right means choosing a modern format, sizing correctly, compressing without visible damage, and serving the right variant to the right device. None of it is complicated — it’s just easy to skip a step.

01Choose the right format first

For photographs, AVIF then WebP; for flat graphics and logos, SVG; PNG only for lossless raster transparency; GIF is effectively obsolete. JPEG isn’t dead, but it shouldn’t be your first choice for anything new — and strip its metadata before publishing.

02Size to what’s actually displayed

Serving a 3000×2000 image into a 600-pixel card is one of the most wasteful mistakes on the web. Decide the maximum display dimension (2× for high-DPI) and export at that size, during your export step rather than via CSS:

magick input.jpg -resize 1200x630 -strip output.webp

03Compress sensibly

For WebP and AVIF, quality in the 70–85 range yields excellent results at a fraction of the size — but test with your own content. Squoosh makes side-by-side comparison fast; run a lossless optimiser on PNG, and SVGO on SVG. One rule holds everywhere: compress last, after all edits.

04Serve responsive sizes

Offer the browser a menu of widths with srcset, and formats with <picture> — AVIF first, WebP second, JPEG last:

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="…" loading="lazy" width="1200" height="630">
</picture>

05Lazy-load below the fold

loading="lazy" defers off-screen images until the user scrolls near them — a one-attribute win. Always set explicit width and height so the browser reserves space and the page doesn’t reflow.