Lossless Image Formats for the Web: PNG, WebP, AVIF, JPEG XL Compared

Lossless image formats preserve the original pixels exactly. That is what you want for screenshots, logos, diagrams, UI mockups, transparent graphics, and source files. For normal web delivery in 2026, the practical answer is simple: use lossless WebP when you can, keep PNG as the fallback, and save JPEG XL for archival workflows until browser support improves.

TL;DR: WebP lossless is the best practical lossless format for the web because it preserves pixels, supports transparency, and has 95.97% global browser support. PNG remains the safest fallback because it works everywhere. JPEG XL is technically excellent for archival and lossless JPEG recompression, but 13.6% browser support — all of it partial, all of it Safari — is not enough for primary web delivery. AVIF lossless exists, but you should test it per image because its lossy mode is much stronger than its lossless story.

What Is a Lossless Image Format?

A lossless image format compresses an image without discarding pixel data. Decode the file and you get the same pixels back.

That is different from lossy compression. A lossy format such as JPEG, lossy WebP, or AVIF can make photos much smaller by throwing away detail the eye is less likely to notice. That is great for delivery, but it is not exact.

Lossless compression is the right choice when exactness matters:

• screenshots
• UI mockups
• logos
• diagrams
• icons
• transparent graphics
• source files you may edit later
• images with small text or sharp edges

The catch is file size. Lossless compression cannot throw anything away, so it usually cannot compete with lossy formats for photos. A lossless photo may be several times heavier than a visually identical lossy WebP or AVIF.

For the broader tradeoff, read lossy vs lossless compression.

Which Lossless Image Format Should You Use?

Short answer: use WebP lossless for modern web graphics and PNG as the fallback.

If you need one format that will open everywhere, use PNG.

If you control web delivery and can provide fallback, use lossless WebP.

If you are archiving a large image library and browser rendering is not the goal, test JPEG XL.

Lossless Image Formats Comparison Table

As of June 2026, this is the practical comparison.

Quick Note: Browser support does not mean the format is always the best output. WebP and AVIF have similar global support now, but lossless WebP is usually the easier web choice because tooling, encoding speed, and fallback behavior are simpler.

What Does Each Lossless Format Do Best?

PNG

PNG is the compatibility baseline. It is lossless, supports full alpha transparency, and works everywhere.

It is still the safest choice for screenshots, documentation images, diagrams, UI images, and transparent graphics when you cannot control the viewer. If a file has to open in browsers, editors, CMS tools, email clients, and random preview apps, PNG is hard to beat.

PNG is not the smallest modern option, though. Default PNG exports from design tools are often larger than they need to be. You can usually reduce them with tools such as oxipng, zopflipng, or a CDN optimizer.

The standards side is also alive. The W3C PNG Third Edition became a Recommendation on 24 June 2025 and formally covers PNG/APNG, alpha, color information, and streamable web use.

Use PNG when:

• compatibility is the priority
• the image has transparency
• the image contains sharp text or UI edges
• email or old software may open it
• you need a fallback for lossless WebP

Avoid PNG when:

• the image is a large photo for web delivery
• WebP lossless fallback is already handled
• you need smaller delivery files and control the browser output

For the basic PNG explanation, see is PNG lossy or lossless?.

WebP Lossless

WebP lossless is the practical modern upgrade from PNG.

It preserves pixels, supports transparency, and works in modern browsers. Google's WebP lossless and alpha study found WebP lossless could be 23% denser than ZopfliPNG and 42% smaller than default libpng output in its test corpus.

Do not treat that as a guaranteed number for every image. Lossless compression depends heavily on image content. But the direction is useful: WebP lossless is often smaller than PNG without sacrificing exactness.

Use WebP lossless when:

• you are replacing PNG graphics on a website
• the image has transparency
• screenshots need sharp text
• you can provide PNG fallback
• your CDN can negotiate format automatically

Avoid WebP lossless when:

• you need absolute compatibility outside browsers
• email clients or old tools must open the image
• the asset is actually vector and should be SVG

You can test the difference with the PNG to WebP converter.

AVIF Lossless

AVIF supports lossless compression, but I would not make it the default lossless web format.

AVIF's lossy mode is excellent for photos. Its lossless mode is more situational. It can win on some images, but it can also be slower to encode and less predictable than WebP lossless for common web graphics.

The browser support is good enough for delivery with fallback: Can I Use lists AVIF at 93.42% global support. The question is not "can browsers display it?" The question is "does lossless AVIF beat WebP lossless for this asset after encode time and fallback complexity?"

Often, the answer is no.

Use AVIF lossless when:

• you have tested the exact asset class
• your pipeline already generates AVIF
• encode time does not matter
• the savings over WebP lossless are real for your images

Avoid AVIF lossless when:

• you need a simple PNG replacement
• real-time encoding matters
• WebP lossless is already smaller or close enough

JPEG XL

JPEG XL is the format I like most technically and trust least for public browser delivery today.

It supports lossy and lossless compression, transparency, HDR, progressive decoding, large dimensions, and lossless JPEG recompression. That last part is a big deal: existing JPEG libraries can be stored as JPEG XL and reconstructed back to the original JPEG bit-for-bit.

The browser problem remains. Can I Use lists JPEG XL at 13.6% global support — and none of it is full support, so the entire figure is partial support in Safari. Chrome reintroduced a JPEG XL decoder from version 145 in early 2026, but it is still behind a flag and off by default through Chrome 151, so Safari stays the only browser with partial default support. The JPEG XL explainer covers why that number misleads.

That makes JPEG XL useful for archives and controlled workflows, not for normal public web delivery.

Use JPEG XL when:

• you are archiving images
• you control the viewer
• you want lossless JPEG recompression
• browser support is not required

Avoid JPEG XL when:

• public website visitors need to see the image directly
• Chrome users are important
• you do not have a fallback

GIF

GIF is technically lossless in its compression step, but the format is limited to 256 colors per frame.

That makes it a bad modern choice for most graphics and animations. If the source has more than 256 colors, the palette reduction can already be visually lossy before GIF compression even starts.

Use GIF only as a legacy fallback. For modern animation, use animated WebP or video. For static graphics, use PNG or lossless WebP.

TIFF

TIFF is for print, scanning, archival, and professional workflows.

It can store lossless image data, high bit depth, layers of metadata, and compression variants such as LZW or ZIP. Browsers are not the target environment. Do not serve TIFF files as normal web images.

If you receive TIFF originals, convert delivery copies to PNG, WebP, AVIF, or JPEG depending on the content.

Size: Which Lossless Format Is Smallest?

There is no universal winner for every image.

Lossless compression depends on redundancy. A flat logo, a UI screenshot, a gradient illustration, and a noisy photograph behave differently.

Still, the practical pattern looks like this:

For delivery, do not use lossless formats for photos unless exact pixels are required. A lossless photo can be much heavier than a visually identical lossy WebP or AVIF.

That is the mistake I see often: someone converts every image to PNG because "lossless is better." For web delivery, lossless is only better when the content needs exact pixels.

How Should You Serve Lossless Images on the Web?

You have two good options.

Option 1: Use Picture Fallbacks

Use this if you generate variants yourself.

<picture>
  <source srcset="/images/screenshot.webp" type="image/webp" />
  <img
    src="/images/screenshot.png"
    alt="Dashboard screenshot showing image optimization settings"
    width="1200"
    height="800"
    loading="lazy"
  />
</picture>

Modern browsers get lossless WebP. Everything else gets PNG.

Keep width and height in the <img> tag to avoid layout shifts. Use descriptive alt text when the screenshot explains something useful.

Option 2: Use an Image CDN

This is easier for a real site.

An image CDN can read the browser's Accept header and serve WebP, AVIF, PNG, or the original format depending on browser support and provider settings.

The URL can stay simple:

<img
  src="https://cdn.example.com/docs/dashboard.png"
  alt="Dashboard screenshot showing image optimization settings"
  width="1200"
  height="800"
/>

The CDN handles the derivative and cache.

For the detailed workflow, read can image CDNs convert image formats?. For provider options, start with best image CDNs or free image CDNs.

Common Lossless Format Mistakes

1. Using PNG for every image

PNG is excellent for graphics. It is usually wasteful for photos. Use lossy WebP or AVIF for photo delivery.

2. Forgetting SVG for logos

If the logo is vector artwork, SVG is usually better than PNG or WebP. It scales perfectly and can be tiny.

3. Using JPEG for screenshots

JPEG can make UI text fuzzy and create artifacts around sharp edges. Use PNG or lossless WebP.

4. Treating JPEG XL as broadly supported

JPEG XL is strong technology, but browser support is still too limited for primary public delivery.

5. Assuming AVIF lossless is always best because AVIF lossy is good

These are different modes. AVIF lossy is excellent. AVIF lossless should be tested against WebP lossless and PNG for your actual assets.

6. Optimizing source files instead of delivery copies

Keep clean originals. Generate optimized delivery files separately. That gives you room to change formats later without quality loss.

Summing Up!

Use WebP lossless as the practical modern default for web graphics. Use PNG as the universal fallback. Use SVG before both when the asset is truly vector. Use JPEG XL for archival workflows, not broad public web delivery yet.

The main decision is not "which lossless format is always smallest?" The better question is: does this image need exact pixels on the public web, or is it a photo that should be delivered with lossy WebP or AVIF?

For a simple manual test, use the PNG to WebP converter. For production, let an image CDN negotiate formats per browser and keep your clean source files intact.