JPEG vs PNG vs WebP vs AVIF vs SVG: The Best Image Format for Web (and When to Use Each)

There is no single best image format for web pages, because the right choice depends on what the picture shows. Use a photograph format (JPEG, WebP or AVIF) for photos, a vector format (SVG) for logos and icons, and a lossless raster format (PNG, or lossless WebP) when you need exact pixels, such as a sharp screenshot or an image with transparency. Modern formats like WebP and AVIF are often smaller than JPEG or PNG at similar visual quality, but the saving varies by image, so always compare your own files.

This guide is for site owners, designers and developers who want faster pages without damaging how images look. Images are often the largest files on a page, so format choice can affect load time and metrics such as Largest Contentful Paint (LCP), which measures when the biggest visible element finishes rendering.

Before you begin

You will need:

A list of the images on your key pages. The network panel in browser developer tools shows each image, its type and its size.
The original, highest-quality source file for each image. Convert from the original, not from an already compressed copy, because repeated lossy compression adds visible damage.
Access to where images are stored or served: your CMS, build process, server or CDN (content delivery network, a service that serves files from locations near visitors).

The main risk is quality loss or broken images. Keep the originals and test one page first.

How each format works

Two terms help here. Lossy compression makes a file smaller by discarding detail the eye is less likely to notice. Lossless compression makes a file smaller without discarding any pixel data, so the decoded image matches the source exactly. A raster image is a grid of pixels. A vector image is a set of shapes and paths that the browser draws at any size.

Format	Type	Compression	Transparency	Animation
JPEG (.jpg, .jpeg)	Raster	Lossy	No	No
PNG (.png)	Raster	Lossless	Yes (alpha channel)	APNG variant, check support
GIF (.gif)	Raster	Lossless, 256 colours per frame	One transparent colour	Yes
WebP (.webp)	Raster	Lossy and lossless	Yes	Yes
AVIF (.avif)	Raster	Lossy and lossless	Yes	Yes
SVG (.svg)	Vector	Text (XML), can be compressed in transit	Yes	Via CSS or script, depending on how it is embedded

JPEG

JPEG is the long-standing format for photographs. It is lossy, so a quality setting trades file size against visible artefacts (blockiness and smudging around edges). It has no transparency. It is a safe fallback for photos.

PNG

PNG is lossless and supports full transparency with an alpha channel, which stores how see-through each pixel is. It suits flat colours, sharp edges and text, such as screenshots and diagrams, but not photographs.

WebP

WebP was developed by Google. It offers lossy and lossless modes, transparency and animation in one format. At similar visual quality, WebP files are often smaller than JPEG or PNG, though the amount varies by image.

AVIF

AVIF is based on the AV1 video codec. It supports lossy and lossless compression, transparency, animation and wide colour ranges. It can often produce smaller files than JPEG or WebP for photos at similar visual quality. Encoding is typically slower than for JPEG or WebP.

SVG

SVG is an XML-based vector format. Because it describes shapes rather than pixels, it stays sharp at any size and screen density, and simple graphics are often tiny. It is not suitable for photographs. SVG files can contain scripts and external references, so sanitise SVGs uploaded by users. When an SVG is loaded through an img element, scripts inside it do not run, but inline SVG placed directly in a page is part of that page.

The best image format for web by image type

Use this table as a starting point, then test your own files.

Image type	First choice	Fallback or alternative	Notes
Photograph	AVIF or WebP (lossy)	JPEG	Offer JPEG as the universal fallback.
Logo (simple shapes)	SVG	PNG or WebP	Provide a raster copy for places that do not accept SVG, such as some email clients and social previews.
Icon	SVG	PNG	Many icons can share one SVG sprite or be inlined.
Screenshot with text	PNG or lossless WebP	High-quality lossy WebP	Lossy compression can blur small text. Compare closely.
Illustration with flat colours	SVG if vector, otherwise PNG or lossless WebP	WebP or AVIF	Gradients and textures may do better in lossy modes.
Photo with transparency	WebP or AVIF with alpha	PNG	PNG with a photo is usually very large.
Short animation	Video (MP4 or WebM) or animated WebP/AVIF	GIF	Check the player and accessibility needs for video.

Browser support: check before you rely on it

JPEG, PNG, GIF and SVG are supported by all current mainstream browsers. WebP and AVIF are supported by current versions of the major browsers, but support dates differ, and older browsers, older operating systems and some embedded browsers may lack one or both. Check current browser support at caniuse.com and compare it with the browsers in your own analytics before you drop a fallback.

The safest approach is to offer the newest format to browsers that can use it and keep a JPEG or PNG for everyone else.

Serve modern formats with the picture element

The picture element lets the browser choose among several sources. It reads the source elements in order, picks the first one whose type it supports, and otherwise uses the img element. The img element is required because it carries the fallback, the alt text and the size attributes.

<picture>
  <source srcset="/images/hero.avif" type="image/avif">
  <source srcset="/images/hero.webp" type="image/webp">
  <img src="/images/hero.jpg"
       width="1200" height="630"
       alt="A team reviewing a website launch checklist">
</picture>

Put the format you most want to serve first. The width and height attributes reserve space before the file loads, which helps prevent layout shift. For size-specific files, combine picture with srcset and sizes; see Responsive Images with srcset and sizes: Serve the Right Size.

Content negotiation with the Accept header

Some CDNs and image services serve a different format from the same URL. This is called content negotiation. A browser sends an Accept request header that lists the image types it can handle, and the server or CDN may reply with AVIF, WebP or JPEG accordingly. The visitor's HTML only needs a single img tag.

If you use negotiation, the response should carry a correct Content-Type and a Vary: Accept header, so shared caches do not hand an AVIF file to a browser that cannot read it. Check your provider's documentation.

File names and MIME types must match the content

A MIME type (also called a media type) is the label a server sends in the Content-Type header so the browser knows what a file is. Correct values are:

Format	MIME type
JPEG	`image/jpeg`
PNG	`image/png`
GIF	`image/gif`
WebP	`image/webp`
AVIF	`image/avif`
SVG	`image/svg+xml`

Three habits prevent trouble.

Make the extension match the bytes. Renaming photo.png to photo.jpg does not convert it. A file with the wrong extension may still display, but it confuses tools, caches and people.
Check the Content-Type header. Some servers send a generic type for .avif or .webp. Test with curl -sI.
Use descriptive file names. blue-running-shoes-side-view.webp tells people and search engines more than IMG_4821.webp. See Image SEO: Alt Text, File Names and Formats That Help Search.

Converting images with common tools

You can convert images in several ways, and each suits a different workflow.

Browser-based converters. A web tool such as Squoosh from Google Chrome Labs lets you compare formats and quality side by side. See the privacy notes in Image Compression Tools Compared: Squoosh, ImageMagick, Plugins and CDNs.
Editors, command-line encoders and libraries. Image editors export common formats. cwebp (from the WebP project), avifenc (from libavif) and ImageMagick convert single files or batches, for example cwebp -q 80 input.png -o output.webp. Libraries such as sharp for Node can create every size and format during a build.
CMS plugins and CDNs. Many plugins convert uploads, and many image CDNs convert on request.

Compare the result at the size it will be displayed. Quality scales differ between encoders, so start around a medium-high setting and adjust by eye.

Why PNG photos are a frequent cause of heavy pages

PNG stores every pixel exactly. A photograph contains millions of subtly different colours and noise, which lossless compression cannot shrink much. A PNG photo is often much larger than a JPEG or WebP of the same picture at similar visual quality, though the ratio depends on the image.

A single hero image saved as a multi-megabyte PNG can delay LCP, whose "good" threshold is 2.5 seconds or less at the 75th percentile. See Fix Largest Contentful Paint (LCP) on Mobile.

Step-by-step instructions

Step 1: List and classify your images

Open a key page, open developer tools, go to the Network panel, filter by "Img" and reload. Note each image's type, transferred size and displayed size, then label each as photo, logo, icon, screenshot, illustration or animation using the decision table.

What success looks like: the largest images each have a label and a target format.

Step 2: Resize, then convert from the original

A file 4000 pixels wide shown at 800 pixels wastes bytes in any format, so resize to the largest size the layout uses. Then export from the original to AVIF, WebP or JPEG at a medium-high quality and compare at display size. If text or edges look damaged, raise the quality or use a lossless mode. If a converted file is not smaller, keep the old format.

What success looks like: each converted file looks acceptable and is clearly smaller.

Step 3: Serve with picture or negotiation

Use the picture pattern above, or turn on format negotiation in your CDN and confirm it sends Vary: Accept. Keep a JPEG or PNG fallback.

What success looks like: a modern browser loads AVIF or WebP, and an older client still shows an image.

Step 4: Set size and loading attributes

Add width and height to each img. Use loading="lazy" below the first screen, but not on the main image visible on first load, since that can delay LCP. See Lazy Loading Images for SEO: Defer Images Without Hiding Them.

What success looks like: the layout does not jump and the first image starts loading right away.

Step 5: Verify headers, names and results

Run curl -sI on a converted file and confirm a 200 status, the correct Content-Type and a descriptive file name. Reload the page, compare total image weight and run a Lighthouse test. See Improve Lighthouse Performance Without Breaking Your Website.

What success looks like: total image bytes are lower and the largest image loads sooner.

Final verification checklist

Photos use JPEG, WebP or AVIF, not PNG, unless transparency or exact pixels are required.
Logos and icons are SVG where they are simple shapes, with a raster copy where needed.
Modern formats are offered through picture or negotiation, with a JPEG or PNG fallback.
Content-Type headers match the real format, and extensions match the bytes.
The main first-screen image is not lazy-loaded, and images are no larger than needed.
Uploaded SVGs are sanitised and originals were used for conversion.

Common mistakes to avoid

Saving photos as PNG. The file is usually far larger than needed.
Ignoring caching rules on negotiated images. Without Vary: Accept, a cache can return the wrong format.

Frequently asked questions

What is the best image format for a website?

There is no single best choice. Photos usually work well as AVIF, WebP or JPEG, logos and icons as SVG, and screenshots with text as PNG or lossless WebP. Test your own images at display size, because savings vary.

Is WebP better than JPEG?

WebP files are often smaller than JPEG at similar visual quality, and WebP also supports transparency and animation. JPEG is still the most widely compatible photo format, so many sites serve WebP with a JPEG fallback.

Is AVIF better than WebP?

AVIF can often compress photos further than WebP, but it typically takes longer to encode and may not suit every workflow. Check browser support at caniuse.com and compare real files before you choose.

Should I replace all PNG files with WebP?

Not automatically. Convert PNG photos, since they are often much larger than needed. Keep PNG or use lossless WebP for screenshots and graphics where exact pixels matter, and compare the file sizes.

Does image format affect SEO?

Format does not act as a ranking factor on its own. It can affect page speed, which is part of the page experience, and it affects whether Google Images can understand and index your image. Use supported formats, descriptive file names and alt text.

Using Crawvix to find images that need a better format

Crawvix's Image Doctor lists the images written into the HTML of the pages in a full scan of a verified website (up to 2,000), then checks up to 200 of them for status, type and file size. It reports missing or generic alt text, broken images, large files, missing width and height, a lazily loaded first image, older formats and generic file names, each with evidence and what to do, plus a CSV export. It only reads a website and never changes it, so you still choose and convert the images yourself.

Official references

Next step: Run Image Doctor on your verified website to find large, older-format and broken images, or see how Crawvix checks a website. This guide provides technical information, not a guarantee of rankings, traffic or index inclusion.