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