画像

Parcelは、画像のリサイズ、変換、最適化を組み込みでサポートしています。画像はHTML、CSS、JavaScript、またはその他のファイルタイプから参照できます。

画像のリサイズと変換

Parcelには、画像トランスフォーマーが標準で搭載されています。これにより、画像のリサイズ、別の形式への変換、またはファイルサイズを小さくするための品質調整を行うことができます。これは、画像を参照するときにクエリパラメータを使用するか、設定ファイルを使用することで実行できます。

画像トランスフォーマーは、Sharp画像変換ライブラリに依存しています。これは、必要に応じてプロジェクトに開発依存関係として自動的にインストールされます。

使用できるクエリパラメータは次のとおりです。

width – 画像のリサイズ後の幅
height – 画像のリサイズ後の高さ
quality – 画像の品質の割合（例：?quality=75）
as – 画像の変換先のファイル形式（例：?as=webp）

画像形式

次の画像形式が、入力とasクエリパラメータによる出力の両方でサポートされています。

jpeg / jpg - JPEGは、非常に広くサポートされている非可逆圧縮の画像形式です。多くの場合、写真に使用され、かなり良好な圧縮を提供しますが、透過性または可逆圧縮はサポートしていません。
png - Portable Network Graphics (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}": []
  }
}