0Wordpressのロゴwordpress で avif 画像を自動的に生成して提供する

私はこのサイトのパフォーマンスを最適化するのにかなりの時間を費やしました, 進行中の作業の一環として、訪問者の速度を向上させるのに役立つ可能性のある新しいテクノロジーを監視しています. 私はしばらくの間、次世代の画像形式の採用を追跡してきましたが、Webブラウザーによるサポートがかなり普及した今、WordPressでこれらの新しい形式を利用する方法を理解する時が来ました。.

以下の見出しに分解した複数の手順が必要です

nginx でサポートを有効にする

最初のステップは、Webサーバーを有効にすることです (私の場合はnginx) 新しいフォーマットのmimeタイプを認識する. これを行うには、/etc/nginx/mime.types にある可能性が高い mime.types を編集する必要があります。. 次のセクションを追加しました

利用可能な場所でファイルを自動的に提供

次のステップは、ファイルが存在するときはいつでもファイルを自動的に提供するようにnginxに指示することです (新しいフォーマットファイルが存在しない古いフォーマットにフォールバックする)
これを行うには、最初にメインのnginx構成ファイルを編集します (通常/etc/nginx/nginx.conf) http内に次のセクションを追加します{} 設定のセクション

私はjxlを提供しようとしているだけであることに注意してください (JPEG-XL) または avif ファイル, オプションを追加できます (優先順に!) ご希望の場合.
次, サーバーの下に以下を追加する必要があります{} nginx構成のセクション (これは、nginx構成構造の設定方法に応じて、メインの構成ファイルに含まれる場合と、別の構成ファイルに含まれる場合があります。)

これで、nginxは、新しい形式をサポートするブラウザからimage.jpgを要求されたときに、image.jpg.jxl、image.jpg.avif、image.jpg.webp、最後にimage.jpgを検索します。. 次に、ワードプレスでそれらを有効にする必要があります

ワードプレスで次世代フォーマットを有効にする

次のコードをfunctions.phpに追加します (理想的には、テーマを更新したときに変更が上書きされないように、子テーマでこれを行います)

のサポートも有効にしたことに注意してください SVG 同時に画像

これで、次世代フォーマットの画像を実際にアップロードして、必要に応じてワードプレスで直接使用できます。, ただし、古いブラウザの多くはまだサポートしていないため、これはお勧めしません。また、インテリジェントにサービスを提供するようにnginxを設定しているので、それを利用する必要があります。. 私たちがやりたいのは、画像をアップロードするときに新しいフォーマットを自動的に生成することです (すでにwebpに対してこれを行うプラグインがあります, しかし、jxlやavifではまだ何もしていません).

libheif をインストールする

このステップでは、Webホストのコマンドラインにアクセスする必要があります, あなたが実行する場合、これは簡単です VPS, ただし、共有ホスティングを使用している場合はそれほど単純ではない可能性があります。その場合は、ホストにサポートを依頼する必要があります。
次のbashコマンドを実行します (これらはのために選択されます CentOSに 8, 他のディストリビューションは少し異なる場合があります)

アップロードされたすべての画像を圧縮するカスタム関数を wordpress functions.php に追加します。 (とそのサムネイル) avif形式に

以前のfunctions.phpステップと同様に、これを子テーマに追加することをお勧めします

現時点ではそれだけです—アップロードするすべての画像はavifコピーに変換されます (オリジナルを保持したまま). プラグインを使用して、すべての画像を再生成し、avifファイルを作成できます。. 注—まだ設定していません JPEG-サポートとしてのXL圧縮は、主流のブラウザではまだ利用できません (プレリリースブラウザに含まれているので、まもなく登場します).

最後のヒントが1つありますが、次世代のフォーマットと最適化について説明しています。 SVG gzip を使用した画像 (またはさらに良いzopfliとbrotli). これを行うには、別のカスタム関数が必要です…

ボーナス: SVG 圧縮

nginx 設定で gzip_static と brotli_static を有効にする必要があることに注意してください。.

新しいバージョン用に自己コンパイルする

Centosでは、heif-encの最新バージョンは 1.7 avifsを作成するときにかなりの数のバグがあります. だから私は自分の新しいものをコンパイルすることを選びました (1.12) 代わりにそれを構築して使用する. 共有ライブラリとしてaomコーデックが必要なため、これを行うのは少し複雑でした。. これを行うには、次のbashコマンドを実行します. 必ず通常のユーザーとして実行してください, rootユーザーとしてではありません. また、これらのコマンドの一部は厳密には必要ない場合があることに注意してください, それが機能するようになるまでに少し時間がかかり、何が機能したかをメモしました—私は決してLinuxの専門家ではありません!

あなたがそれをしたら, 実行して動作することを確認してください php -a 次のコマンドを実行します

完全な出力が得られるはずです, だけでなく 1 ラインエラー. これで問題がないと仮定して、functions.phpを変更して、各shell-exec参照がheif-encだけでなく/ usr / local / bin / heif-encを指すようにすることができます。

あなた自身のいくつかの考えを持って? コメントに下記をお楽しみください! あなたが購読したい場合は、右上のメニューで購読リンクをご利用ください. また、下記の社会的なリンクを使用してお友達とこれを共有することができます. 乾杯.

返信を残す