ImageAPI Optimize WebP
ImageAPI Optimize モジュール用の WebP プロセッサを提供し、元の Image Style 派生画像と並行して WebP 派生画像を自動的に作成します。
imageapi_optimize_webp
インストール
composer require 'drupal/imageapi_optimize_webp:^2.1'
composer require 'drupal/imageapi_optimize_webp:^2.0'
概要
ImageAPI Optimize WebP は、ImageAPI Optimize モジュールを拡張し、WebP Deriver プロセッサを提供します。このプロセッサを最適化パイプラインに追加すると、スタイル適用された画像の WebP バージョンが元フォーマットの派生画像と並行して自動的に生成されます。
WebP は Google が開発した最新の画像フォーマットで、Web 上の画像に対して優れた圧縮を提供します。このモジュールにより、Drupal サイトは WebP をサポートするブラウザに WebP 画像を配信できるようになり、画質を維持しながらページ読み込みの高速化と帯域幅消費の削減を実現します。
このモジュールは Image Style の生成を傍受し、処理された各画像の .webp コピーを作成することで動作します。また、Image Style ダウンロードコントローラーをオーバーライドし、リクエスト時に WebP 派生画像を適切に配信します。付属のサブモジュールは、この機能を Drupal の Responsive Images モジュールと統合し、レスポンシブ画像の picture 要素に WebP ソースを自動的に追加します。
Features
- ImageAPI Optimize パイプライン用の WebP Deriver プロセッサプラグインを提供
- Image Style 作成時に WebP 派生画像を自動生成
- WebP 圧縮用の画質設定（1〜100%）を構成可能
- 正しい Content-Type ヘッダーで WebP 画像を適切に配信するカスタム Image Style ダウンロードコントローラー
- Image Style がフラッシュされた際の WebP 派生画像の自動クリーンアップ
- Drupal Core の Responsive Images とのシームレスな統合用サブモジュール
- public および private ファイルシステムの両方をサポート
- WebP 変換用の GD 画像ライブラリと連携
Use Cases
サイト全体の WebP 画像最適化
WebP Deriver プロセッサを含む単一の Image Optimize Pipeline を設定し、サイト全体のデフォルトとして設定します。すべての Image Style が自動的に WebP 派生画像を生成し、Image Style ごとの追加設定なしでサイト全体の帯域幅使用量を削減します。
特定の Image Style への選択的 WebP 適用
特定の高トラフィック Image Style（ヒーロー画像や商品ギャラリーなど）用に WebP Deriver を含む専用パイプラインを作成し、他の Image Style は標準フォーマットのままにします。WebP 圧縮の恩恵を最も受ける Image Style にのみこのパイプラインを割り当てます。
WebP サポート付きレスポンシブ画像
ImageAPI Optimize WebP Responsive サブモジュールを有効にして、レスポンシブ画像使用時にサポートするブラウザに自動的に WebP 画像を配信します。モジュールは picture 要素に WebP ソースを追加し、最新のブラウザが自動的に WebP バージョンを選択できるようにしながら、古いブラウザは元のフォーマットにフォールバックします。
品質とファイルサイズのバランス調整
パイプラインごとに品質設定を調整して、視覚的品質とファイルサイズ削減の最適なバランスを見つけます。写真コンテンツの場合、通常 75〜85% の品質で優れた結果が得られます。シンプルなグラフィックの場合、60〜70% 程度の低い値でも許容でき、より大きなファイルサイズの削減が可能です。
Tips
- デフォルトの品質 75% から始め、特定の画像コンテンツと品質要件に基づいて調整してください
- ブラウザの開発者ツールを使用して、ネットワークリクエストの Content-Type ヘッダーをチェックし、WebP 画像が配信されていることを確認してください
- パイプライン設定を変更した後は Image Style Cache をクリアして派生画像を再生成してください
- WebP 派生画像は元のフォーマットの派生画像と並行して保存されるため、ファイルシステムストレージを監視してください
- 追加の最適化のために WebP コンテンツネゴシエーションをサポートする CDN の使用を検討してください
Technical Details
Admin Pages 1
/admin/config/media/imageapi-optimize-pipelines
Image Optimize パイプラインを設定し、WebP Deriver プロセッサを追加します。このモジュールは、パイプラインの作成または編集時にプロセッサ選択ドロップダウンに「WebP Deriver」オプションを追加します。
Hooks 2
hook_entity_type_alter
ImageAPIOptimizePipeline Entity クラスを、パイプライン処理後の WebP 派生ファイル管理を行うカスタム実装に置き換えます。
hook_image_style_flush
Image Style がフラッシュされた際に WebP 派生ファイルを削除します。.webp ファイルがソース派生画像と共にクリーンアップされることを保証します。
Troubleshooting 4
PHP GD ライブラリが WebP サポート付きでインストールされていることを確認してください。WebP Deriver プロセッサがパイプラインに追加され、パイプラインが Image Style に割り当てられていることを確認してください。files ディレクトリが書き込み可能であることを確認してください。
Drupal Cache をクリアして、ルートサブスクライバーが Image Style ルートを適切にオーバーライドしていることを確認してください。ソース画像が存在し、派生画像を生成できることを確認してください。
このモジュールには奇数バイトサイズの WebP ファイルに対する修正が含まれています。問題が続く場合は、GD ライブラリのバージョンを確認し、画像処理に十分なメモリ制限があることを確認してください。
ImageAPI Optimize WebP Responsive サブモジュールを有効にしてください。レスポンシブ Image Style が、WebP Deriver プロセッサが割り当てられたパイプラインを持つ Image Style を使用していることを確認してください。