Raster image formats for sources

• Status: pending
• Deciders: Alies. Post Factum also: Kazik
• Date: 2024-11-28

Context and Problem Statement

We need to decide on the original raster image format to use for our assets. Our tools will create optimized versions of original images in various formats, but we need to decide on the format of the original image.

Considered Options

• AVIF https://caniuse.com/avif Generally has better compression than WebP, JPEG, PNG and GIF and is designed to supersede them.

• JPEG XL https://caniuse.com/jpegxl. Competes with AVIF which has similar compression quality but fewer features overall.

• WebP https://caniuse.com/webp Supports lossy and lossless compression, as well as animation and alpha transparency. WebP generally has better compression than JPEG, PNG and GIF

• PNG alpha transparency https://caniuse.com/png-alpha

• SVG is a vector format

• see https://liteiniy.medium.com/image-formats-on-the-web-2024-1701842eeff0

Feature	PNG	JPEG	AVIF	WebP	SVG	GIF
Lossless	✅	❌	✅*	✅*	✅	✅
Lossy	❌	✅	✅	✅	❌	❌
Transparency	✅	❌	✅	✅	✅	✅
Animation	❌	❌	✅	✅	✅**	✅
Wide Color	✅	❌	✅	❌	✅	❌
Progressive	❌	✅	✅	❌	-	❌
Browser Support	100%	100%	95%+	97%+	100%	100%
File Size	Large	Medium	Small	Small	Tiny***	Large
Encode Speed	Fast	Fast	Slow	Medium	N/A	Fast

• * Supported but rarely used
• ** Via CSS/SMIL
• *** For simple graphics

Shortlist is:

• AVIF
• JPEG + PNG
• WebP

We are going to use ImageKit as the main tool for image processing and delivery. Since it contains images on the fky (with caching, of course), we should consider both:

• price of storage
• price of conversion
• conversion duration (it's a part of the response time)

By the end of 2024, AVIF is not widely supported and CPUs are not well adopted to make AVIF encoding/decoding operations fast, so we expect to have more issues with AVIF than with PNG or JPEG.

WebP could be a good option, but it's not so good on compression. Plus, their WebP 2 format is coming soon (by 2024-11 it's unstable).

JPEG XL is currently supported by Safari only. JPEG XL competes with AVIF, which has similar compression quality, but fewer features overall. Since it's not so widely supported, we should not use it as the main format.

Decision Outcome

Use the classic pair JPEG + PNG and reconsider the format in 2026 (it can be AVIF or something else).

Extra

• animation format: MP4 video, in rare cases SVG and JS-based animation (GSAP)
• SVG has no competitors for as a web vector graphics format