DEV Community

Hardi
Hardi

Posted on

Progressive Enhancement with Modern Image Formats: A Practical Guide

#webdev #programming #javascript #beginners

Modern image formats like WebP and AVIF can reduce file sizes by 30-50% compared to traditional JPEG and PNG. But with great compression comes great responsibility—not all browsers support these formats yet. This is where progressive enhancement shines, allowing us to serve cutting-edge formats to capable browsers while maintaining universal compatibility.

Let's explore how to implement robust progressive enhancement strategies that deliver optimal performance without breaking the experience for any user.

Understanding Browser Support Landscape

Before diving into implementation, let's understand the current browser support:

  • WebP: 96% global support (all modern browsers)
  • AVIF: 85% global support (Chrome 85+, Firefox 93+, Safari 16+)
  • JPEG XL: <5% support (experimental in Chrome) 
// Feature detection for modern formats const imageSupport = { webp: await checkFormat('webp'), avif: await checkFormat('avif'), jpegxl: await checkFormat('jxl') }; function checkFormat(format) { return new Promise((resolve) => { const img = new Image(); img.onload = () => resolve(true); img.onerror = () => resolve(false); img.src = `data:image/${format};base64,UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA==`; }); }
Enter fullscreen mode Exit fullscreen mode

The Picture Element: Your Best Friend

The HTML <picture> element is the foundation of progressive enhancement for images. It allows browsers to choose the most appropriate source based on format support and other conditions.

Basic Progressive Enhancement Pattern 

<picture> <!-- Most modern format first --> <source srcset="hero.avif" type="image/avif"> <!-- Widely supported modern format --> <source srcset="hero.webp" type="image/webp"> <!-- Universal fallback --> <img src="hero.jpg" alt="Hero image" loading="lazy"> </picture>
Enter fullscreen mode Exit fullscreen mode

The browser evaluates sources in order and uses the first one it supports. If <picture> isn't supported, it falls back to the <img> element.

Adding Responsive Images

Combine format selection with responsive images for maximum optimization:

<picture> <!-- AVIF with responsive sizes --> <source srcset="hero-400.avif 400w, hero-800.avif 800w, hero-1200.avif 1200w, hero-1600.avif 1600w" sizes="(max-width: 480px) 100vw, (max-width: 768px) 90vw, (max-width: 1200px) 80vw, 70vw" type="image/avif"> <!-- WebP with same responsive sizes --> <source srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1200.webp 1200w, hero-1600.webp 1600w" sizes="(max-width: 480px) 100vw, (max-width: 768px) 90vw, (max-width: 1200px) 80vw, 70vw" type="image/webp"> <!-- JPEG fallback --> <img src="hero-800.jpg" srcset="hero-400.jpg 400w, hero-800.jpg 800w, hero-1200.jpg 1200w, hero-1600.jpg 1600w" sizes="(max-width: 480px) 100vw, (max-width: 768px) 90vw, (max-width: 1200px) 80vw, 70vw" alt="Hero image" loading="lazy"> </picture>
Enter fullscreen mode Exit fullscreen mode

Server-Side Format Detection

For more control, implement server-side format detection using the Accept header:

// Express.js middleware for format detection function detectImageFormat(req, res, next) { const accept = req.headers.accept || ''; if (accept.includes('image/avif')) { req.preferredFormat = 'avif'; } else if (accept.includes('image/webp')) { req.preferredFormat = 'webp'; } else { req.preferredFormat = 'jpeg'; } next(); } // Route handler app.get('/images/:filename', detectImageFormat, (req, res) => { const { filename } = req.params; const { preferredFormat } = req; const imagePath = `./images/${filename}.${preferredFormat}`; // Check if preferred format exists, fallback if not if (fs.existsSync(imagePath)) { res.sendFile(imagePath); } else { res.sendFile(`./images/${filename}.jpg`); } });
Enter fullscreen mode Exit fullscreen mode

JavaScript-Based Progressive Enhancement

For dynamic content or when you need more control, use JavaScript:

class ImageLoader { constructor() { this.formatSupport = { avif: false, webp: false }; this.init(); } async init() { // Test format support this.formatSupport.avif = await this.testFormat('avif'); this.formatSupport.webp = await this.testFormat('webp'); // Process existing images this.processImages(); } async testFormat(format) { return new Promise((resolve) => { const img = new Image(); img.onload = () => resolve(true); img.onerror = () => resolve(false); // Test images for different formats const testImages = { avif: 'data:image/avif;base64,AAAAIGZ0eXBhdmlmAAAAAGF2aWZtaWYxbWlhZk1BMUIAAADybWV0YQAAAAAAAAAoaGRscgAAAAAAAAAAcGljdAAAAAAAAAAAAAAAAGxpYmF2aWYAAAAADnBpdG0AAAAAAAEAAAAeaWxvYwAAAABEAAABAAEAAAABAAABGgAAAB0AAAAoaWluZgAAAAAAAQAAABppbmZlAgAAAAABAABhdjAxQ29sb3IAAAAAamlwcnAAAABLaXBjbwAAABRpc3BlAAAAAAAAAAIAAAACAAAAEHBpeGkAAAAAAwgICAAAAAxhdjFDgQ0MAAAAABNjb2xybmNseAACAAIAAYAAAAAXaXBtYQAAAAAAAAABAAEEAQKDBAAAACVtZGF0EgAKCBgABogQEAwgMg8f8D///8WfhwB8+ErK42A=', webp: 'data:image/webp;base64,UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA==' }; img.src = testImages[format]; }); } processImages() { const images = document.querySelectorAll('img[data-src]'); images.forEach(img => this.loadOptimalImage(img)); } loadOptimalImage(img) { const baseSrc = img.dataset.src; let optimalSrc = baseSrc; // Choose best format based on support if (this.formatSupport.avif && img.dataset.avif) { optimalSrc = img.dataset.avif; } else if (this.formatSupport.webp && img.dataset.webp) { optimalSrc = img.dataset.webp; } // Load with error handling const tempImg = new Image(); tempImg.onload = () => { img.src = optimalSrc; img.classList.add('loaded'); }; tempImg.onerror = () => { img.src = baseSrc; // Fallback to original img.classList.add('loaded'); }; tempImg.src = optimalSrc; } } // Initialize when DOM is ready document.addEventListener('DOMContentLoaded', () => { new ImageLoader(); });
Enter fullscreen mode Exit fullscreen mode

CSS Background Images with Progressive Enhancement

Background images require a different approach since they can't use the <picture> element:

/* Default background image */ .hero-bg { background-image: url('hero.jpg'); } /* WebP support */ .webp .hero-bg { background-image: url('hero.webp'); } /* AVIF support */ .avif .hero-bg { background-image: url('hero.avif'); }
Enter fullscreen mode Exit fullscreen mode 
// Add format support classes to document async function addFormatClasses() { const formats = ['avif', 'webp']; for (const format of formats) { const supported = await checkFormat(format); if (supported) { document.documentElement.classList.add(format); } } } addFormatClasses();
Enter fullscreen mode Exit fullscreen mode

Build Process Integration

Automate format generation and serving with build tools:

// Webpack plugin for automatic format generation const ImageminPlugin = require('imagemin-webpack-plugin').default; const imageminWebp = require('imagemin-webp'); const imageminAvif = require('imagemin-avif'); module.exports = { plugins: [ new ImageminPlugin({ plugins: [ // Generate WebP versions imageminWebp({ quality: 80 }), // Generate AVIF versions  imageminAvif({ quality: 60 }) ] }) ] };
Enter fullscreen mode Exit fullscreen mode

Performance Monitoring and Optimization

Track the effectiveness of your progressive enhancement:

// Monitor format adoption function trackImageFormats() { const images = document.querySelectorAll('img'); const formatCounts = {}; images.forEach(img => { const src = img.currentSrc || img.src; const format = src.split('.').pop().toLowerCase(); formatCounts[format] = (formatCounts[format] || 0) + 1; }); // Send analytics analytics.track('image_formats_used', formatCounts); } // Monitor loading performance function trackImagePerformance() { const observer = new PerformanceObserver((list) => { list.getEntries().forEach((entry) => { if (entry.initiatorType === 'img') { analytics.track('image_load_time', { duration: entry.duration, size: entry.transferSize, format: entry.name.split('.').pop() }); } }); }); observer.observe({ entryTypes: ['resource'] }); }
Enter fullscreen mode Exit fullscreen mode

Testing and Validation

When implementing progressive enhancement, thorough testing is crucial. I often use online conversion tools like ConverterToolsKit to generate test images in different formats, ensuring consistent quality across all variations before deployment.

Browser Testing Strategy 

// Automated testing for different format scenarios const testScenarios = [ { formats: ['avif', 'webp', 'jpeg'], expected: 'avif' }, { formats: ['webp', 'jpeg'], expected: 'webp' }, { formats: ['jpeg'], expected: 'jpeg' } ]; testScenarios.forEach(scenario => { test(`Format selection: ${scenario.formats.join(', ')}`, () => { const result = selectOptimalFormat(scenario.formats); expect(result).toBe(scenario.expected); }); });
Enter fullscreen mode Exit fullscreen mode

Common Pitfalls and Solutions

Pitfall 1: Inconsistent Quality Settings

Different formats require different quality settings for similar visual results:

const qualitySettings = { jpeg: 85, webp: 80, // WebP can achieve similar quality at lower settings avif: 65 // AVIF is even more efficient };
Enter fullscreen mode Exit fullscreen mode

Pitfall 2: Forgetting Art Direction

When cropping differs between formats, use media queries:

<picture> <source media="(max-width: 768px)" srcset="mobile.avif" type="image/avif"> <source media="(max-width: 768px)" srcset="mobile.webp" type="image/webp"> <source media="(max-width: 768px)" srcset="mobile.jpg"> <source srcset="desktop.avif" type="image/avif"> <source srcset="desktop.webp" type="image/webp"> <img src="desktop.jpg" alt="Responsive image"> </picture>
Enter fullscreen mode Exit fullscreen mode

Pitfall 3: Not Handling Errors Gracefully

Always provide fallbacks:

// Handle format detection errors async function safeFormatCheck(format) { try { return await checkFormat(format); } catch (error) { console.warn(`Format check failed for ${format}:`, error); return false; } }
Enter fullscreen mode Exit fullscreen mode

Advanced Techniques

Lazy Loading with Format Selection 

const lazyImages = document.querySelectorAll('img[data-src]'); const imageObserver = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { const img = entry.target; loadOptimalImage(img); imageObserver.unobserve(img); } }); }); lazyImages.forEach(img => imageObserver.observe(img));
Enter fullscreen mode Exit fullscreen mode

Service Worker Caching Strategy 

// Cache different formats appropriately self.addEventListener('fetch', event => { if (event.request.destination === 'image') { event.respondWith( caches.match(event.request).then(response => { if (response) return response; // Try to serve optimal format return fetch(getOptimalImageUrl(event.request.url)) .then(response => { if (response.status === 200) { const responseClone = response.clone(); caches.open('images').then(cache => { cache.put(event.request, responseClone); }); } return response; }); }) ); } });
Enter fullscreen mode Exit fullscreen mode

Future-Proofing Your Implementation

As new formats emerge (JPEG XL, HEIF), your progressive enhancement strategy should be easily extensible:

// Extensible format support system class ImageFormatManager { constructor() { this.formats = new Map([ ['avif', { priority: 1, test: 'data:image/avif;base64,...' }], ['webp', { priority: 2, test: 'data:image/webp;base64,...' }], ['jpeg', { priority: 3, test: null }] // Always supported ]); } async getSupportedFormats() { const supported = []; for (const [format, config] of this.formats) { if (!config.test || await this.testFormat(config.test)) { supported.push({ format, priority: config.priority }); } } return supported.sort((a, b) => a.priority - b.priority); } addFormat(format, priority, testData) { this.formats.set(format, { priority, test: testData }); } }
Enter fullscreen mode Exit fullscreen mode

Conclusion

Progressive enhancement with modern image formats is not just about serving smaller files—it's about creating resilient, performant experiences that work everywhere while taking advantage of modern capabilities where available.

Key principles to remember:

  • Always provide fallbacks for maximum compatibility
  • Test thoroughly across different browsers and devices
  • Monitor performance to validate your optimization efforts
  • Keep it maintainable with automated build processes
  • Plan for the future with extensible implementations

The web is evolving rapidly, and image formats are no exception. By implementing robust progressive enhancement strategies today, you're not just optimizing for current browsers—you're building a foundation that will seamlessly adopt future innovations.

Remember: the goal isn't to use the newest technology everywhere, but to provide the best possible experience for each user's capabilities.

What challenges have you faced implementing modern image formats? Have you found any creative solutions for progressive enhancement? Share your experiences in the comments!

Top comments (0)