Image Formats Explained: JPEG, PNG, WebP, AVIF, SVG, GIF, JPEG XL & HEIC

The best image format is not one format. It depends on the job. Use AVIF or WebP for photos, SVG for logos and icons, PNG for screenshots and pixel-perfect graphics, animated WebP for short loops, and JPEG as the fallback that still works everywhere.

TL;DR: For a normal website in 2026, serve AVIF first, WebP second, and JPEG or PNG as fallback. Use SVG for logos, icons, charts, and simple illustrations. Keep PNG for screenshots, transparent graphics, and images with sharp text. Avoid GIF unless you need legacy animation support. Do not serve HEIC directly on the open web. Treat JPEG XL as promising, but not ready as your only production format because browser support is still partial.

Which Image Format Should You Use?

Short answer: use the format that matches the image, not the newest format you have heard about.

The honest answer for most site owners is even simpler: use an image CDN and stop hand-picking formats for every browser. The CDN reads the Accept header, serves AVIF or WebP when supported, and falls back when needed. I covered that workflow in can image CDNs convert image formats?.

If you are doing manual optimization, start with the highest-impact images first: homepage hero image, product gallery images, above-the-fold article images, and any image that becomes the Largest Contentful Paint element. The LCP image CDN guide explains why that matters.

Image Formats Comparison Table

As of May 2026, this is the practical web picture.

Quick Note: Browser support percentages are global Can I Use numbers using April 2026 StatCounter usage data. Your own analytics matter more. If 30% of your audience uses Safari, your format decision can look different from a Chrome-heavy developer audience.

For a deeper comparison of the three formats you will use most often for photos, read WebP vs AVIF vs JPEG.

What Does Each Image Format Do Best?

JPEG

JPEG is still the safety net. It works everywhere, decodes quickly, and remains a good fallback for photos.

The tradeoff is permanent quality loss. JPEG compression is good for natural photography, but it creates visible artifacts around text, logos, thin lines, and UI screenshots. It also does not support transparency.

Use JPEG when you need maximum compatibility or when the source is already JPEG and you do not have an automatic format pipeline. For above-the-fold photos, consider progressive JPEG because it gives users a preview before the full image finishes downloading.

Best for:

• Photos where compatibility matters
• Email and older software workflows
• Fallback inside a <picture> element
• Source images that will be converted by an image CDN

Avoid for:

• Logos
• Screenshots
• Transparent images
• Text-heavy graphics

PNG

PNG is the reliable lossless format. It preserves every pixel, supports full alpha transparency, and works in every browser.

This is why PNG is still excellent for screenshots, diagrams, UI mockups, charts, and text-heavy images. Lossy photo formats can smear sharp text and thin lines. PNG keeps them clean.

The downside is file size. A photograph saved as PNG can become several times larger than the same image saved as JPEG, WebP, or AVIF. So do not use PNG as your default for photos.

PNG also got a real standards update. The W3C PNG Third Edition became a Recommendation on 24 June 2025, covering static and animated PNG, color information, alpha, and streamable web use. That does not change the basic recommendation, but it confirms PNG is still actively maintained web infrastructure.

Best for:

• Screenshots
• Text-heavy graphics
• Transparent logos when SVG is not practical
• Pixel-perfect assets

Avoid for:

• Large photos
• Hero images
• Product galleries where WebP or AVIF can be used

For more detail, see image CDNs for PNG images and is PNG lossy or lossless?.

WebP

WebP is the practical modern default. It supports lossy compression, lossless compression, transparency, and animation in one format.

Google's WebP compression study reports 25-34% smaller files than JPEG at the same SSIM quality level. Its lossless and alpha study found WebP lossless can beat optimized PNG workflows too. That is why WebP is usually the first upgrade from old JPEG and PNG delivery.

The main reason I still like WebP in production is not just file size. It is predictable. Browser support is broad, encoding is far easier than AVIF, and almost every CMS, CDN, and image library understands it now.

Best for:

• General website images
• JPEG replacement
• PNG replacement when lossless WebP works
• Transparent graphics
• Animated GIF replacement

Avoid for:

• Images wider or taller than 16,383px
• Workflows where ancient browser support is mandatory
• Cases where AVIF is cached and gives much smaller output

You can test the difference directly with the JPEG to WebP converter or PNG to WebP converter.

AVIF

AVIF is the strongest format for compression. It is based on AV1 and can produce much smaller files than JPEG, especially for photos, gradients, and high-quality visuals.

Netflix's AVIF testing showed why the format became serious: AVIF preserved detail and reduced blocking artifacts compared with older formats. In practical web use, the usual recommendation is AVIF first, WebP fallback, JPEG fallback.

The catch is encoding cost. AVIF can be slow and CPU-heavy to generate. That is fine when an image CDN encodes once and caches the result. It is painful if your own server tries to generate AVIF on every request.

AVIF also has a perceived-performance tradeoff: it does not give the same progressive-rendering experience as progressive JPEG. A smaller file is usually better, but for large above-the-fold images you should test real LCP instead of assuming AVIF always wins.

Best for:

• Photos
• Product images
• High-traffic cached images
• HDR and wide-gamut workflows
• Sites where bandwidth cost matters

Avoid for:

• Real-time uncached conversion
• Very large source dimensions that exceed profile limits
• Workflows where progressive previews matter more than final byte size

SVG

SVG is not a photo format. It is vector graphics stored as XML.

That makes it perfect for logos, icons, charts, diagrams, badges, and simple illustrations. One SVG can look sharp on a cheap laptop, a Retina phone, and a 4K monitor without generating multiple raster sizes.

The warning is security. SVG can contain scripts, external references, CSS, and markup. If users can upload SVGs, sanitize them. If you do not control the SVG source, do not inline it blindly.

Best for:

• Logos
• Icons
• Simple illustrations
• Charts and diagrams
• UI symbols

Avoid for:

• Photos
• Complex illustrations with thousands of paths
• Untrusted uploads unless sanitized

GIF

GIF survives because it works everywhere and people still call every short loop a "GIF".

Technically, it is a poor format for most modern web use. GIF is limited to 256 colors, handles transparency badly, and produces huge animated files compared with animated WebP or video.

Use GIF only when you need old compatibility or when the content already exists as a small legacy animation. For new animations, use animated WebP, MP4, or WebM depending on the use case.

Best for:

• Legacy animation fallback
• Tiny simple loops where compatibility matters more than efficiency

Avoid for:

• Product demos
• UI recordings
• High-color animation
• Anything performance-sensitive

JPEG XL

JPEG XL is the most interesting format that I still would not use as the only web delivery format.

It has excellent features: lossy and lossless compression, transparency, animation, progressive decoding, HDR support, huge dimension limits, and lossless JPEG recompression. That last part matters because you can store an existing JPEG as JPEG XL, save bytes, and reconstruct the original JPEG bit-for-bit.

The problem is browser support. Can I Use lists JPEG XL at 15.34% global support in April 2026 usage data, and Chrome support is still disabled by default in current support tables. Safari has partial support. Firefox remains behind a flag.

So my recommendation is clear: use JPEG XL for archival experiments if it fits your workflow, but do not rely on it for normal website delivery yet.

Best for:

• Image archives
• Lossless JPEG recompression
• Future-proof storage tests
• Internal workflows where you control the viewer

Avoid for:

• Primary public web delivery
• Ecommerce images without fallbacks
• Any content where Chrome users must see the image directly

HEIC

HEIC is common because iPhones save photos in it. That does not make it a good open web format.

HEIC is based on HEVC, and HEVC licensing is the reason browser support is limited. Can I Use lists HEIC/HEIF support at 15.34% global usage, mainly Safari. Chrome, Firefox, and Edge do not support it.

For a website, convert HEIC before delivery. Use JPEG if you need maximum compatibility, WebP for a practical web output, or AVIF if your CDN handles it well.

Best for:

• Apple device storage
• User uploads before conversion
• Local photo libraries

Avoid for:

• Public web delivery
• Cross-browser image embeds
• Product images served directly from uploads

If visitors upload iPhone photos, send them through a conversion step. The HEIC to JPG converter is a simple local option.

Which Format Is Smallest?

For photos, the usual size order is:

AVIF < WebP < JPEG < PNG

That is not universal, but it is a good mental model. Google's WebP study found WebP 25-34% smaller than JPEG at equivalent SSIM. AVIF often improves further, especially on photographic images and gradients.

For screenshots, logos, and text-heavy graphics, the order can flip:

SVG or PNG/lossless WebP can beat lossy photo formats

That sounds strange until you look at the image content. Screenshots contain flat colors, repeated UI regions, and sharp text edges. Lossless formats can compress those patterns cleanly. Lossy photo formats may waste bytes trying not to destroy text edges.

For real-world adoption, the 2024 HTTP Archive Media chapter is useful context. It found JPEG at 32.4% of mobile image resources, PNG at 28.4%, GIF at 16.8%, WebP at 12%, SVG at 6.4%, and AVIF at 1.0%. AVIF adoption was small, but it grew heavily from 2022.

The web is moving, but slowly.

How Should You Serve Modern Image Formats?

You have two sane choices.

Option 1: Use the Picture Element

Use this when you generate variants yourself at build time.

<picture>
  <source srcset="/images/product.avif" type="image/avif" />
  <source srcset="/images/product.webp" type="image/webp" />
  <img
    src="/images/product.jpg"
    alt="Black leather office chair"
    width="1200"
    height="800"
    loading="lazy"
  />
</picture>

The browser picks the first format it supports. The <img> is the fallback.

Do not skip width and height. They prevent layout shifts. Do not lazy-load the LCP image by default either. Lazy loading is useful below the fold, but it can hurt the hero image. I explained the performance side in lazy loading plus image CDN.

Option 2: Use Image CDN Format Negotiation

This is what I prefer for most websites.

The HTML can stay simple:

<img
  src="https://cdn.example.com/images/product.jpg"
  alt="Black leather office chair"
  width="1200"
  height="800"
/>

The image CDN reads the browser's Accept header and returns the best cached format. Chrome may receive AVIF. Older browsers may receive JPEG. Safari may receive AVIF, WebP, PNG, or JPEG depending on the file and provider settings.

This avoids three common problems:

• maintaining multiple files per image
• shipping desktop-sized images to mobile users
• forgetting fallbacks when browser support changes

For provider selection, start with best image CDNs, free image CDNs, or free vs paid image CDNs.

Format Mistakes I Would Avoid

1. Converting every PNG to JPEG

This breaks transparency and can make logos look cheap. Convert transparent PNGs to WebP or AVIF only if alpha is preserved. Otherwise keep PNG.

2. Serving HEIC files directly

Your iPhone can open them. Most browsers cannot. Convert HEIC uploads before publishing.

3. Using AVIF without caching

AVIF is excellent when generated once and cached. It is a bad idea if every uncached request forces your server to encode a fresh AVIF.

4. Using GIF for product or UI demos

GIF is huge for motion. Use animated WebP or video. Keep GIF only as a fallback when you really need it.

5. Treating JPEG XL as production-ready for everyone

JPEG XL is technically strong, but support is not broad enough. Use fallbacks if you experiment with it.

6. Forgetting dimensions and responsive sizes

Format is only one part of image performance. A 3000px AVIF served into a 360px mobile slot is still wasteful. Resize images to the display size, use srcset/sizes, or let an image CDN resize per device.

Summing Up!

If you want the practical answer, use AVIF and WebP for modern delivery, JPEG and PNG as fallbacks, SVG for vectors, and PNG/lossless WebP for screenshots. Skip HEIC for web delivery and wait before trusting JPEG XL as your only production format.

The mistake is trying to solve this one image at a time forever. A better setup is to upload clean source images, resize them correctly, and let an image CDN handle format conversion for each browser.

For a small manual test, convert a few images with the JPEG to WebP converter and compare file sizes. For a production site, use automatic format negotiation through your CDN and measure the LCP improvement on your actual pages.