Better formats
Modern formats compress far smaller than JPEG and PNG at similar quality.
- WebP: broad support, good lossy and lossless compression.
- AVIF: even smaller files, slightly less universal support.
The picture element offers multiple source formats and lets the browser pick the first one it supports, falling back to a plain img.
Responsive resolution
The srcset attribute lists candidate images so the browser downloads only what the screen needs.
- A width descriptor like 800w tells the browser each file pixel width.
- The sizes attribute describes how wide the image will render at each breakpoint.
- The browser combines sizes with device pixel ratio to choose the smallest sufficient file.
This avoids shipping a huge image to a small phone or a blurry image to a retina laptop.
Key idea
Serve WebP or AVIF through a picture element and use srcset with sizes so each device downloads the smallest image that still looks sharp.