Image Optimization in 2026: AVIF vs WebP, Responsive Sizes and Lazy-Loading Mistakes

Images are usually the heaviest part of a web page and very often the Largest Contentful Paint element. Getting them right improves load time, LCP and layout stability at once. Here is the current playbook.

AVIF vs WebP vs JPEG

• AVIF: usually the smallest files for photos at the same visual quality, and supported by every current major browser. Encoding is slower, so generate it at build time or through an image CDN.
• WebP: noticeably smaller than JPEG, near-universal support and fast to encode. A safe default and a good fallback for AVIF.
• JPEG and PNG: keep as the last fallback. Use PNG only when you need lossless transparency or pixel-perfect graphics.
• SVG: use for logos, icons and simple illustrations. It stays sharp at any size and is often tiny.

The picture element lets the browser pick the best format it supports, so you do not have to choose just one.

<picture>
  <source type="image/avif" srcset="/hero-800.avif 800w, /hero-1600.avif 1600w" sizes="100vw">
  <source type="image/webp" srcset="/hero-800.webp 800w, /hero-1600.webp 1600w" sizes="100vw">
  <img src="/hero-1600.jpg" width="1600" height="900" alt="Dashboard showing page speed results" fetchpriority="high">
</picture>

Serve the right size with srcset and sizes

A phone with a 400-pixel-wide screen does not need a 2400-pixel image. srcset lists the widths you have available and sizes tells the browser how wide the image will be displayed. The browser then picks the smallest file that will look sharp on that screen.

<img
  src="/shoe-600.webp"
  srcset="/shoe-300.webp 300w, /shoe-600.webp 600w, /shoe-900.webp 900w"
  sizes="(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw"
  width="900" height="900"
  loading="lazy" decoding="async"
  alt="Blue running shoe, side view">

Lazy-loading mistakes

1. 01Lazy-loading the hero or main product image. This delays your LCP every time. Only lazy-load images that start below the fold.
2. 02Lazy-loading everything with a JavaScript library. Native loading=lazy is supported everywhere and does not wait for a script to download first.
3. 03Lazy-loading images without width and height. They take up no space until they load, then shove content down and hurt CLS.
4. 04Lazy-loading tiny icons and logos. The saving is negligible and the delay is visible.

Always set width and height

Width and height attributes let the browser calculate the aspect ratio and reserve space before the image arrives. They do not stop images being responsive: add width: 100% and height: auto in CSS and the image scales while keeping its reserved space.

Compression settings that work

• Resize first, then compress. Resizing a photo to the largest size it is ever displayed at saves far more than any quality setting.
• Start around quality 75 for WebP and somewhat lower for AVIF, then check by eye. Most photos look identical at much smaller sizes.
• Strip camera metadata such as location and camera settings. It adds weight and can leak private information.
• Use an image CDN or your framework's image component to generate formats and sizes automatically.

Quick checklist

• Hero image: eager, fetchpriority high, AVIF or WebP, correct size.
• Below-the-fold images: loading lazy, decoding async.
• Every image: width and height attributes and meaningful alt text.
• Icons and logos: SVG where possible.

LightLoader applies the priority and lazy-loading rules automatically and reserves image space to prevent layout shift. Formats and file sizes are still worth getting right at the source, and the checklist above covers it.