Để hiển thị một số lượng lớn hình ảnh trong một trang web, bạn nên sử dụng định dạng webp vì nó cung cấp khả năng nén tốt hơn.
Chúng tôi sử dụng phần tử
<picture> <source srcset="filename.webp" type="image/webp"> <source srcset=" filename.jpg" type="image/jpeg"> <img src=" filename.jpg"> </picture>
Các ví dụ sau minh họa dự phòng này.
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
* {
margin: 2%;
}
</style>
</head>
<body>
<picture>
<source srcset="sky.webp">
<img src="sky.jpg" />
</picture>
</body>
</html> Đầu ra
Điều này sẽ tạo ra kết quả sau -
Ví dụ
<!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> Đầu ra
Điều này sẽ tạo ra kết quả sau -
