Image Formats Guide
Choose the right format for your images. Compare compression, quality, and browser support.
Format Comparison
| Format | Compression | Quality | Best For |
|---|---|---|---|
| WebP | 25-35% smaller than JPEG | Excellent | General web use, photos, graphics |
| AVIF | 50% smaller than JPEG | Excellent | High compression needs, modern sites |
| JXL | 60% smaller than JPEG | Superior | Future-proof, progressive loading |
| JPEG | Baseline | Good | Maximum compatibility |
| PNG | Lossless only | Perfect | Transparency, screenshots, logos |
Browser Compatibility
| Format | Chrome | Firefox | Safari | Edge | Global |
|---|---|---|---|---|---|
| WebP | 23+ | 65+ | 14+ | 18+ | 98% |
| AVIF | 85+ | 93+ | 16.4+ | 121+ | 92% |
| JPEG XL | Flag | No | 17+ | Flag | 18% |
| JPEG/PNG | All | All | All | All | 100% |
When to Use Each Format
WebP - Safe Default
Best choice for most websites. 98% browser support means almost everyone can see your images. Great balance between compression and compatibility.
AVIF - Maximum Compression
Best for bandwidth-sensitive applications. Use with WebP fallback for older browsers. Excellent for hero images and large photos where size matters most.
JPEG XL - Future Ready
The future of image compression. Currently limited support, but Safari 17+ works. Great for progressive loading and lossless compression of existing JPEGs.
Format Conversion
Kremlit supports converting between all major image formats. This includes converting from newer formats like JPEG XL back to legacy formats for maximum compatibility.
JXL to JPEG/WebP
Convert JPEG XL files to JPEG or WebP for browsers that don't support JXL yet. Perfect for maintaining a JXL archive while serving compatible formats to users.
curl -X POST https://api.kremlit.dev/api/v1/optimize \ -F "[email protected]" \ -F "output_format=jpeg" \ -F "quality=85"
AVIF to WebP/JPEG
Convert AVIF images to more widely supported formats when needed.
HEIC to WebP/JPEG
Convert iPhone photos (HEIC/HEIF) to web-friendly formats automatically.
Fallback Strategy
Use the HTML <picture> element to serve modern formats with fallbacks:
<picture> <!-- AVIF for modern browsers --> <source srcset="image.avif" type="image/avif"> <!-- WebP for most browsers --> <source srcset="image.webp" type="image/webp"> <!-- JPEG fallback for all --> <img src="image.jpg" alt="Description"> </picture>