Image optimization is critical for web performance, SEO, and user experience. With modern image formats like AVIF, WebP, and JPEG XL, you can significantly reduce file sizes without sacrificing quality. This guide explores how to configure Gumlet CDN to serve these formats dynamically, with a focus on AVIF (primary) and WebP (fallback).
Gumlet CDN automatically converts and serves images in the most efficient format based on the browser's Accept header. This ensures optimal performance across all devices and browsers.
Introduction
Image Formats Compared
Below is a comparison of the four image formats discussed, along with their pros, cons, and browser support.
| Format | Compression | Quality | Browser Support (June 2026) | Use Case |
|---|---|---|---|---|
| AVIF | ~50% smaller than WebP | High (lossy/lossless) | Chrome, Firefox, Edge, Opera | Primary (modern browsers) |
| WebP | ~30% smaller than JPEG/PNG | High (lossy/lossless) | All modern browsers (Safari ≥ 14) | Fallback for AVIF |
| JPEG XL | ~40% smaller than JPEG | High (lossy/lossless) | Chrome (experimental), Firefox (experimental) | Not recommended (limited support) |
| JPEG/PNG | Baseline | Moderate to High | All browsers | Final fallback |
Why Stick to Two Formats: AVIF + WebP?
Recommendation: Use AVIF as the primary format and WebP as the fallback. This combination covers 99% of modern browsers while maximizing compression and quality.
Reasons:
- AVIF offers the best compression (~50% smaller than WebP) and is supported by Chrome, Firefox, Edge, and Opera.
- WebP is universally supported by all modern browsers, including Safari ≥ 14.
- JPEG XL has limited browser support and is not yet practical for production use.
- JPEG/PNG acts as a final fallback for legacy browsers.
Configuring Gumlet CDN
Gumlet CDN automatically handles format conversion and delivery based on the browser's Accept header. However, you can explicitly control the output using URL parameters or HTML.
1. Hotlinking with Gumlet
Hotlinking via Gumlet (e.g., mydomain.gumlet.io/image/myimage.jpg) works seamlessly. Gumlet will serve the optimal format (AVIF or WebP) if the browser supports it.
Note: No additional configuration is required. Gumlet automatically detects the browser's capabilities and serves the best format.
2.Explicit Format Selection
You can force a specific format by appending a URL parameter:
https://mydomain.gumlet.io/image/myimage.jpg?format=avif
https://mydomain.gumlet.io/image/myimage.jpg?format=webp
3. Quality Settings
Adjust the quality of the output image using the quality parameter (1-100):
https://mydomain.gumlet.io/image/myimage.jpg?quality=80
Note: Lower values reduce file size but may impact quality. For AVIF/WebP, a quality of 70-85 is often a good balance.
4. DPR (Device Pixel Ratio)
Serve higher-resolution images for high-DPI (Retina) displays using the dpr parameter:
https://mydomain.gumlet.io/image/myimage.jpg?dpr=2
This delivers an image at 2x the resolution for Retina screens.
5. Watermark (Optional)
Add a watermark to your images using Gumlet's watermark parameter.
Example:https://mydomain.gumlet.io/image/myimage.jpg?watermark=text:YourWatermark,position:southeast,opacity:50
Note: Replace YourWatermark with your text or use an image URL for a logo watermark.
6. Border and Padding
Add a border or padding to your images using CSS or Gumlet's border parameter (if supported). For CSS:
img { border: 1px solid #ddd; padding: 5px; background: white; }
HTML Implementation
Below are code snippets for implementing AVIF + WebP with fallbacks in HTML.
Option 1: Let Gumlet Auto-Negotiate (Recommended)
Use a single <img> tag. Gumlet will serve AVIF or WebP based on the browser's Accept header.
<img src="https://mydomain.gumlet.io/image/myimage.jpg" alt="Description" loading="lazy" width="800" height="600">
Option 2:
Explicit <picture> Element
Use the
Option 3: Responsive Images with DPR
Serve different resolutions based on the device's DPR (Device Pixel Ratio).
<img src="https://mydomain.gumlet.io/image/myimage.jpg?dpr=1" srcset=" https://mydomain.gumlet.io/image/myimage.jpg?dpr=1 1x, https://mydomain.gumlet.io/image/myimage.jpg?dpr=2 2x" alt="Description" loading="lazy" width="800" height="600">
Testing and Verification
To ensure Gumlet is serving the correct formats, follow these steps:
- Open Chrome DevTools (F12) → Network tab.
- Load a page with your Gumlet-hosted image.
image/avif (if AVIF is served). <br>image/webp (if WebP is served). image/jpeg or image/png (if fallback is used).
Alternatively, test specific formats by appending ?format=avif or ?format=webp to the URL.
Final Recommendations: Stick to AVIF (primary) + WebP (fallback). This combination offers the best balance of compression, quality, and browser support.
Key Takeaways:
- Use Gumlet's auto-negotiation for simplicity.
- For explicit control, use the
element with srcset and type attributes. - Set quality to 70-85 for AVIF/WebP to balance file size and visual fidelity.
- Use DPR parameters for Retina displays.
- Add watermarks or borders via URL parameters or CSS.
- Test in Chrome, Firefox, and Safari to ensure compatibility.