The Great Format Wars: How GIF, JPG, PNG, WebP and AVIF Got Here

Most advice about image formats is a table of pros and cons. That is useful, but it skips the part that explains why the web ended up with five formats instead of one: every new format had to wait years for the last major browser to support it. Knowing those dates tells you what you can rely on now and why fallbacks still exist.

GIF (1987): the format that got sued

CompuServe released GIF in 1987. It uses LZW compression and a palette of at most 256 colours, which is fine for logos and terrible for photos. It also supports simple animation, which is the only reason it is still around.

The trouble started in late 1994, when Unisys, which held the patent on LZW, began asking for licence fees from software that wrote GIF files. That decision directly led to PNG. The last of the LZW patents expired in 2004, but by then the web had moved on for still images.

JPEG (1992): good enough for photos, forever

The JPEG standard was published in 1992. It is lossy: it throws away fine detail the eye is not good at seeing, which is why a photo can shrink to a tenth of its raw size and still look fine. Its weaknesses have not changed in thirty years:

• No transparency at all.
• Sharp edges and text get "ringing" artefacts around them.
• Every re-save loses a little more, so editing a JPEG and saving it over and over degrades it.

Its strength is that literally everything opens it: every browser, every email client, every phone, every printer driver.

PNG (1996): the patent-free replacement

PNG was designed in 1995 as a free replacement for GIF and became a W3C Recommendation in October 1996. It is lossless, supports millions of colours and has a full alpha channel, so edges can fade smoothly into whatever is behind them.

PNG had its own long wait. Internet Explorer 6, which dominated the early 2000s, did not render PNG alpha transparency properly: semi-transparent areas showed up grey. Web developers used hacks for years until IE7 fixed it in 2006. That is the first example of the pattern that repeats below: the format is ready long before you can use it everywhere.

PNG is the right choice for screenshots, diagrams, UI graphics and anything with text. It is the wrong choice for photos, where a PNG can easily be five to ten times the size of a good JPEG.

WebP (2010): ten years to be safe

Google announced WebP in September 2010, based on the VP8 video codec. The first version was lossy only; lossless compression and transparency were added soon after. Google's own comparison study reported lossy WebP files around 25 to 34 percent smaller than JPEG at equal quality, and its lossless mode is about 26 percent smaller than PNG.

Chrome supported it early. The holdouts were the problem:

• Firefox added WebP in version 65, in January 2019.
• Edge added it in 2018.
• Safari added it in Safari 14, in September 2020, and on the Mac only on macOS Big Sur or later.

So WebP was only safe to use without a fallback around 2021 or 2022, more than ten years after it was announced.

AVIF (2019): faster adoption, slower encoding

AVIF stores a still frame of the AV1 video codec, which was developed by the Alliance for Open Media. It usually beats WebP on file size, especially for photos at low bitrates, and supports HDR and wide colour.

Its rollout was much quicker than WebP's:

• Chrome 85, August 2020
• Firefox 93, October 2021
• Safari 16, September 2022

The trade-off is encoding time: AVIF is much slower to create than JPEG or WebP, which matters if you convert images on the fly.

JPEG XL: the one that stalled

JPEG XL was standardised as ISO/IEC 18181 in 2021 and 2022. It has a feature none of the others have: it can losslessly repack an existing JPEG into a file about 20 percent smaller, and turn it back into the identical original. Chrome had experimental support behind a flag and removed it in Chrome 110 in early 2023. Safari 17 added support later that year. Check caniuse.com for the current state before you depend on it.

What the history means in practice

1. JPEG and PNG are the only formats that work everywhere, including email, office software and older devices. If you are sending a file to someone, use one of them.
2. On the web, WebP is now safe as a default, and AVIF is a good option if you can afford the encoding time.
3. Use the <picture> element if you want new formats with a fallback:

<picture>
  <source srcset="photo.avif" type="image/avif">
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" alt="Description of the photo" width="1200" height="800">
</picture>

The browser picks the first format it understands and ignores the rest.

4. Converting does not undo loss. A JPEG converted to PNG is a bigger file with the same artefacts. Always convert from the best original you have.
5. Pick by content, not habit. Photos: JPEG, WebP or AVIF. Screenshots, text, diagrams, logos with transparency: PNG or lossless WebP. Logos and icons that need to scale: SVG.

Converting on Fix42

The Fix42 image converter accepts JPG, PNG, GIF, WebP and SVG and outputs PNG, JPG, WebP or SVG. Conversion happens on our server and the files are not kept afterwards. It does not output AVIF or JPEG XL yet. For logos you want as true vectors, the SVG converter traces a raster image into paths.