Dynamic Responsive Image
コンテナの寸法に基づいてレスポンシブ画像スタイルを動的にオンザフライで生成するフィールドフォーマッターを提供し、事前設定されたレスポンシブ画像スタイルの必要性を排除します。
drimage
インストール
composer require 'drupal/drimage:^2.3'
概要
Dynamic Responsive Image（drimage）は、Drupalコアの Responsive Image Style モジュールの代替となるモジュールです。設定を一切必要としないことで、レスポンシブ画像スタイルの設定とメンテナンスの煩わしさを解消します。ブレークポイントや画像スタイルを事前に定義する代わりに、drimageはブラウザ上の実際のコンテナサイズに基づいて最適な画像寸法を計算し、適切な画像スタイルを動的に生成します。
ページが読み込まれると、JavaScriptがコンテナの幅を測定し、サーバーに最適なサイズの画像をリクエストします。モジュールは必要に応じて画像スタイルを自動的に作成してキャッシュし、あらゆる画面サイズやデバイスに対して完璧なサイズの画像を配信します。このアプローチにより、実際に必要な画像サイズのみが生成されるためディスク容量の使用を削減し、画像が常に表示コンテキストに一致することを保証します。
このモジュールは、シンプルなスケーリング、固定アスペクト比クロップ、パララックス効果付きの背景画像、手動クロップエリア用の Image Widget Crop との統合など、複数の画像処理モードをサポートしています。Drupalコアおよび ImageAPI Optimize WebP モジュールを通じた WebP サポート、Retinaディスプレイ向けのデバイスピクセル比検出、ネイティブブラウザの遅延読み込みも含まれています。
Features
- 手動設定なしでレスポンシブ画像スタイルをオンザフライで自動生成
- 複数の画像処理モードをサポート：スケール、固定アスペクト比クロップ、背景画像、Image Widget Crop統合
- Drupalコアの画像変換または ImageAPI Optimize WebP モジュールによる WebP 画像フォーマットサポート
- 高DPI/Retinaディスプレイ最適化のためのデバイスピクセル比検出
- 生成される画像スタイル数を制限してディスク容量を節約するための設定可能なしきい値
- ビューポートに入る前に画像をプリロードするための設定可能なオフセット付きネイティブブラウザ遅延読み込み
- フォーカルポイント座標に基づくインテリジェントなクロッピングのための Focal Point モジュール統合
- CSSパララックス効果（fixed/scroll attachment、cover/contain sizing）付き背景画像モード
- Drupalをブートストラップせずに既存の画像派生物を配信するためのApache htaccessルール
- 開発環境向けの Stage File Proxy 統合
- 関連設定が変更された際の生成された画像スタイルの自動クリーンアップ
- 生成された画像スタイルを一括削除するためのDrushコマンド
- よりクリーンなUIのため、自動生成された画像スタイルを Image Styles 管理リストから非表示
Use Cases
レスポンシブヒーロー画像
ヒーローバナー用に16:9や21:9などのワイドな比率で「固定アスペクト比クロップ」モードを使用します。Drimageはシネマティックなアスペクト比を維持しながら、すべての画面幅に適切なサイズのバージョンを生成します。Retinaディスプレイで鮮明な画像を得るには、デバイスピクセル比検出を有効にしてください。
パララックス付き全幅背景画像
パララックススクロール効果のために「fixed」attachmentで「背景画像」モードを使用します。画面サイズに関係なくコンテナを満たす画像のために、positionを「center center」、sizeを「cover」に設定します。画像の高さはコンテナ要素のCSSで制御されます。
手動クロップ付き商品ギャラリー
一貫した商品サムネイル用に、正方形クロップタイプで「Image widget crop」モードを使用します。コンテンツ編集者は各画像のクロップエリアを手動で配置でき、drimageはそのクロップエリアの最適なサイズのバージョンをさまざまな表示コンテキスト用に生成します。
画像が多いサイトのパフォーマンス最適化
より高いしきい値（例：400-500ピクセル）を設定して、ブラウザ側でのスケーリングをわずかに増やしつつ、生成される画像スタイル数を削減します。25-35%小さいファイルサイズのためにWebPサポートを有効にします。Drupalのブートストラップなしで既存の派生物を配信するためにhtaccessプリペンドファイルを使用します。
Focal Pointによるアートディレクション
インテリジェントなクロッピングのために Focal Point モジュールをインストールします。編集者が画像にフォーカルポイントを設定すると、drimageは生成されるすべてのサイズで画像の重要な部分が見えるようにし、モバイルデバイスでの不自然なクロップを避けます。
Tips
- Retinaディスプレイで鮮明な画像を得るにはデバイスピクセル比検出を有効にしますが、高DPIスクリーンでは帯域幅使用量が増加することに注意してください
- Apache htaccessルールを使用していない場合のみ「キャッシュ最大期間」設定を使用してください - htaccessアプローチはDrupalを完全にバイパスするためより効率的です
- 「背景画像」モードは、CSSがコンテナの高さを制御し、画像がそれを完全に満たすべきヒーローセクションに最適です
- Image Widget Cropを使用する場合、アスペクト比はクロップタイプ全体で一貫している必要があります - drimageはサイズ計算にクロップタイプのアスペクト比を使用します
- 本番環境ではhtaccessプリペンドファイルをインストールして設定し、既存の画像派生物をApacheから直接配信することでサーバー負荷を劇的に軽減します
- 大幅な設定変更後は「drush drimage:delete-styles」を実行して、すべての新しい画像が更新された設定を使用するようにします
Technical Details
Admin Pages 1
/admin/config/media/drimage
画像スタイルのしきい値、WebPサポート、デバイスピクセル比検出、キャッシュ動作など、動的レスポンシブ画像生成のグローバル設定を構成します。
権限 1
Hooks 2
hook_drimage_proxy_cache_periods_alter
drimage設定フォームに表示される利用可能なキャッシュ期間オプションを変更できるようにします。
hook_drimage_image_style_alter
自動生成された画像スタイルが保存される前に変更できるようにします。ウォーターマーク、色調整、カスタムクロップタイプなどの追加画像エフェクトを追加するのに便利です。
Drush Commands 1
drush drimage:delete-styles
drimage生成のすべての画像スタイルをデータベースから削除します。クリーンアップや、設定変更後にすべてのスタイルを再生成する必要がある場合に便利です。
Troubleshooting 6
ブラウザコンソールでJavaScriptエラーを確認してください。画像フィールドが「Dynamic Responsive Image」フォーマッターを使用していることを確認してください。ソース画像ファイルが存在しアクセス可能であることを確認してください。stylesディレクトリのファイル権限を確認してください。
drimage設定で「画像スタイルあたりの最小差分」しきい値を増やしてください。高い値（300-500ピクセル）はブラウザ側でのスケーリングをわずかに増やしつつ、生成されるスタイル数を大幅に削減します。
/admin/reports/status のステータスレポートで、画像ツールキット（GDまたはImageMagick）がWebPをサポートしていることを確認してください。drimage設定でcore_webpまたはimageapi_optimize_webpのいずれか（両方ではなく）が有効になっていることを確認してください。ImageAPI Optimize WebPの場合、デフォルトパイプラインが設定されていることを確認してください。
提供されたhtaccess.prepend.txtファイルを使用してApache htaccessルールを設定し、Drupalをブートストラップせずに既存の派生物を直接配信します。これにより、リピートリクエストのサーバー負荷が大幅に軽減されます。
Drimageは画像スタイルを積極的にキャッシュします。キャッシュをクリアするか、「drush drimage:delete-styles」を実行してすべての生成されたスタイルを削除してください。次のリクエストで更新されたクロップ情報を使用して再生成されます。
この警告は情報提供のみです。Drimageは画像トークンではなくファイルIDをセキュリティに使用するため、insecure derivatives保護をバイパスしています。モジュールは独自のメカニズムでセキュリティを処理します。
Security Notes 3
- Drimageは Drupal の allow_insecure_derivatives 保護をバイパスしますが、ファイルID検証と寸法チェックを通じてセキュリティを実装しています
- モジュールは任意の寸法リクエストによる悪用を防ぐため、設定されたしきい値に対してリクエストされた寸法を検証します
- キャッシュヘッダーは適切に設定する必要があります - htaccessルールを使用する場合はキャッシュを無効にするか、CDN/プロキシキャッシュ用に適切なmax-age値を設定してください