Giới thiệu
Để hiển thị số lượng lớn hình ảnh trên website, khuyến khích sử dụng định dạng WebP vì nó cung cấp độ nén tốt hơn.
Chúng ta sử dụng thẻ <picture> để cung cấp fallback cho các trình duyệt không hỗ trợ:
<picture> <source srcset="filename.webp" type="image/webp"> <source srcset="filename.jpg" type="image/jpeg"> <img src="filename.jpg"> </picture>
Ví dụ 1: Fallback cơ bản
<!DOCTYPE html>
<html>
<head>
<style>
* {
margin: 2%;
}
</style>
</head>
<body>
<picture>
<source srcset="sky.webp">
<img src="sky.jpg" />
</picture>
</body>
</html>
Kết quả
Đoạn mã trên sẽ cho kết quả sau:
Ví dụ 2: Nhiều source với type
<!DOCTYPE html>
<html>
<head>
<style>
* {
margin: 10px;
}
</style>
</head>
<body>
<picture>
<source srcset="tree.webp" type="image/webp" />
<source srcset="tree.jpg" type="image/jpeg" />
<img src="tree.jpg" />
</picture>
</body>
</html>
Kết quả
Đoạn mã trên sẽ cho kết quả sau:
