Web Image Formats: JPEG, PNG, WebP, AVIF, SVG. Complete Guide

Why your choice of image format matters

Images account for 50–70% of the total weight of an average web page. Picking the wrong format can unnecessarily bloat your site, degrade user experience, and hurt your search rankings.

Since 2021, Google has incorporated Core Web Vitals into its ranking algorithm. Among these metrics, Largest Contentful Paint (LCP) measures how long it takes to render the largest visible element on the page, very often an image. Using an unsuitable format can push your LCP from 1.5 seconds to over 4 seconds, which is disqualifying.

But performance is not the only consideration. Depending on your use case, you may need:

• Transparency for a logo placed on a colored or photographic background.
• A high-quality photograph free of visible compression artifacts.
• A scalable graphic that stays sharp at any screen resolution.
• Maximum browser compatibility for audiences on older devices.

This guide covers the six essential web image formats, JPEG, PNG, WebP, AVIF, GIF, and SVG, so you can make the right call every time.

JPEG: the veteran of photography

The JPEG format (Joint Photographic Experts Group) was standardised in 1992. Despite its age, it remains one of the most widely used formats on the web, especially for photographs.

How JPEG compression works

JPEG uses lossy compression. The algorithm analyses the image, identifies regions of similar colour, and discards details that are imperceptible to the human eye. The degree of loss is controlled by a quality setting (typically 0–100).

At quality 80, a JPEG photograph is often visually indistinguishable from the original yet weighs 5–10 times less. Below quality 50, blocking artifacts become visible, particularly around sharp edges.

Ideal use cases for JPEG

• Photographs: portraits, landscapes, product photos
• Images with complex gradients: sunsets, cloudy skies
• Images where transparency is not needed
• Maximum compatibility: supported by 100% of browsers, systems, and devices

JPEG limitations

• No transparency: the background is always opaque
• No animation
• Generational loss: each re-save amplifies artifacts
• Poor for text and graphics: sharp edges become blurry

PNG: lossless compression and transparency

The PNG format (Portable Network Graphics) was created in 1996 as a patent-free alternative to GIF. It offers lossless compression and full transparency support, making it the preferred choice for web graphics.

PNG-8 vs PNG-24 vs PNG-32

• PNG-8: palette of up to 256 colours, very small files, ideal for simple icons
• PNG-24: 16 million colours, no alpha channel
• PNG-32: 16 million colours with full alpha transparency

Alpha transparency: PNG's killer feature

Alpha transparency allows each pixel to have an opacity level between 0 (fully transparent) and 255 (fully opaque). This makes PNG indispensable for:

• Logos on coloured or photographic backgrounds
• Icons with rounded corners or drop shadows
• Overlaid graphical elements
• Screenshots with transparent areas

WebP: Google's modern format

Developed by Google and released in 2010, WebP was designed to replace both JPEG and PNG on the web. It delivers superior compression in both lossy and lossless modes while also supporting transparency and animation.

WebP advantages over JPEG and PNG

• 25–35% smaller than JPEG at equivalent visual quality
• 26% smaller than PNG in lossless mode
• Alpha transparency with negligible overhead
• Animation support, far more efficient than GIF
• Both lossy and lossless compression in a single format

Browser support in 2026

WebP is now supported by over 97% of modern browsers, including Chrome, Firefox, Safari (since iOS 14 / macOS Big Sur), Edge, and Opera. In 2026, a JPEG fallback is no longer necessary for most audiences.

AVIF: the next-generation format

AVIF (AV1 Image File Format) is the newest web image format. Based on the AV1 video codec developed by the Alliance for Open Media, it pushes compression efficiency even further than WebP.

Compression performance

• 45–55% smaller than JPEG at equivalent visual quality
• 20–30% smaller than WebP in most cases
• Native support for HDR and wide colour gamut (Display P3, Rec. 2020)
• Excellent rendering of gradients and fine detail without JPEG blocking artifacts

Browser support in 2026

AVIF is supported by Chrome (v85+), Firefox (v93+), Safari (v16.4+), Edge (v121+), and Samsung Internet, covering approximately 93% of active browsers. A WebP or JPEG fallback remains advisable for the remaining 5–7%.

GIF: animation legacy

The GIF format (Graphics Interchange Format) dates from 1987. Its palette is limited to 256 colours per frame and it has no inter-frame compression, meaning every frame is stored almost independently. A 3-second animation at 24 fps stores 72 complete frames.

Despite being technically obsolete, GIF persists because it is the only universally supported animated format in email clients (Outlook in particular does not play HTML5 video). On the web, animated GIFs should be replaced with animated WebP or an HTML <video> element using MP4/WebM, typically 5–10 times smaller for the same visual content.

SVG: vector graphics for the web

SVG (Scalable Vector Graphics) is fundamentally different from the other formats. While JPEG, PNG, WebP, and AVIF are raster formats (grids of pixels), SVG describes geometric shapes in XML. The result: an SVG image is perfectly sharp at any size, from a 16×16 favicon to a 4K display.

SVG advantages

• Infinite scalability: perfectly sharp at any resolution with no file size increase
• Extremely lightweight for simple graphics (logos, icons): often just a few hundred bytes
• Styleable with CSS: change icon colours without touching the file
• Animatable with CSS or SMIL
• Accessible: text inside SVG is readable by search engines and screen readers

SVG limitations

• Unsuitable for photographs: complex raster images produce enormous SVG files
• XSS security risk if SVG is from an untrusted source (can contain script tags), never inline user-uploaded SVG without sanitising it first

Full comparison table

This table summarises the key characteristics of each format to help you decide quickly.

Which format should I use? A decision tree

Is your image vectorial (logo, icon, diagram)?

→ Use SVG. No debate.

Is your image a photograph or a complex image with many colours?

• If maximum performance is the goal: AVIF (with WebP fallback via <picture>)
• If you want simplicity and broad compatibility: WebP
• If you need universal compatibility: JPEG

Does your image require transparency?

• Prefer WebP or AVIF for better performance
• Use PNG if maximum compatibility is required
• Never use JPEG, it does not support transparency

Is your image a screenshot or does it contain text?

→ Use PNG or lossless WebP. Lossy compression blurs sharp edges, making text difficult to read.

Receiving HEIC photos from an iPhone?

→ Convert to JPEG or WebP before publishing to the web. No browser natively displays HEIC.

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Image description" width="800" height="600">
</picture>

Tools for converting between formats

Online tools

• imgpact: fast conversion and image optimisation directly in the browser, no installation required. Supports JPEG, PNG, WebP, AVIF, and SVG.
• Squoosh (Google): open-source online tool for visually comparing formats and compression settings side by side.
• Cloudinary: cloud solution for automated image management and on-the-fly format conversion in production.

Command-line tools

• ImageMagick: the open-source reference for batch image conversion and manipulation.
• cwebp / dwebp: Google's official tools for encoding and decoding WebP files.
• avifenc / avifdec: command-line AVIF encoder and decoder.
• Sharp (Node.js): high-performance library for image transformation in production pipelines.

CMS integrations

• WordPress: plugins such as Imagify, ShortPixel, or WebP Express for automatic conversion
• Shopify: automatic WebP conversion for all store images
• Next.js / Nuxt: built-in Image component with automatic optimisation and format conversion