圖片

Parcel 已內建支援調整大小、轉換和最佳化影像。影像可從 HTML、CSS、JavaScript 或任何其他類型的檔案中參照。

調整影像大小和轉換影像

Parcel 預設包含一個影像轉換器，可讓您調整影像大小、將其轉換成不同的格式，或調整品質以縮小檔案大小。這可以使用查詢參數在參照影像時，或使用設定檔案來完成。

影像轉換器依賴於 Sharp 影像轉換函式庫，在需要時會自動安裝為專案的開發階段相依性。

您可以使用的查詢參數為

width – 調整影像大小的寬度
height – 調整影像大小的高度
quality – 您想要的影像品質百分比，例如 ?quality=75
as – 將影像轉換成的檔案格式，例如：?as=webp

影像格式

以下影像格式均支援，作為輸入和透過 as 查詢參數作為輸出

jpeg / jpg - JPEG 是一種廣泛支援的失真影像格式。它通常用於照片，提供相當好的壓縮，但不支援透明度或無失真壓縮。
png - 可攜式網路圖形 (PNG) 是一種無失真影像格式。PNG 通常比 JPEG 或其他失真影像格式大得多，但支援透明度，並提供更高品質的精細細節。
webp – WebP 支援有損和無損壓縮，以及動畫和透明度。它在所有現代瀏覽器中都受支援，並提供比 JPEG 和 PNG 更佳的壓縮品質。
avif – AVIF 是一種新的有損圖像格式，基於 AV1 視訊編解碼器，與 JPEG 和 WebP 相比，它提供了顯著的壓縮和品質改進。它目前在最新版本的 Chrome 和 Firefox 中受支援。

下列格式也支援作為輸入，但通常不受瀏覽器支援：tiff、heic / heif 和 raw。

如果您設定自訂 libvips 建置，GIF 也受支援；然而，由於 GIF 的檔案大小很大，因此不建議使用。改用視訊格式。

如需有關選擇正確圖像格式的更多指引，請參閱 web.dev 上的指南。

JavaScript

如要從 JavaScript 參照圖像，請使用 URL 建構函式。如需更多詳細資訊，請參閱 JavaScript 文件中的 URL 相依性。

main.js

const imageUrl = new URL(
  'image.jpeg?as=webp&width=250',
  import.meta.url
);

HTML

如要從 HTML 參照圖像，請使用 <img> 或 <picture> 元素。相同的圖像可以使用不同的查詢參數參照多次，以建立不同格式或大小的多個版本。如需更多詳細資訊，請參閱 HTML 文件。

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>HTML Example</title>
  </head>
  <body>
    <picture>
      <source srcset="image.jpeg?as=avif&width=800" type="image/avif" />
      <source srcset="image.jpeg?as=webp&width=800" type="image/webp" />
      <source srcset="image.jpeg?width=800" type="image/jpeg" />
      <img src="image.jpeg?width=200" alt="test image" />
    </picture>
  </body>
</html>

設定

除了查詢參數外，Parcel 也支援使用組態檔來定義套用於專案中所有影像的選項。例如，你可以重新編碼所有影像，並使用特定品質設定來縮小檔案大小，或為每個輸出格式定義更進階的選項。

若要設定專案中所有影像的品質，請在專案中建立一個 `sharp.config.json` 檔案，並定義 `quality` 欄位。這將重新編碼每張影像，而不僅僅是使用查詢參數參照的影像。

sharp.config.json

{
  "quality": 80
}

你也可以為每個格式定義更進階的選項。所有在 `sharp.config.json` 中定義選項的格式中的影像都將重新編碼。請參閱這裡的完整支援選項清單。

sharp.config.json

{
  "jpeg": {
    "quality": 75,
    "chromaSubsampling": "4:4:4"
  },
  "webp": {
    "nearLossless": true
  },
  "png": {
    "palette": true
  }
}

影像最佳化

Parcel 也在生產模式中預設包含 JPEG 和 PNG 的無損影像最佳化，這會在不影響影像品質的情況下縮小影像大小。這不需要任何查詢參數或組態即可使用。然而，由於最佳化是無損的，因此大小縮減的可能性可能小於使用 `quality` 查詢參數，或使用 WebP 或 AVIF 等現代格式。

停用影像最佳化

若要在生產模式中停用 JPEG 和 PNG 的預設影像最佳化，請將下列內容新增至你的 .parcelrc 組態檔

.parcelrc

{
  "extends": "@parcel/config-default",
  "optimizers": {
    "*.{jpg,jpeg,png}": []
  }
}