WebP

画像スタイルの派生画像からWebPコピーを生成し、対応ブラウザに小さく最適化された画像を配信することでページ読み込み時間を短縮します。

webp
24,814 sites
105
drupal.org
gui api utility
image webp performance optimization responsive images media compression

概要

WebPモジュールは、画像スタイルの派生画像が生成されるたびに、自動的にWebPコピーを作成します。WebPはGoogleが開発した最新の画像フォーマットで、Web上の画像に対して優れた可逆・非可逆圧縮を提供します。

DrupalのResponsive Imageモジュールと統合すると、このモジュールはpictureタグにWebPソース要素を追加し、WebPをサポートするブラウザは小さいWebPバージョンを読み込み、サポートしていないブラウザ（古いSafariバージョンなど）は標準フォーマット（JPEG、PNG）にフォールバックできます。

このモジュールは画像処理にGDとImageMagickの両方のツールキットをサポートし、サーバーで利用可能なものを自動検出します。また、より高度な画像最適化ワークフローのためにImage API Optimizeモジュールとのオプション統合も提供します。

Features

  • すべての画像スタイル派生画像のWebPコピーを自動生成
  • Drupal CoreのResponsive Imageモジュールと統合し、picture要素にWebPソースを追加
  • WebP変換にGDライブラリとImageMagickの両方をサポート
  • 画像品質設定（1-100）が設定可能
  • Acceptヘッダー検出により、WebPを受け入れるブラウザに自動的にWebP画像を配信
  • 画像フィールドを持つEntityが更新された際に古いWebP派生画像をフラッシュ
  • Image API Optimizeモジュールとのオプション統合（プロセッサPluginとして）
  • パブリックファイルシステムとプライベートファイルシステムの両方で動作
  • JPEG、JPG、PNGを含む様々なソースフォーマットを処理

Use Cases

ページ読み込みパフォーマンスの向上

多くの画像を含むコンテンツの多いWebサイトは、WebPモジュールを有効にすることでページ読み込み時間を大幅に短縮できます。WebP画像は通常、同等の品質で比較可能なJPEGまたはPNG画像より25-35%小さくなります。このモジュールはWebPをサポートするブラウザに自動的にWebPを配信しながら、古いブラウザとの互換性を維持します。

レスポンシブ画像ギャラリー

DrupalのResponsive Imageモジュールを使用して異なる画面サイズに適切なサイズの画像を配信しているサイトでは、WebPモジュールが追加の最適化レイヤーを提供します。各レスポンシブ画像バリアントに対応するWebPバージョンが作成され、ブラウザは最適なフォーマットとサイズの組み合わせを選択します。

最適化された画像を持つプライベートファイルシステム

Drupalのプライベートファイルシステムを通じて画像を配信しているサイトでも、WebP最適化の恩恵を受けることができます。このモジュールはファイルダウンロードコントローラをオーバーライドし、ブラウザがリクエストした際にオンデマンドでWebPバージョンを生成して配信します。

画像最適化パイプライン

Image API Optimizeモジュールを使用しているサイトでは、WebP変換を圧縮やリサイズなどの他の最適化と一緒に最適化パイプラインのプロセッサとして追加できます。これにより、WebP画像がいつどのように生成されるかを細かく制御できます。

Tips

  • デフォルトの品質75は、ファイルサイズと視覚的品質の良いバランスを提供します。低い値は小さいファイルを生成しますが、圧縮アーティファクトが見える場合があります。
  • Image API Optimizeと一緒に使用する場合、プロセッサの品質設定（デフォルト100）がモジュールのグローバル品質設定より優先されます。
  • WebP画像は元の派生画像と一緒に.webp拡張子で保存されるため、元の画像は置き換えられません。
  • このモジュールは大文字の拡張子（.JPG、.PNG）を自動的に処理し、正しくWebPに変換します。
  • 開発時に、どの画像がWebPとして配信されているかを確認するには、ブラウザの開発者ツールでContent-Typeヘッダーを確認してください - 'image/webp'と表示されるはずです。

Technical Details

Admin Pages 1
WebP設定 /admin/config/media/webp/settings

変換画像の品質レベルを含むWebP画像生成設定を構成します。

Hooks 4
hook_help

ヘルプページでWebPモジュールのヘルプテキストを提供します

hook_entity_insert

画像フィールドを持つ新しいEntityが作成された際にWebP派生画像をフラッシュし、新しいWebPコピーが生成されるようにします

hook_entity_update

画像フィールドを持つEntityが更新された際にWebP派生画像をフラッシュし、古いWebPコピーを削除します

template_preprocess_responsive_image

レスポンシブ画像テンプレートを前処理してソース配列の先頭にWebPソース要素を追加し、ブラウザがサポートしている場合にWebPを選択できるようにします

Troubleshooting 5
WebP画像が生成されない

PHPインストールにWebPサポート付きでコンパイルされたGDがあるか（gd_info()で'WebP Support'を確認）、またはWebPフォーマットをサポートするImageMagickがあるか確認してください。ステータスレポートページ（/admin/reports/status）で確認できます。

既存の画像にWebPバージョンがない

このモジュールは画像スタイル派生画像が作成される際にのみWebPコピーを生成します。/admin/config/media/image-stylesで画像スタイルをフラッシュするか、'drush image-flush'を使用してすべての派生画像をWebPコピー付きで再生成してください。

WebP画像がHTML出力に表示されない

画像フィールドに標準のImageフォーマッタではなくResponsive Imageフォーマッタを使用していることを確認してください。WebPソースはpicture要素を通じてレスポンシブ画像にのみ追加されます。

品質設定の変更が適用されない

品質設定を変更した後、派生画像を再生成するために画像スタイルをフラッシュする必要があります。品質設定は新しく生成されるWebPコピーにのみ影響します。

モジュールのインストールが要件エラーで失敗する

サーバーのGDライブラリがWebPサポートなしでコンパイルされており、ImageMagickがインストールされていないかWebPをサポートしていません。ホスティングプロバイダに連絡してGDのWebPサポートを有効にするか、WebP対応のImageMagickをインストールしてください。

Security Notes 3
  • このモジュールは、任意の画像生成によるサービス拒否攻撃を防ぐためにDrupalの画像派生トークンシステムを尊重します。
  • プライベートファイルのアクセス制御は維持されます - プライベート画像のWebPバージョンも適切な権限が必要です。
  • このモジュールはDrupal.orgのセキュリティアドバイザリカバレッジを持っており、セキュリティ問題はDrupalセキュリティチームによって対処されます。