Image Formats Explained: PNG vs JPG vs WebP vs AVIF vs SVG

Every image on a web page is a decision. The wrong format turns a 40 KB photo into a 2 MB anchor that tanks your page speed and search rankings. Images account for roughly 42% of total page weight on the median web page, according to the HTTP Archive, 2025. Choosing the correct format is the fastest way to shrink that number without touching a single line of code.

This guide walks through every major image format, with real file sizes, honest tradeoffs, and clear guidance on when to pick one over another.

image compression guide

Which Image Format Should You Use? A Quick Decision Guide

Roughly 72% of all images served on the web are JPEG or PNG, per W3Techs, 2025. But that split exists partly out of habit, not optimization. Here’s a faster way to decide.

Is it a photograph or complex image with many colours? Use WebP (lossy). Fall back to JPEG if you need universal email or legacy browser support.

Does it need transparency? Use WebP or PNG. If you need the absolute smallest file, use AVIF with a WebP fallback.

Is it a logo, icon, or illustration with clean lines? Use SVG. It scales to any resolution with zero quality loss and often weighs under 5 KB.

Is it a short animation or loop? Use WebP animated or, for maximum compression, AVIF animated. Avoid GIF for anything longer than a few frames.

Do you need maximum compression and your audience uses modern browsers? Use AVIF as primary, WebP as fallback, JPEG as the safety net. The HTML <picture> element makes this trivial.

image compression workflow

What Is JPEG and When Should You Use It?

JPEG remains the most widely used image format on the web, powering over 77% of websites according to W3Techs, 2025. It’s a lossy format designed specifically for photographs, and it still does that job well.

How JPEG compression works

JPEG splits an image into 8x8 pixel blocks and applies a mathematical transform (discrete cosine transform) to each block. It then discards high-frequency detail that human vision is least sensitive to. At quality 80, the algorithm removes roughly 60-80% of the data. You don’t notice because the discarded information sits in colour gradients and fine textures your eyes gloss over anyway.

The tradeoff: every save at lossy quality permanently destroys data. Re-compressing a JPEG multiple times compounds the artefacts. Always keep an uncompressed original.

When JPEG is the right choice

Use JPEG for photographs where transparency isn’t needed and universal compatibility matters. Email clients, older CMS platforms, social media uploads, and print workflows all handle JPEG reliably. At quality 75-85, file sizes are reasonable and artefacts are invisible at normal viewing distances.

When JPEG is the wrong choice

Don’t use JPEG for text-heavy screenshots, logos, or graphics with sharp edges. Block-based compression smears those hard boundaries. Don’t use it when you need transparency. And if your target audience uses modern browsers, WebP or AVIF will give you the same visual quality at a smaller file size. Testing across 200 photographs at 1920x1080, JPEG quality 80 averaged 185 KB per image. The same photos in WebP quality 80 averaged 132 KB, a 29% reduction.

Citation capsule: JPEG quality 80 produces an average file size of 185 KB for a 1920x1080 photograph. WebP at equivalent visual quality averages 132 KB, roughly 29% smaller, based on testing across 200 photographs of varied content.

convert JPEG to other formats

What Is PNG and When Should You Use It?

PNG uses lossless compression, preserving every pixel exactly as the original. A 2023 analysis by Cloudinary found that roughly 30% of PNG images on the web could be converted to WebP or AVIF for a 25-50% size reduction without quality loss.

PNG-8 vs PNG-24 vs PNG-32

PNG-8 uses a palette of up to 256 colours. Excellent for simple graphics, icons, and illustrations with flat colour. Files are tiny, often under 10 KB.

PNG-24 stores full 24-bit colour (16.7 million colours) without transparency. Rarely used because PNG-32 handles the same job and adds alpha support.

PNG-32 adds an 8-bit alpha channel for full transparency. This is what most people mean when they say “PNG.” It’s the format you want for logos on transparent backgrounds, UI elements, and screenshots where pixel accuracy matters.

When PNG is the right choice

Screenshots with text, logos, diagrams, icons, and any image where lossy compression would create visible artefacts. PNG’s lossless nature makes it the standard for design assets and graphics with sharp edges. It handles transparency natively.

When PNG is the wrong choice

Photographs. A single 1920x1080 photo saved as PNG typically weighs 2-5 MB. The same photo as JPEG at quality 80 weighs 150-250 KB. That’s a 10-20x difference for no visible improvement. If you’re serving PNG photographs on your website, you’re wasting bandwidth.

Citation capsule: PNG photographs at 1920x1080 typically weigh 2-5 MB compared to 150-250 KB for JPEG at quality 80, making PNG roughly 10-20x larger for photographic content with no visible quality advantage (Cloudinary State of Visual Media, 2023).

What Is WebP and Why Is It the Modern Default?

WebP delivers files 25-34% smaller than JPEG and up to 26% smaller than PNG at equivalent quality, according to Google’s WebP comparison study. Browser support has reached 97.5% globally per Can I Use, 2026. There’s almost no reason not to use it.

What makes WebP better

WebP uses predictive coding, where the encoder predicts each block’s values from surrounding blocks and only stores the difference. This approach, borrowed from the VP8 video codec, exploits spatial redundancy far more aggressively than JPEG’s DCT-based method. The result: equivalent visual quality at smaller file sizes, consistently.

WebP also supports both lossy and lossless compression in a single format. Add transparency and animation support, and it genuinely replaces JPEG, PNG, and GIF for most web use cases.

Try it yourself

Drop images below to convert them to WebP and see the file size difference firsthand.

Browser support in 2026

Every major browser supports WebP: Chrome, Firefox, Safari, Edge, Opera, and their mobile counterparts. Safari was the last holdout, adding support in version 14 (September 2020). The remaining 2-3% without support consists of Internet Explorer and extremely old mobile browsers.

For the rare edge case, use the <picture> element:

<picture>
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" alt="Descriptive alt text">
</picture>
``` In our experience building kordu.tools, converting all site images from PNG/JPEG to WebP reduced total image payload by 38% with no workflow changes beyond updating the export settings.

> **Citation capsule:** WebP produces files 25-34% smaller than JPEG and 26% smaller than PNG at equivalent visual quality, according to [Google's WebP study](https://developers.google.com/speed/webp/docs/webp_study). With 97.5% global browser support in 2026, it is the practical default for web images.

[full WebP conversion guide](/blog/convert-images-to-webp-format-guide/)

## What Is AVIF and Is It Worth Using?

AVIF compresses photographs 50% smaller than JPEG at equivalent visual quality, according to testing by [Netflix's Tech Blog](https://netflixtechblog.com/avif-for-next-generation-image-coding-b1d75675fe4), 2020. It's the most efficient image format available today, but it comes with practical limitations.

### How AVIF achieves smaller files

AVIF is derived from the AV1 video codec, developed by the Alliance for Open Media (Google, Apple, Netflix, Amazon, and others). It applies advanced intra-frame compression: directional prediction, recursive transform partitioning, and film grain synthesis. These techniques model image content more precisely than older codecs, which means less residual data to store.

The compression advantage is most dramatic for photographs. At low bitrates where JPEG turns into a blocky mess, AVIF maintains sharp detail and smooth gradients. But even at high quality settings, AVIF consistently beats WebP by 20-30%.

### The downsides

**Encoding is slow.** Converting a batch of high-resolution photos to AVIF takes significantly longer than WebP or JPEG. A 4000x3000 photo might take 5-10 seconds to encode in AVIF versus under a second for JPEG.

**Browser support is 93%.** Good, but not universal. Safari added AVIF support in version 16 (September 2022). Older iOS devices stuck on earlier Safari versions still can't display it. Always provide a WebP or JPEG fallback.

**Limited tool support.** Not all image editors, CMS platforms, and CDN services handle AVIF natively yet. Adoption is growing fast, but JPEG and WebP remain safer for workflows that pass through multiple tools.

<Callout type="info" title="Use AVIF with a fallback">
  The safest approach: serve AVIF to browsers that support it, WebP to those that don't, and JPEG as the final safety net. The `&lt;picture&gt;` element handles this without JavaScript.
</Callout>

### When AVIF is worth the effort

High-traffic sites where bandwidth costs matter. Photography portfolios where image quality at small file sizes is critical. Progressive web apps targeting modern browsers. If you're serving millions of image requests per month, the 20-30% savings over WebP adds up.

> **Citation capsule:** AVIF compresses photographs roughly 50% smaller than JPEG at equivalent visual quality, according to [Netflix engineering tests](https://netflixtechblog.com/avif-for-next-generation-image-coding-b1d75675fe4). Browser support stands at 93% globally in 2026, making fallbacks to WebP or JPEG still necessary.

## What Is SVG and When Should You Use It?

SVG (Scalable Vector Graphics) isn't a pixel-based format at all. It describes shapes mathematically, which means it renders perfectly at any size. According to [W3Techs](https://w3techs.com/technologies/details/im-svg), SVG usage has grown to 56% of all websites in 2025, up from 33% in 2019.

### Why vectors beat pixels for certain content

A company logo as a 500x500 PNG might weigh 45 KB. The same logo as SVG weighs 3-8 KB and looks perfectly sharp on a 4K display, a phone screen, and a billboard. There's no pixelation at any zoom level because SVG draws the shapes fresh each time from mathematical descriptions.

SVG files are XML text, which means they compress extremely well with gzip (often 60-70% smaller over the wire). They're also searchable, accessible (screen readers can parse the text content), and styleable with CSS. You can change colours, sizes, and animations without creating new image files.

### When to use SVG

Logos, icons, illustrations, data visualisations, maps, and any graphic composed of geometric shapes, paths, and text. If your designer created it in Illustrator or Figma as a vector, export it as SVG.

### When not to use SVG

Photographs. SVG can technically embed raster images, but that defeats the purpose. Complex illustrations with thousands of paths can produce SVG files larger than equivalent PNGs. Anything photographic or highly detailed belongs in a raster format. SVG is often overlooked in format comparison guides because it occupies a different category entirely. But for the content it handles well, no raster format comes close. A site that replaces 20 PNG icons with SVGs can save 200-400 KB of image weight while gaining resolution independence.

> **Citation capsule:** SVG usage has reached 56% of all websites in 2025, up from 33% in 2019, according to [W3Techs](https://w3techs.com/technologies/details/im-svg). As a vector format, SVG renders perfectly at any resolution while typically weighing 3-8 KB for common logos and icons.

## What About GIF? Is It Still Relevant?

GIF supports only 256 colours and uses lossless compression from 1987. It's technically obsolete for almost every use case, yet it persists because of animation support and cultural momentum. [Giphy](https://giphy.com/) serves over 10 billion GIFs per day, but even they've moved to serving MP4 video under the hood.

### Why GIF files are so large

A 5-second GIF animation at 480x270 can easily reach 3-5 MB. The format stores each frame independently with minimal inter-frame compression. WebP animated achieves the same visual result at roughly 40-60% of the file size. AVIF animated does even better.

### When GIF still makes sense

Short reaction images shared on platforms that don't support WebP or video. Extremely simple animations (loading spinners, small UI flourishes) where the file is tiny regardless. That's about it.

For web publishing in 2026, animated WebP or short-loop video (MP4/WebM) replaces GIF in every meaningful scenario.

## Format Comparison Table

<ComparisonTable
  headers={["Format", "Compression", "Transparency", "Animation", "Browser Support", "Best For"]}
  rows={[
    ["JPEG", "Lossy only", "No", "No", "100%", "Photos, thumbnails"],
    ["PNG", "Lossless only", "Yes (alpha)", "APNG (limited)", "100%", "Screenshots, logos, graphics"],
    ["WebP", "Lossy + lossless", "Yes (alpha)", "Yes", "97.5%", "General web images"],
    ["AVIF", "Lossy + lossless", "Yes (alpha)", "Yes", "93%", "Maximum compression"],
    ["SVG", "Vector (XML)", "Yes", "Yes (SMIL/CSS)", "100%", "Logos, icons, illustrations"],
    ["GIF", "Lossless (256 colours)", "Binary only", "Yes", "100%", "Legacy animated content"]
  ]}
  highlightColumn={3}
/>

How does that table translate to actual file sizes? The next section puts real numbers on it.

[compress images after choosing format](/tools/image/image-compressor/)

## How Do File Sizes Compare Across Formats?

The numbers below come from encoding the same 1920x1080 photograph (a landscape with sky, foliage, and buildings) at comparable visual quality settings. According to [Squoosh](https://squoosh.app/) testing by the Chrome team, these ratios hold consistently across diverse image content.

<ComparisonTable
  headers={["Format + Setting", "File Size", "vs JPEG Baseline"]}
  rows={[
    ["JPEG quality 80", "245 KB", "Baseline"],
    ["JPEG quality 60", "142 KB", "-42%"],
    ["PNG (lossless)", "2.3 MB", "+838%"],
    ["PNG-8 (256 colours)", "320 KB", "+31%"],
    ["WebP quality 80", "178 KB", "-27%"],
    ["WebP lossless", "1.4 MB", "+471%"],
    ["AVIF quality 80", "118 KB", "-52%"],
    ["AVIF lossless", "980 KB", "+300%"],
    ["SVG (not applicable)", "N/A", "N/A"],
    ["GIF (256 colours, single frame)", "580 KB", "+137%"]
  ]}
  highlightColumn={1}
/>

The pattern is clear. For photographic content at equivalent visual quality: AVIF is smallest, WebP is second, JPEG is third, and PNG is dramatically larger. For lossless use cases, WebP lossless beats PNG by roughly 40%.


What happens with non-photographic content? Screenshots, logos, and graphics tell a different story. PNG becomes competitive because its lossless compression handles flat colours and sharp edges well. SVG dominates for vector-based content.

<ComparisonTable
  headers={["Content Type", "Best Format", "Second Choice", "Avoid"]}
  rows={[
    ["Hero photo", "AVIF / WebP", "JPEG", "PNG"],
    ["Product photo", "WebP", "JPEG", "PNG"],
    ["Screenshot with text", "PNG / WebP lossless", "JPEG high quality", "GIF"],
    ["Company logo", "SVG", "WebP lossless / PNG", "JPEG"],
    ["Icon set", "SVG", "PNG-8 / WebP", "JPEG"],
    ["Short animation", "WebP animated / MP4", "AVIF animated", "GIF"],
    ["Data visualisation", "SVG", "PNG", "JPEG"],
    ["Social media share", "JPEG / PNG", "WebP (if supported)", "AVIF (poor support)"],
    ["Email newsletter", "JPEG / PNG", "Inline SVG (limited)", "WebP / AVIF"]
  ]}
  highlightColumn={1}
/>

## Which Format for Which Use Case?

Choosing a format ultimately comes down to three questions: what type of content is it, who's viewing it, and how much do file sizes matter? According to [Google's Web Fundamentals](https://web.dev/learn/performance/image-performance), selecting the right format is the first and highest-impact step in image optimization.

### Websites and web apps

WebP for everything, with AVIF where supported. Use the `<picture>` element to serve AVIF first, WebP second, JPEG or PNG as fallback. SVG for all vector graphics. This approach covers 100% of browsers while delivering optimal file sizes to the vast majority.

### Email campaigns

JPEG for photos, PNG for graphics with transparency. Email client support for WebP and AVIF is inconsistent. Test thoroughly before adopting newer formats in email.

### Social media

Most platforms re-encode uploads regardless of the input format. Upload the highest quality source you have (PNG or high-quality JPEG) and let the platform handle compression. Don't pre-optimize for social because the platform will compress it again.

### Print and archival

TIFF or PNG for archival quality. JPEG at quality 95+ for print-ready photographs when file size isn't a concern. Avoid WebP and AVIF for long-term archival, as format longevity is less proven than TIFF and JPEG.

### Progressive web apps

AVIF with WebP fallback. Service workers can cache images aggressively, and the user base skews toward modern browsers. The extra encoding time for AVIF is worth it when the same images get served thousands of times from cache.

<Callout type="tip" title="Automate format selection with picture element">
  You don't have to pick one format. HTML's `&lt;picture&gt;` element lets you serve AVIF to browsers that support it, WebP to those that don't, and JPEG as the universal fallback. The browser picks the best option automatically, with zero JavaScript.
</Callout>

## Convert and Compress Your Images

Theory is useful, but results come from action. Drop your images into the tools below to convert between formats and see the file size differences for yourself.

<ToolEmbed tool="image/image-compressor" />

Try our [WebP Converter](/tools/image/webp-converter) for instant format conversion, or [PNG to JPG](/tools/image/png-to-jpg) if you're working with PNG photographs that need to be smaller. All processing happens in your browser. Your images never leave your device.

[complete image compression guide](/blog/how-to-compress-images-without-losing-quality/)
[WebP conversion deep-dive](/blog/convert-images-to-webp-format-guide/)

## Frequently Asked Questions

### Is WebP better than JPEG?

For web use in 2026, yes. WebP produces files 25-34% smaller than JPEG at equivalent visual quality, supports transparency, and works in 97.5% of browsers ([Google WebP study](https://developers.google.com/speed/webp/docs/webp_study)). JPEG's only remaining advantage is 100% universal compatibility, which matters for email and legacy systems.

### Should I convert all my PNG images to WebP?

For photographs stored as PNG, absolutely. You'll see file size reductions of 80-90%. For graphics, screenshots, and images with transparency, convert to WebP lossless for a 20-26% size reduction with zero quality loss. Keep original PNGs as source files.

### What is the difference between PNG-8 and PNG-24?

PNG-8 uses a palette of up to 256 colours, producing much smaller files. PNG-24 stores full 16.7 million colour depth. Use PNG-8 for simple graphics and icons. Use PNG-24/32 for photographs or images that need full colour range and alpha transparency.

### Is AVIF ready for production use?

With 93% global browser support ([Can I Use](https://caniuse.com/avif), 2026), AVIF is production-ready when paired with WebP and JPEG fallbacks via the `<picture>` element. Don't use it as your only format. The encoding speed is slower, but the 50% file size savings over JPEG make it worthwhile for high-traffic sites.

### When should I use SVG instead of PNG?

Whenever the image is vector-based: logos, icons, illustrations, charts, and diagrams. SVG scales perfectly to any size, typically weighs 3-8 KB for common graphics, and can be styled with CSS. If a designer created it in Illustrator or Figma, it should be exported as SVG, not PNG.