สำหรับการแสดงภาพจำนวนมากในเว็บไซต์ แนะนำให้ใช้รูปแบบ WebP เพราะมีการบีบอัดที่ดีกว่า
เราใช้ element <picture> เพื่อให้ fallback สำหรับเบราว์เซอร์ที่ไม่รองรับ:
<picture> <source srcset="filename.webp" type="image/webp"> <source srcset=" filename.jpg" type="image/jpeg"> <img src=" filename.jpg"> </picture>
ตัวอย่างที่ 1: Fallback แบบง่าย
<!DOCTYPE html>
<html>
<head>
<style>
* {
margin: 2%;
}
</style>
</head>
<body>
<picture>
<source srcset="sky.webp">
<img src="sky.jpg" />
</picture>
</body>
</html>
ผลลัพธ์
จะได้ผลลัพธ์ดังนี้:
ตัวอย่างที่ 2: Fallback แบบครบถ้วน
<!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>
ผลลัพธ์
จะได้ผลลัพธ์ดังนี้:
