Image formats for web pages fall into two families: raster formats such as JPEG, PNG, WebP and AVIF, which store pixels, and vector formats such as SVG, which store shapes. The right choice depends on the image, not on a single favourite format.
Image weight is one of the practical levers in front-end web development, and picking a sensible format is usually the quickest win before any deeper optimisation work begins.
Raster or vector: the first decision
Before comparing file types, it helps to ask whether an image is needed at all. web.dev, the performance guidance site run by Google’s Chrome team, opens its format advice with that question and warns about one habit in particular: text-in-images delivers a poor user experience: the text is not selectable, not searchable, not zoomable, not accessible, and not friendly for high-DPI devices. Headlines, buttons and labels belong in HTML and CSS, with a web font where a custom typeface is needed.
When an image is the right tool, the next split is between raster and vector. A raster file records the colour of every pixel in a grid, so it suits photographs and anything with rich tonal detail. A vector file records lines and shapes, so it stays sharp at any zoom level. MDN Web Docs describes SVG as a vector image format; ideal for user interface elements, icons, diagrams, etc., that must be drawn accurately at different sizes. Logos, icons and simple illustrations are the natural candidates; photographs are not, because describing every tone as a shape produces an unwieldy file.
Everything below concerns raster images, since that is where the real choice between formats lies.
JPEG and PNG: the long-standing defaults
JPEG has been the default for photographs for a long time. The MDN image type guide calls it a good choice for lossy compression of still images (currently the most popular). Lossy compression discards some image data to shrink the file, which works well for photographic detail where small losses are hard to notice. Where transparency or exact reproduction is needed, PNG is the usual alternative.
PNG is the format to use when exact reproduction matters. The same guide says PNG is preferred over JPEG for more precise reproduction of source images, or when transparency is needed. Screenshots, interface mockups, flat graphics with sharp edges and logos that need a transparent background all fit that description. The two formats therefore serve different jobs and are rarely interchangeable: JPEG for photographic stills, PNG where fidelity or transparency counts.
GIF is still around, mostly for simple animation. MDN’s advice is blunt: Prefer PNG for lossless and indexed still images, and consider WebP, AVIF or APNG for animation sequences. In practice that means GIF is rarely the best choice for new work.
WebP and AVIF: the newer formats
WebP and AVIF were built to beat the older formats on compression. For WebP, MDN says it offers much better compression than PNG or JPEG with support for higher color depths, animated frames, transparency etc. A single format can therefore cover photographs, transparent graphics and short animations, which simplifies an asset pipeline.
AVIF goes a step further on compression, with a trade-off. In the same guide, MDN notes that AVIF offers slightly better compression, but is not quite as well-supported in browsers and does not support progressive rendering. Progressive rendering lets a JPEG appear first as a blurry full image and then sharpen as more data arrives; AVIF files do not behave that way, so a large AVIF appears only once enough data has loaded.
A third newcomer, JPEG XL, supports lossy and lossless compression, transparency and animation. MDN’s caution applies: Because browser support is not yet universal, provide a fallback using the <picture> element. Treat it as an optional extra rather than a baseline.
Image formats compared at a glance
The table below condenses the guidance above into a quick reference. It describes what each format is recommended for, not how it performs on any particular image.
| Format | Type | Typical use |
|---|---|---|
| JPEG | Raster, lossy | Still photographs |
| PNG | Raster | Precise reproduction of source images, transparency |
| GIF | Raster | Basic images and animation; PNG preferred for stills |
| WebP | Raster | Photographs, graphics, transparency and animation |
| AVIF | Raster | High compression, used with fallbacks |
| SVG | Vector | Icons, logos, diagrams, interface elements |
Format guidance in this table follows the MDN image file type and format guide.
Serving modern formats with a fallback
Because AVIF and JPEG XL are not supported everywhere, the safe pattern is to offer several versions and let the browser pick. The HTML picture element exists for this. MDN lists one of its main jobs as Offering alternative image formats , for cases where certain formats are not supported.
The structure is simple to describe. A picture element holds one or more source elements, each with a type attribute naming a format such as image/avif or image/webp, followed by an ordinary img element. The browser walks through the sources in order and uses the first one it understands; if none match, it falls back to the img element. That img element should carry the most widely supported version, typically a JPEG or PNG, plus the alt text, width and height. MDN’s AVIF entry makes the same point: Note that when using AVIF, you should include fallbacks to formats with better browser support (i.e., using the <picture> element).
Fallbacks cost a little extra storage and build time, but they remove the risk of a broken image in an older browser. Testing the result in more than one browser is part of a normal cross browser testing routine, particularly when a site adopts a newer format for the first time.
How format choice affects page speed
Image format is one input to the loading and stability measures grouped under core web vitals. A smaller file generally downloads sooner, which helps the largest visible element appear earlier. Format is not the only factor, though, and two further habits matter just as much.
First, never delay the main image on purpose. web.dev’s optimisation guide is direct: Never lazy-load your LCP image, as that will always lead to unnecessary resource load delay. Lazy loading suits images further down the page, not the large one at the top. The same guide adds that It’s a good idea to set fetchpriority=”high” on an <img> element if you think it’s likely to be your page’s LCP element.
Second, reserve space so the page does not jump while images load. web.dev advises you to include width and height size attributes on your images and video elements. Alternatively, reserve the required space with CSS aspect-ratio or similar. This applies regardless of format, and it is why the width and height attributes appear on every figure in a well-built article.
A practical way to choose
A short decision routine covers most cases. Start by asking whether the picture can be replaced with HTML, CSS or a web font; if it contains text, it probably can. If it is a logo, icon or diagram, use SVG. If it is a photograph, use WebP or AVIF with a JPEG fallback inside a picture element. If it is a graphic that needs transparency or exact edges, use WebP or AVIF with a PNG fallback. Keep GIF for the rare case where nothing else is available, and treat JPEG XL as optional.
That routine keeps the number of formats small, which keeps the workflow manageable. Most sites do not need every format; they need a clear rule for which format goes with which kind of image, applied consistently.
Frequently asked questions
Is WebP better than JPEG?
MDN says WebP offers much better compression than PNG or JPEG, with support for transparency and animated frames. That makes it a reasonable default for new work, with JPEG or PNG kept as a fallback where needed.
Should every image be converted to AVIF?
Not necessarily. AVIF compresses slightly better than WebP but is not quite as well supported and does not support progressive rendering, according to MDN. Use it with a fallback in a picture element rather than as the only version.
When is PNG still the right choice?
PNG suits images that need precise reproduction or transparency, such as screenshots and logos. MDN states that it is preferred over JPEG in those situations.
Why use SVG instead of a raster format for icons?
SVG is a vector format that can be drawn accurately at different sizes, so icons and diagrams stay sharp on any screen. Raster formats store a fixed grid of pixels and can look soft when scaled up.
Do width and height attributes still matter with modern formats?
Yes. They let the browser reserve space before the file arrives, which prevents layout shifts. This applies to JPEG, PNG, WebP, AVIF and SVG alike.
