響應式圖片的概念

響應式圖片是一種能夠根據不同設備和視窗大小自動調整大小的圖片，這樣可以保證圖片在不同的屏幕上呈現良好的效果，提升用戶體驗。

為什麼需要響應式圖片？

1. 不同設備分辨率：圖片在手機、平板和桌面設備上的呈現效果會有所不同。
2. 性能考量：不同設備需要不同尺寸的圖片來減少不必要的數據傳輸。
3. 視網膜顯示屏：高分辨率設備需要更高質量的圖片以確保清晰度。

基本實現方法

使用 img 元素的 srcset 屬性

srcset 提供了不同解析度的圖片，瀏覽器會根據設備的顯示分辨率選擇合適的圖片。

<img src="image-400w.jpg" 
     srcset="image-400w.jpg 400w, image-800w.jpg 800w" 
     sizes="(max-width: 600px) 400px, 800px" 
     alt="Example of a responsive image">

• srcset：提供不同寬度的圖片。這裡的 400w 和 800w 是圖片的寬度（單位為像素）。
• sizes：定義圖片顯示的寬度，這裡當視窗寬度小於 600px 時，使用 400px 寬度的圖片，否則使用 800px 寬度。

使用 <picture> 元素

<picture> 元素可以根據不同條件（例如屏幕寬度或媒體類型）選擇不同的圖片資源。

<picture>
  <source srcset="image-small.jpg" media="(max-width: 600px)">
  <source srcset="image-large.jpg" media="(min-width: 601px)">
  <img src="image-default.jpg" alt="Responsive image using picture element">
</picture>

• <source>：可以定義不同的圖片資源，並通過 media 屬性來設置響應條件。
• <img>：作為預設圖片，當所有條件都不滿足時加載。

CSS 的背景圖片與媒體查詢

當圖片作為背景圖使用時，可以使用 CSS 的媒體查詢實現響應式設計。

body {
  background-image: url('image-large.jpg');
}

@media (max-width: 600px) {
  body {
    background-image: url('image-small.jpg');
  }
}

視窗大小調整的實現

使用 max-width 實現圖片自適應

可以通過設置圖片的 max-width 來讓圖片隨著視窗大小進行縮放：

img {
  max-width: 100%;
  height: auto;
}

這樣，圖片的寬度不會超過其父容器的寬度，並且高度自動調整，保持圖片的比例。

CSS Grid 和 Flexbox 的結合

可以使用 CSS Grid 或 Flexbox 布局來實現圖片的自適應排列：

.container {
  display: flex;
  flex-wrap: wrap;
}

.container img {
  flex: 1 1 300px; /* 每張圖片最小寬度為 300px */
  max-width: 100%;
  height: auto;
}

進階技巧:

Art Direction

在不同設備上展示不同的圖片版本來達到最佳視覺效果，例如在手機上展示簡單的圖片，桌面上展示更複雜的圖片。

<picture>
  <source media="(max-width: 600px)" srcset="simple-mobile-image.jpg">
  <source media="(min-width: 601px)" srcset="complex-desktop-image.jpg">
  <img src="fallback-image.jpg" alt="Art direction example">
</picture>

Lazy Loading (延遲加載)

為了提升頁面加載速度，可以延遲加載不在可視範圍內的圖片：

<img src="image.jpg" loading="lazy" alt="Lazy loaded image">

• loading="lazy"：當圖片即將進入視窗時才進行加載，減少不必要的流量浪費。