Choose an image format by looking at the image, not at the file extension. A product photograph, a transparent icon and a UI screenshot have different needs. Make a few versions of one representative file, then compare them at the size people will actually see on the page.
Photographs
JPEG remains widely supported. WebP often gives a smaller file at a similar visible quality. AVIF is also worth testing, but the right choice depends on your actual image and the software your visitors use.
Start with the role of the photograph. Export versions at the same pixel dimensions and compare JPEG, WebP and AVIF where appropriate for your audience. Smooth skies, hair and fabric texture are useful places to spot artifacts. Check the actual transfer in the browser too: a cached response or a different srcset candidate can make a file-level comparison misleading.
Graphics and transparency
PNG works well for graphics with transparency, though files can be large. WebP and AVIF also support transparent areas. Compare edges, fine text and color before changing a production asset.
For an interface screenshot, diagram or icon, crisp text and edges may matter more than the smallest byte count. PNG is a useful source format, while a transparent WebP may be suitable for delivery. Inspect the converted image against both light and dark backgrounds; halos around a logo can disappear against one but stand out against the other. Reject a conversion if small labels become difficult to read.
A quick format guide
- PhotosStart with JPEG and WebP at identical pixel dimensions.
- GraphicsCompare PNG and WebP, especially text and transparent edges.
- Newer formatsCheck browser support and keep a compatible fallback.
JPEG XL
JPEG XL can produce good compression, but support differs across browsers and editing tools. Keep a compatible fallback when your audience needs one.
A new format is only useful when the software that consumes it can decode and manage it. Check the browsers and editing tools used by your audience and team before relying on JPEG XL or another newer option. Keep a compatible fallback or an editable master until that workflow has been tested. Do not replace the only source copy during an experiment.
Formats worth comparing
- JPEG
- A compatible photo format when its size and quality are suitable.
- PNG
- A useful source for diagrams, text and transparent graphics.
- WebP / AVIF
- Compare with the source on a real page, not by bytes alone.
- JPEG XL
- Use after checking support in your delivery and editing workflow.
Choose from real results
Create several versions of one representative image. Compare transferred bytes and how the image looks at the size where it appears on your site.
Pixel dimensions and delivery rules matter alongside format. A 3,000-pixel original shown in a 300-pixel card remains excessive even after efficient compression. Prepare suitable variants, inspect the browser request on a phone and a large display, and then compare formats for each served size. The winner is the version that stays clear in context while transferring fewer unnecessary bytes.
A practical example
Imagine a product card with a photograph and a small transparent mark in the header. Compare JPEG and WebP for the photo, paying attention to texture and smooth color transitions. For the mark, inspect its edges against light and dark backgrounds. A single “convert everything to WebP” rule misses those differences.
Before you publish
- Compare file sizes at the same pixel dimensions.
- Inspect the result on a phone and a large display.
- Check support in your visitors’ browsers and your editing workflow.
Explore more
Check the result on your own website and keep an original when you may need to restore it.