Image Optimize

画像最適化のためのフレームワークで、プロセッサを含むパイプラインを提供し、Drupal Coreの画像スタイルとの組み込み統合を備えています。

imageapi_optimize
23,782 sites
137
drupal.org

インストール

Drupal 11, 10, 9 v4.1.1
composer require 'drupal/imageapi_optimize:^4.1'

概要

Image Optimizeモジュールは、Drupalにおける画像最適化のための包括的なフレームワークを提供します。このモジュールは「パイプライン」システムを導入しており、各パイプラインには画像を最適化するために順番に適用される複数の「プロセッサ」が含まれています。

画像を最適化するには、パイプラインに画像を渡します。パイプラインは、設定されたウェイト順に各プロセッサを画像に適用するよう調整します。例えば、画像から不要なメタデータを削除するロスレス最適化用のパイプラインと、サードパーティのWebサービスを通じて再圧縮を適用するロッシーパイプラインを用意できます。

このモジュールはDrupalの画像スタイルに対する組み込みサポートを提供します。通常の画像スタイルエフェクトが適用された後、派生画像は設定可能な最適化パイプラインを通じて自動的に処理されます。サイト全体のデフォルトパイプラインを設定することも、各画像スタイルに個別に特定のパイプラインを設定することもできます。

このモジュール自体にはプロセッサプラグインは含まれていません。Image Optimize Binaries、Image Optimize reSmush.it、Image Optimize TinyPNG、Krakenなど、実際の画像最適化プロセッサを提供する追加モジュールをインストールする必要があります。

Features

  • 複数のプロセッサを持つ画像最適化パイプラインの作成と管理
  • パイプライン内のプロセッサのドラッグ&ドロップによる並べ替え
  • ウェイトベースのプロセッサ実行順序
  • すべての画像スタイルに対するサイト全体のデフォルトパイプラインの設定
  • 個々の画像スタイルへの特定パイプラインの割り当て
  • Drupal Coreの画像スタイルとの自動統合 - エフェクト適用後に派生画像が最適化される
  • パイプライン変更時のキャッシュ画像のフラッシュ
  • パイプライン削除時の代替パイプライン選択
  • カスタム画像プロセッサ作成のための拡張可能なプラグインシステム
  • 設定可能なプロセッサプラグインと設定不要なプロセッサプラグインの両方をサポート
  • 最適化処理中の一時ファイル管理
  • キャッシュ無効化との統合
  • 設定エンティティのエクスポート/インポートサポート

Use Cases

ロスレス画像最適化

品質を低下させることなく画像から不要なメタデータを削除するプロセッサを含むパイプラインを作成します。これは、ファイルサイズを小さくしたいが品質の低下を許容できない本番サイトに最適です。Image Optimize Binariesモジュールのjpegtran(JPEG用)やoptipng(PNG用)などのプロセッサを使用します。

ロッシー画像圧縮

最大のファイルサイズ削減のためにロッシー圧縮を適用するプロセッサを含むパイプラインを作成します。画像をインテリジェントに圧縮するTinyPNGやreSmush.itなどのサービスを使用します。これは、画像が多く帯域幅が懸念されるサイトで、ある程度の品質低下が許容できる場合に最適です。

多段階最適化パイプライン

複数のプロセッサを順番に含むパイプラインを作成します。例えば、最初にjpegtranを使用してメタデータを削除し、次にjpegoptimを使用してロッシー圧縮を適用します。ウェイトシステムにより、プロセッサが正しい順序で実行されることが保証されます。

画像スタイルごとの異なる最適化

異なる画像スタイルに異なるパイプラインを割り当てます。品質があまり重要でないサムネイルスタイルには積極的なロッシー圧縮を使用し、品質が重要なフルサイズ画像にはロスレス最適化を使用します。

例外を含むサイト全体のデフォルト

一般的な最適化用にサイト全体のデフォルトパイプラインを設定し、異なる処理が必要な特定の画像スタイルについてはオーバーライドします。例えば、デフォルトとしてロスレス最適化を使用しながら、ギャラリーのサムネイルには積極的な圧縮を使用します。

Tips

  • シンプルなロスレス最適化パイプラインから始め、ロッシー圧縮を追加する前にファイルサイズの節約量を測定してください。
  • 本番サイトでは「フラッシュ」操作を控えめに使用してください。すべての画像派生の再生成を強制するためです。
  • サイト全体のデフォルトパイプライン機能により、各画像スタイルを編集することなくグローバルに最適化戦略を変更できます。
  • プロセッサはウェイト順に実行されます - これを使用して複数の最適化ステップを効果的にチェーンしてください。
  • デプロイ前に代表的な画像で最適化パイプラインをテストし、許容できる品質とファイルサイズを確保してください。
  • 開発時には、最適化をスキップしてテストを高速化するために「- なし -」をパイプラインとして使用できます。

Technical Details

Admin Pages 7
Image Optimize pipelines /admin/config/media/imageapi-optimize-pipelines

画像最適化パイプラインを管理するためのメイン管理ページ。既存のすべてのパイプラインを名前とともにリスト表示し、各パイプラインの編集、削除、フラッシュの操作を提供します。このページには、画像スタイル設定で「サイト全体のデフォルトパイプライン」を選択した際に使用されるサイト全体のデフォルトパイプラインを設定するフォームも含まれています。

Image Optimize pipelineを追加 /admin/config/media/imageapi-optimize-pipelines/add

新しい画像最適化パイプラインを作成するフォーム。作成後、プロセッサを追加するための編集フォームにリダイレクトされます。

パイプラインを編集 /admin/config/media/imageapi-optimize-pipelines/manage/{pipeline}

プロセッサの追加、編集、削除、並べ替えによって既存のパイプラインを設定するフォーム。ドラッグ&ドロップによる並べ替え機能を備えた、パイプライン内のすべてのプロセッサのテーブルを表示します。

パイプラインを削除 /admin/config/media/imageapi-optimize-pipelines/manage/{pipeline}/delete

パイプラインを削除するための確認フォーム。他のパイプラインが存在する場合、依存する設定を更新するために代替パイプラインをオプションで選択できます。

パイプラインをフラッシュ /admin/config/media/imageapi-optimize-pipelines/manage/{pipeline}/flush

このパイプラインを使用するすべてのキャッシュされた派生画像をフラッシュするための確認フォーム。現在のパイプライン設定ですべての画像派生の再生成を強制します。

画像スタイル(変更) /admin/config/media/image-styles

Coreの画像スタイル一覧ページが拡張され、各スタイルに「Image Optimize Pipeline」列が表示され、各スタイルに割り当てられているパイプライン(存在する場合)を示します。

画像スタイルを編集(変更) /admin/config/media/image-styles/manage/{style}

Coreの画像スタイル編集フォームにImage Optimize Pipelineドロップダウンが追加され、すべての画像エフェクトが処理された後に適用する最適化パイプラインを選択できます。

権限 1
Image Optimize pipelinesを管理

ユーザーが画像最適化パイプラインを作成、編集、削除、フラッシュできるようにします。各画像スタイルで使用するパイプラインを設定するためにも必要です。

Hooks 2
hook_imageapi_optimize_processor_info_alter

モジュールがプラグインマネージャーによって検出されたimage optimizeプロセッサプラグインの定義を変更できるようにします。

hook_imageapi_optimize_pipeline_flush

パイプラインがフラッシュされたときに呼び出され、他のモジュールが追加のキャッシュクリアやクリーンアップ操作を実行できるようにします。

Troubleshooting 5
画像が最適化されない

少なくとも1つのプロセッサモジュール(例: imageapi_optimize_binaries)がインストールされていることを確認してください。少なくとも1つのプロセッサを含むパイプラインが作成されており、そのパイプラインが画像スタイルに割り当てられている(デフォルトまたは明示的に)ことを確認してください。

パイプライン編集時に利用可能なプロセッサがない

imageapi_optimize_binaries、imageapi_optimize_resmushit、imageapi_optimize_tinypngなどのプロセッサモジュールをインストールしてください。ベースモジュールにはプロセッサは含まれていません。

パイプライン設定変更後に最適化が適用されない

パイプラインを変更した後、パイプラインをフラッシュして画像派生を再生成する必要がある場合があります。パイプライン一覧ページの「フラッシュ」操作を使用するか、関連する画像スタイルをフラッシュしてください。

モジュール更新後にプロセッサプラグインが見つからないエラー

プロセッサが見つからないというエラーが表示される場合、プロセッサモジュールを再有効化する必要があるかもしれません。モジュールには、プロセッサモジュールを自動的に再有効化しようとするアップデートフック(8003)が含まれています。

画像スタイル編集フォームにパイプラインセレクターが表示されない

imageapi_optimizeモジュールが正しく有効化されていることを確認してください。モジュールは画像スタイルフォームとエンティティを変更してパイプラインフィールドを追加します。

Security Notes 3
  • 「Administer Image Optimize pipelines」権限は、誤って設定されたプロセッサがサイトのパフォーマンスに影響を与える可能性があるため、信頼できる管理者にのみ付与すべきです。
  • 外部サービス(TinyPNG、reSmush.it、Kraken)を使用する場合、画像は処理のためにサードパーティサーバーに送信されます。機密性の高い画像を扱う際はこの点を考慮してください。
  • 外部サービスのAPIキーは設定に安全に保存し、バージョン管理で公開しないでください。