Choosing File Formats for Web Performance: Images, Video and Audio
Practical guidance for picking image, video and audio formats that keep web pages fast, from WebP and AVIF to MP4 and WebM.
Why file size matters
Smaller files download faster, which improves the experience on slow mobile connections and supports good Core Web Vitals scores such as Largest Contentful Paint, which is often an image.
| Content | Recommended | Fallback |
|---|---|---|
| Photographs | AVIF or WebP | JPG |
| Logos and icons | SVG | PNG |
| Screenshots | PNG or lossless WebP | PNG |
| Short animations | MP4 or WebM loop | GIF |
| Music and podcasts | AAC or Opus in suitable containers | MP3 |
Images
Resize each image to the largest size at which it is shown, compress it to a sensible quality and choose a modern format. Avoid HEIC on the web, because most browsers other than Safari cannot display it.
Video
Use MP4 with H.264 for maximum compatibility, or add WebM with VP9 or AV1 where bandwidth matters. Replace large animated GIFs with short looping videos, which are often many times smaller.
Audio
MP3 plays everywhere. AAC offers better quality at the same bitrate, and Opus is excellent for speech and low bitrate music in modern browsers.
Convert, then test
After converting, compare the files visually and check their sizes. Aim for the smallest file that still looks and sounds right.
Frequently asked questions
Should I replace all my JPGs with WebP?
Not necessarily. Use WebP or AVIF where your audience's browsers support it and keep JPG as a fallback.
Is SVG always better for logos?
SVG scales without loss and is usually tiny, so it is the best choice for simple logos and icons.
Related
Last updated 9 October 2026. Written by ARTH, a design and build studio in Coimbatore.