Skip to main content

標題：手機版優化圖片載入的正確方法
描述：description: 說明在建置公開知識型網站時，如何避免手機端載入不必要的大圖資源，提升行動版效能體驗。
最後更新：2025-04-29
版本：v1.0
作者：rj0217
來源：COVIA官方知識

RWD模式下優化圖片載入的方法

目標​

  • 防止手機版頁面因載入超大圖片而導致初次畫面渲染（FCP）與最大內容渲染（LCP）時間過長。
  • 減少無謂的流量消耗，提高行動版 PageSpeed 分數與實際瀏覽體驗。
  • 確保桌面版畫面維持高品質大圖展示。

錯誤常見做法（應避免）​

  • 使用 CSS display: none 隱藏圖片：

    • 圖片雖然畫面上不顯示，但瀏覽器依然會下載該資源，無法達到節省流量與加速目的。

  • 在 <picture> 標籤的 srcSet 中設定 none：

    • srcSet 需要提供有效圖片路徑，無效路徑會直接回退至 <img> 的 src，仍然載入大圖。

正確方案一：JavaScript 動態載入圖片（推薦）​

透過判斷瀏覽器螢幕寬度，只在桌面裝置上動態插入圖片元素。

範例（以 React 框架為例）：

import { useEffect, useState } from 'react';

export default function Home() {
  const [showImage, setShowImage] = useState(false);

  useEffect(() => {
    if (window.innerWidth > 768) {
      setShowImage(true);
    }
  }, []);

  return (
    <div className="rwd-bg">
      {showImage && (
        <img
          src="/img/example.webp"
          alt="智慧的使者化身"
          style={{ width: '100%' }}
          loading="lazy"
        />
      )}
    </div>
  );
}

說明：

  • 手機版畫面不會載入 <img> 元素，因此完全不會請求超大圖片資源。
  • 桌面版畫面正常載入並顯示圖片。

注意：

  • 手機版建議設定背景色，避免版面空白。

正確方案二：使用 <picture> 自適應圖片（進階選擇）​

若希望手機版仍顯示縮小版圖片，可使用 <picture> 元素依照裝置解析度載入不同尺寸圖片。

範例：

<picture>
  <source media="(max-width: 768px)" srcset="/img/example-small.webp" />
  <source media="(min-width: 769px)" srcset="/img/example.webp" />
  <img
    src="/img/example.webp"
    alt="智慧的使者化身"
    style="width: 100%;"
    loading="lazy"
  />
</picture>

說明：

  • 手機版載入經過壓縮的小尺寸圖片。
  • 桌面版載入高清大圖。
  • 無需額外 JavaScript，瀏覽器原生自動選擇適合的資源。

注意：

  • 必須預先準備小尺寸版本的圖片。
  • 若目的是完全不載入圖片，仍應使用 JavaScript 動態控制。

總結​

需求情境推薦方案
手機版完全不載入圖片JavaScript 動態插入 <img>
手機版載入縮小版圖片，桌面版載入大圖<picture> 元素條件切換

根據實際網站設計目標與受眾裝置情境，選擇最合適的方法，才能在維持良好視覺體驗的同時，確保行動端效能最佳化。