RWD 網頁設計（十）：圖片與多媒體優化

2025年4月15日 rwdweb

前言

圖片和多媒體是現代網站不可或缺的元素。要讓網站在各種裝置下都能快速載入、顯示清晰，同時又不拖慢速度，進階的圖片與多媒體優化技巧就變得非常重要。本章將介紹如何讓你的圖片、影音內容更適合 RWD，提升整體用戶體驗。

一、圖片自適應與裁切

1. object-fit、object-position、背景圖片 RWD

有時候圖片比例與容器不一致，這時可以用 object-fit 讓圖片自動裁切、填滿：

.banner-img {
 width: 100%;
 height: 200px;
 object-fit: cover;
 object-position: center;
}

背景圖片也可以用 background-size、background-position 做 RWD：

.hero {
 background-image: url('banner.jpg');
 background-size: cover;
 background-position: center;
}

二、新圖片格式應用

1. WebP、SVG 等新格式

WebP：體積小、畫質佳，支援透明與動畫，現代瀏覽器皆支援。
SVG：向量圖，無論放大縮小都不失真，適合 icon、logo。

2. 各種圖片格式優缺點

格式	優點	缺點	適用情境
JPG	體積小、相容性高	不支援透明	照片、背景
PNG	支援透明	檔案較大	圖標、logo
WebP	體積最小、畫質佳	舊瀏覽器不支援	大多數圖片
SVG	無損縮放	複雜圖形體積大	icon、logo

三、懶加載與多解析度圖片

1. loading=“lazy”、srcset、sizes

讓圖片等到快進入視窗時才載入，提升頁面速度：

<img src="photo.jpg" loading="lazy" alt="風景照">

用 srcset、sizes 提供多種解析度圖片，讓瀏覽器自動選擇最適合的版本：

<img
 src="photo-800.jpg"
 srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1600.jpg 1600w"
 sizes="(max-width: 600px) 100vw, 50vw"
 alt="風景照">

四、SVG 響應式縮放與應用

SVG 圖示可隨螢幕大小自動縮放，且支援 CSS 動畫。

<svg width="100" height="100" viewBox="0 0 100 100">
 <circle cx="50" cy="50" r="40" fill="#0080ff" />
</svg>

svg {
 width: 50vw;
 height: auto;
}

五、音訊、影片自適應設計

1. 音訊/影片播放器的 RWD 技巧

<video controls width="100%" poster="cover.jpg">
 <source src="movie.mp4" type="video/mp4">
 <source src="movie.webm" type="video/webm">
 您的瀏覽器不支援影片播放。
</video>

搭配 CSS 讓播放器自適應寬度：

video, audio {
 max-width: 100%;
 height: auto;
 display: block;
}

2. 自適應影片區塊與字幕

<video controls width="100%">
 <source src="movie.mp4" type="video/mp4">
 <track kind="subtitles" src="subtitle.vtt" srclang="zh" label="中文">
</video>