跳至主要內容

最佳實務

圖片

在 GitHub 上編輯此頁面

圖片會對應用程式的效能產生重大影響。若要獲得最佳結果，您應該透過執行下列動作來最佳化圖片

  • 產生最佳格式，例如 .avif 和 .webp
  • 針對不同螢幕建立不同大小
  • 確保可以有效快取資產

手動執行此作業很繁瑣。您可以使用各種技術，視您的需求和偏好而定。

Vite 內建處理

Vite 會自動處理匯入的資產以提升效能。這包括透過 CSS url() 函數參照的資產。雜湊值會新增到檔案名稱，以便快取，而小於 assetsInlineLimit 的資產會內嵌。Vite 的資產處理最常使用於圖片，但對影片、音訊等也有用。

<script>
	import logo from '$lib/assets/logo.png';
</script>

<img alt="The project logo" src={logo} />

@sveltejs/enhanced-img

@sveltejs/enhanced-img 是在 Vite 內建資產處理之上提供的外掛程式。它提供即插即用的影像處理，提供較小的檔案格式，例如 avif 或 webp，自動設定影像的內在 width 和 height 以避免版面位移，為各種裝置建立多種尺寸的影像，並移除 EXIF 資料以保護隱私。它可以在任何基於 Vite 的專案中運作，包括但不限於 SvelteKit 專案。

作為一個建置外掛程式，@sveltejs/enhanced-img 只能在建置過程中最佳化電腦上的檔案。如果你有位於其他地方的影像（例如從資料庫、CMS 或後端提供的路徑），請閱讀有關 從 CDN 動態載入影像 的資訊。

警告：@sveltejs/enhanced-img 套件為實驗性質。它使用 1.0 之前的版本，並可能在每個次要版本發布時引入重大變更。

設定

安裝

npm install --save-dev @sveltejs/enhanced-img

調整 vite.config.js

import { sveltekit } from '@sveltejs/kit/vite';
import { enhancedImages } from '@sveltejs/enhanced-img';
import { defineConfig } from 'vite';

export default defineConfig({
	plugins: [
		enhancedImages(),
		sveltekit()
	]
});

由於轉換影像的運算成本，第一次建置會花費較長的時間。不過，建置輸出會快取在 ./node_modules/.cache/imagetools，因此後續的建置會很快。

基本用法

在 .svelte 元件中使用，使用 <enhanced:img> 而不是 <img>，並使用 Vite 資產匯入 路徑參照影像檔案

<enhanced:img src="./path/to/your/image.jpg" alt="An alt text" />

在建置時，你的 <enhanced:img> 標籤將會被一個 <img> 取代，並由一個 <picture> 包裹，提供多種影像類型和尺寸。只能在不損失品質的情況下縮小影像，這表示你應該提供你需要的最高解析度影像，系統會為可能要求影像的各種裝置類型產生較小的版本。

你應該以 2 倍解析度提供你的影像，以供 HiDPI 顯示器（又稱視網膜顯示器）使用。<enhanced:img> 會自動處理提供較小版本給較小裝置。

如果你想要為 <enhanced:img> 新增樣式，你應該新增一個 class 並針對它設定目標。

動態選擇影像

你也可以手動匯入影像資產並傳遞給 <enhanced:img>。當你有一組靜態影像，並想要動態選擇其中一個或 反覆處理它們 時，這會很有用。在這種情況下，你需要更新 import 陳述式和 <img> 元素，如下所示，以表示你想要處理它們。

<script>
	import MyImage from './path/to/your/image.jpg?enhanced';
</script>

<enhanced:img src={MyImage} alt="Some alt text" />

你也可以使用 Vite 的 import.meta.glob。請注意，你必須透過 自訂查詢 來指定 enhanced

ts
const pictures = import.meta.glob(
	'/path/to/assets/*.{avif,gif,heif,jpeg,jpg,png,tiff,webp}',
	{
		query: {
			enhanced: true
		}
	}
);

內在尺寸

width 和 height 是可選的，因為它們可以從原始影像推論出來，而且當 <enhanced:img> 標籤預處理時會自動加入。有了這些屬性，瀏覽器就能保留正確的空間量，防止 版面變動。如果你想使用不同的 width 和 height，你可以用 CSS 設定影像樣式。由於預處理器會幫你加入 width 和 height，如果你想讓其中一個尺寸自動計算，則需要指定

<style>
	.hero-image img {
		width: var(--size);
		height: auto;
	}
</style>

srcset 和 sizes

如果你有一個大型影像，例如佔據設計寬度的英雄影像，你應該指定 sizes，以便在較小的裝置上要求較小的版本。例如，如果你有一個 1280px 的影像，你可能想指定類似以下的內容

<enhanced:img src="./image.png" sizes="min(1280px, 100vw)"/>

如果指定了 sizes，<enhanced:img> 會為較小的裝置產生較小的影像，並填入 srcset 屬性。

自動產生的最小圖片寬度為 540px。如果你想要更小的圖片或想指定自訂寬度，你可以使用 w 查詢參數來執行此操作

<enhanced:img
  src="./image.png?w=1280;640;400"
  sizes="(min-width:1920px) 1280px, (min-width:1080px) 640px, (min-width:768px) 400px"
/>

如果沒有提供 sizes，則會產生 HiDPI/Retina 影像和標準解析度影像。你提供的影像應為你希望顯示解析度的 2 倍，以便瀏覽器可以在具有高 裝置像素比 的裝置上顯示該影像。

逐影像轉換

預設情況下，增強的影像會轉換為更有效率的格式。但是，你可能想套用其他轉換，例如模糊、品質、壓扁或旋轉操作。你可以附加查詢字串來執行逐影像轉換

<enhanced:img src="./path/to/your/image.jpg?blur=15" alt="An alt text" />

請參閱 imagetools 儲存庫以取得完整指令清單.

從 CDN 動態載入影像

在某些情況下，影像在建置時可能無法存取，例如，它們可能存在於內容管理系統或其他地方。

使用內容傳遞網路 (CDN) 可以讓您動態最佳化這些影像，並在尺寸方面提供更多彈性，但可能需要一些設定開銷和使用成本。視快取策略而定，瀏覽器可能無法使用快取的資源副本，直到從 CDN 收到 304 回應 為止。建置目標為 CDN 的 HTML 可以使用 <img> 標籤，因為 CDN 可以根據 User-Agent 標頭提供適當的格式，而建置時間最佳化必須產生具有多個來源的 <picture> 標籤。最後，有些 CDN 可能會延遲產生影像，這可能會對流量低且影像頻繁變更的網站造成負面的效能影響。

一般來說，CDN 可以不用任何函式庫就使用。不過，有許多支援 Svelte 的函式庫可以簡化使用。@unpic/svelte 是與 CDN 無關的函式庫，支援大量的供應商。您可能會發現像 Cloudinary 等特定的 CDN 支援 Svelte。最後，有些支援 Svelte 的內容管理系統 (CMS)（例如 Contentful、Storyblok 和 Contentstack）內建支援影像處理。

最佳實務

  • 對於每種類型的影像，請使用上述討論的適當解決方案。您可以在一個專案中混合並搭配所有三種解決方案。例如，您可以使用 Vite 的內建處理功能為 <meta> 標籤提供影像，使用 @sveltejs/enhanced-img 在您的首頁上顯示影像，並使用動態方法顯示使用者提交的內容。
  • 考慮透過 CDN 提供所有影像，無論您使用哪種類型的影像最佳化。CDN 透過在全球範圍內散布靜態資源副本來降低延遲。
  • 您的原始影像應具有良好的品質/解析度，且寬度應為顯示寬度的 2 倍，以提供 HiDPI 裝置。影像處理可以縮小影像尺寸，以在提供較小螢幕時節省頻寬，但發明像素來放大影像尺寸會浪費頻寬。
  • 對於比行動裝置寬度（約 400 像素）大得多的影像（例如佔據頁面設計寬度的英雄影像），請指定 sizes，以便可以在較小的裝置上提供較小的影像。
  • 對於重要的影像，例如 最大內容繪製 (LCP) 影像，請設定 fetchpriority="high" loading="eager" 以優先盡早載入。
  • 為影像提供容器或樣式，以便加以限制，並在頁面載入時不會跳動，影響您的 累積版面偏移 (CLS)。width 和 height 可在影像載入時協助瀏覽器保留空間，因此 @sveltejs/enhanced-img 會為您加入 width 和 height。
  • 永遠提供良好的 alt 文字。如果您沒有這樣做，Svelte 編譯器會警告您。
  • 請勿在 sizes 中使用 em 或 rem，也不要變更這些測量單位的預設大小。當在 sizes 或 @media 查詢中使用時，em 和 rem 都定義為使用者的預設 font-size。對於像 sizes="(min-width: 768px) min(100vw, 108rem), 64rem" 這樣的 sizes 宣告，如果透過 CSS 變更，控制影像在頁面上配置方式的實際 em 或 rem 可能會有所不同。例如，請勿執行類似 html { font-size: 62.5%; } 的操作，因為瀏覽器預載器保留的插槽現在會比建立 CSS 物件模型後的實際插槽還大。
上一個 效能
下一個 無障礙