EMZETT.
Login

Emzett Wiki

Optimising images on the web: formats, responsive and lazy loading

Properties1
tagsglossar, web, performance

2 min read

Optimising images on the web: formats, responsive and lazy loading

In short: Images are usually the biggest part of a web page; modern formats (WebP, AVIF), fitting sizes (srcset), lazy loading and fixed dimensions speed up loading and prevent layout shifts.

In more detail: A 4 MB photo in a 300-pixel card is wasteful. Image optimisation improves LCP (largest visible element), saves data volume and is good for SEO and the environment.

In Depth

The right format

  • JPEG: photos, supported everywhere.
  • PNG: graphics with transparency, sharp edges (large for photos).
  • WebP: about 25 to 35 % smaller, transparency, animation.
  • AVIF: often even smaller (HDR), slower to produce.
  • SVG: logos, icons, diagrams (vector, scalable, stylable via CSS; avoid scripts from unknown SVGs).
  • GIF: for animations better MP4/WebM or animated WebP. Quality 70 to 85 is usually enough; remove metadata (EXIF/GPS) (privacy).

Responsive images

<img src="photo-800.jpg"
     srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1600.jpg 1600w"
     sizes="(max-width: 600px) 100vw, 50vw"
     width="800" height="533" alt="Description" loading="lazy" decoding="async">
 
<picture>
  <source type="image/avif" srcset="photo.avif">
  <source type="image/webp" srcset="photo.webp">
  <img src="photo.jpg" alt="Description" width="800" height="533">
</picture>

srcset/sizes let the browser choose to match screen width and pixel density; <picture> delivers formats and art direction (different crop on phones).

Lazy loading and layout

  • loading="lazy" loads images only when scrolled near; the most important image at the top (LCP) not lazy, but fetchpriority="high"/preload.
  • Specify width and height (or aspect-ratio) so there is no layout shift (CLS).
  • alt texts for accessibility; decorative images alt="".
  • Placeholders (blur hash/dominant colour) for an impression of speed.
  • Background images in CSS: image-set(); iframes/videos also lazy.

Tools and delivery

  • Next.js next/image, Astro, Nuxt Image: generate sizes/formats automatically, with cache.
  • Sharp, Squoosh, cwebp, avifenc, ImageMagick in build/script.
  • Image CDNs (Cloudinary, imgix, Vercel Image Optimization): size/format via URL.
  • Caching: long Cache-Control with hash in the file name; use a CDN.
  • Checking: Lighthouse, WebPageTest, DevTools network (size vs. display size).
  • Rights: observe image rights/licence, photos of people only with permission. Wiki/page images: compress before uploading.

See also: WebP, Lighthouse and Core Web Vitals, CDN

Backlinks