Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Using WebP Images with Fallback in CSS
WebP is a modern image format that provides superior compression compared to JPEG and PNG. To use WebP images while maintaining compatibility with older browsers, we can implement fallback mechanisms using the <picture> element and CSS.
Syntax
<picture> <source srcset="filename.webp" type="image/webp"> <source srcset="filename.jpg" type="image/jpeg"> <img src="filename.jpg" alt="description"> </picture>
How It Works
The browser evaluates <source> elements in order and uses the first supported format. If WebP is supported, it loads the WebP image; otherwise, it falls back to JPEG or PNG. The <img> element serves as the final fallback.
Example 1: Basic WebP Fallback
This example demonstrates a simple WebP implementation with JPEG fallback −
<!DOCTYPE html>
<html>
<head>
<style>
.image-container {
margin: 20px;
text-align: center;
}
img {
max-width: 300px;
height: auto;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
</style>
</head>
<body>
<div class="image-container">
<h3>WebP with Fallback</h3>
<picture>
<source srcset="https://www.gstatic.com/webp/gallery/1.webp" type="image/webp">
<img src="https://www.gstatic.com/webp/gallery/1.sm.jpg" alt="Gallery image">
</picture>
</div>
</body>
</html>
A styled image with rounded corners and shadow appears. WebP-supporting browsers load the WebP version, while others load the JPEG fallback.
Example 2: Multiple Format Fallback
This example provides multiple fallback options for maximum browser compatibility −
<!DOCTYPE html>
<html>
<head>
<style>
.gallery {
display: flex;
gap: 20px;
justify-content: center;
flex-wrap: wrap;
margin: 20px;
}
.image-card {
background: white;
padding: 10px;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.image-card img {
width: 200px;
height: 150px;
object-fit: cover;
border-radius: 5px;
}
.format-info {
margin-top: 10px;
font-size: 12px;
color: #666;
text-align: center;
}
</style>
</head>
<body>
<div class="gallery">
<div class="image-card">
<picture>
<source srcset="https://www.gstatic.com/webp/gallery/4.sm.webp" type="image/webp">
<source srcset="https://www.gstatic.com/webp/gallery/4.sm.jpg" type="image/jpeg">
<img src="https://www.gstatic.com/webp/gallery/4.sm.jpg" alt="Gallery image 4">
</picture>
<div class="format-info">WebP ? JPEG fallback</div>
</div>
<div class="image-card">
<picture>
<source srcset="https://www.gstatic.com/webp/gallery/5.sm.webp" type="image/webp">
<source srcset="https://www.gstatic.com/webp/gallery/5.sm.jpg" type="image/jpeg">
<img src="https://www.gstatic.com/webp/gallery/5.sm.jpg" alt="Gallery image 5">
</picture>
<div class="format-info">Progressive enhancement</div>
</div>
</div>
</body>
</html>
A responsive gallery with two image cards appears. Each card displays an image with format information below. The browser automatically selects the most appropriate image format.
Key Benefits
Performance: WebP images are typically 25-35% smaller than equivalent JPEG images, resulting in faster page load times and reduced bandwidth usage.
Compatibility: The fallback mechanism ensures your images display correctly across all browsers, including older ones that don't support WebP.
Conclusion
Using WebP images with proper fallbacks is an excellent way to optimize web performance while maintaining broad browser compatibility. The <picture> element provides a clean, semantic solution for progressive image enhancement.
857 Views
