Choosing image formats for the web
Which format for which image
Images are often the heaviest part of a page, so format choice affects speed. A short guide:
- JPEG: photographs, with lossy compression.
- PNG: lossless images and transparency, such as screenshots.
- WebP and AVIF: modern formats that usually give smaller files at similar quality. Both are supported by current major browsers.
- SVG: icons, logos and simple illustrations. It is vector-based, so it stays sharp at any size.
When in doubt, start with the simplest option: SVG for flat graphics, a modern photo format for photographs, and PNG only when its qualities are needed.
Responsive images
A phone does not need a 2400 px image. The <code>srcset</code> and <code>sizes</code> attributes let the browser pick a suitable file:
Example markup: <code><img src="photo-800.jpg" srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1600.jpg 1600w" sizes="(min-width: 800px) 800px, 100vw" alt="Description"></code>
The <code>picture</code> element can offer AVIF or WebP first, with JPEG as a fallback.
Provide a fallback. Browsers that do not understand a newer format use the next source in the list, so the image always appears. Keep the original JPEG or PNG as the last option.
Prevent layout shift and load wisely
- Set <code>width</code> and <code>height</code> attributes so the browser reserves space and the page does not jump while images load.
- Add <code>loading="lazy"</code> to images below the fold, so they load only when needed.
- Do not lazy-load the main image visible at the top of the page, since that delays what people see first.
- Always write meaningful <code>alt</code> text for informative images.
Large images slow down loading, especially on mobile connections. Core Web Vitals, described on web.dev, include Largest Contentful Paint (LCP), which is often an image, and Cumulative Layout Shift (CLS), which images without dimensions can worsen. Smaller, well-prepared files improve both.
- Do not upload a camera original. Resize it first.
- Compare the compressed result with the original at the displayed size.
- Keep PNG for images that need transparency or sharp edges, and avoid it for large photographs.
Prepare before upload
- Resize the image to the largest size it will be shown at.
- Choose the format: SVG for graphics, JPEG, WebP or AVIF for photos.
- Compress it and compare the result visually.
- Export two or three widths for srcset.
- Add dimensions, alt text and the lazy attribute where suitable.
Build these steps into the design handoff. A short note saying which format and which widths each image needs saves a round of corrections later, and keeps heavy originals out of production.
Check the final page with throttled network settings in browser developer tools.
Sources
- MDN Web Docs. Responsive images. https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/HTML_images
- web.dev. Browser-level image lazy-loading for the web. https://web.dev/articles/browser-level-image-lazy-loading
This guide was drafted with AI assistance from public standards and references. For the exact wording of a standard, use the sources listed above.