資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會科學
時尚研究
法律研究在 CSS 中使用具有備用方案的 WebP 影像
為了在一個網站中呈現大量影像，建議使用 webp 格式，因為它提供了更好的壓縮效果。我們使用 <picture> 元素為不受支援的瀏覽器提供備用方案 −
<picture> <source srcset="filename.webp" type="image/webp"> <source srcset=" filename.jpg" type="image/jpeg"> <img src=" filename.jpg"> </picture>
要設定影像，使用 <source> 元素的 srcset 屬性。<source> 標籤允許使用者為元素（如 <picture>、<video> 等）指定多個媒體資源。
<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" />
使用 <source> 標籤設定備用影像檔案，以便 Web 瀏覽器可以根據瀏覽器的相容性選擇任何一種檔案
以下示例說明了此備用方案。
使用 source 元素
為了放置 WebP 影像和另一種格式的影像，我們在網頁上使用了 <source> 元素 −
<!DOCTYPE html>
<html>
<head>
<style>
* {
margin: 2%;
}
</style>
</head>
<body>
<picture>
<source srcset="https://www.gstatic.com/webp/gallery/1.webp">
<img src="https://www.gstatic.com/webp/gallery/1.sm.jpg" />
</picture>
</body>
</html>
多次使用 source 元素
在此示例中，我們在 <source> 標籤中設定了多個具有不同副檔名的類似影像 −
<!DOCTYPE html>
<html>
<head>
<style>
* {
margin: 10px;
}
</style>
</head>
<body>
<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" />
</picture>
</body>
</html>
更新日期：2023 年 12 月 14 日
571 次檢視
廣告