私はこのサイトのパフォーマンスを最適化するのにかなりの時間を費やしました, 進行中の作業の一環として、訪問者の速度を向上させるのに役立つ可能性のある新しいテクノロジーを監視しています. 私はしばらくの間、次世代の画像形式の採用を追跡してきましたが、Webブラウザーによるサポートがかなり普及した今、WordPressでこれらの新しい形式を利用する方法を理解する時が来ました。.
以下の見出しに分解した複数の手順が必要です
nginx でサポートを有効にする
最初のステップは、Webサーバーを有効にすることです (私の場合はnginx) 新しいフォーマットのmimeタイプを認識する. これを行うには、/etc/nginx/mime.types にある可能性が高い mime.types を編集する必要があります。. 次のセクションを追加しました
/ ルールに違反するコンテンツ ルールに違反する; 画像/ハイフハイフ; image/heic-sequence heics; image/heif-sequence ハイフ; 画像/avif avif; 画像 / avif-sequence レビュー; 画像 / jxl jxl;
利用可能な場所でファイルを自動的に提供
次のステップは、ファイルが存在するときはいつでもファイルを自動的に提供するようにnginxに指示することです (新しいフォーマットファイルが存在しない古いフォーマットにフォールバックする)
これを行うには、最初にメインのnginx構成ファイルを編集します (通常/etc/nginx/nginx.conf) http内に次のセクションを追加します{} 設定のセクション
マップ $http_accept $img_ext
{
~ 画像 / jxl '.jxl';
~image/avif '.avif';
~image/webp '.webp';
デフォルト '';
}
私はjxlを提供しようとしているだけであることに注意してください (JPEG-XL) または avif ファイル, オプションを追加できます (優先順に!) ご希望の場合.
次, サーバーの下に以下を追加する必要があります{} nginx構成のセクション (これは、nginx構成構造の設定方法に応じて、メインの構成ファイルに含まれる場合と、別の構成ファイルに含まれる場合があります。)
場所 ~* ^.+.(PNG|JPG|JPEG)$
{
add_header 変更を受け入れる;
try_files $uri$img_ext $uri =404;
}
これで、nginxは、新しい形式をサポートするブラウザからimage.jpgを要求されたときに、image.jpg.jxl、image.jpg.avif、image.jpg.webp、最後にimage.jpgを検索します。. 次に、ワードプレスでそれらを有効にする必要があります
ワードプレスで次世代フォーマットを有効にする
次のコードをfunctions.phpに追加します (理想的には、テーマを更新したときに変更が上書きされないように、子テーマでこれを行います)
/***************************************************\
* 有効にする SVG サポートおよびその他の最新の画像形式 *
\***************************************************/
関数 cc_mime_types( $マイム )
{
$マイム[「svg」] = '画像/svg+xml';
$マイム['webp'] = '画像/webp';
$マイム[「違反する」] = "画像 / 未熟な ';
$マイム[「ハイフ」] = '画像/高さ';
$マイム[「16進数」] = "画像 / ルールシーケンスに違反する ';
$マイム[「ハイフ」] = 'image/heif-sequence';
$マイム[「アビフ」] = '画像/avif';
$マイム['通知'] = 'image/avif-sequence';
$マイム['jxl'] = '画像/jxl';
$マイムを返す;
}
ADD_FILTER( 「upload_mimes」, 「cc_mime_types」 );
のサポートも有効にしたことに注意してください SVG 同時に画像
これで、次世代フォーマットの画像を実際にアップロードして、必要に応じてワードプレスで直接使用できます。, ただし、古いブラウザの多くはまだサポートしていないため、これはお勧めしません。また、インテリジェントにサービスを提供するようにnginxを設定しているので、それを利用する必要があります。. 私たちがやりたいのは、画像をアップロードするときに新しいフォーマットを自動的に生成することです (すでにwebpに対してこれを行うプラグインがあります, しかし、jxlやavifではまだ何もしていません).
libheif をインストールする
このステップでは、Webホストのコマンドラインにアクセスする必要があります, あなたが実行する場合、これは簡単です VPS, ただし、共有ホスティングを使用している場合はそれほど単純ではない可能性があります。その場合は、ホストにサポートを依頼する必要があります。
次のbashコマンドを実行します (これらはのために選択されます CentOSに 8, 他のディストリビューションは少し異なる場合があります)
dnf -y install --nogpgcheck https://download1.rpmfusion.org/free/el/rpmfusion-free-release-8.noarch.rpm https://download1.rpmfusion.org/nonfree/el/rpmfusion-nonfree-release-8.noarch.rpm dnf-yインストールlibheif
アップロードされたすべての画像を圧縮するカスタム関数を wordpress functions.php に追加します。 (とそのサムネイル) avif形式に
以前のfunctions.phpステップと同様に、これを子テーマに追加することをお勧めします
/*****************************\
* png と jpg を avif に変換する *
\*****************************/
ADD_FILTER( 「wp_generate_attachment_metadata」, 「jps_compress_img」, 10, 2 );
関数jps_compress_img( $メタデータ, $添付ファイルID )
{
// IDからファイルパスを取得
$ filepath = get_attached_file($添付ファイルID);
// ファイルはpngまたはjpegです
もしも(パス情報($ファイルパス, PATHINFO_EXTENSION)=="JPG" || パス情報($ファイルパス, PATHINFO_EXTENSION)=="JPEG" || パス情報($ファイルパス, PATHINFO_EXTENSION)=="PNG")
{
// もしそうなら, メインファイルの圧縮をavifに実行します
shell_exec("heif-enc $filepath -o $filepath.avif -q 50 -A");
$パーツ = preg_split('~/(?=[^/]*$)～', $ファイルパス);
// 次に、サムネイルの圧縮をavifに実行します
$ thumbpaths = $ metadata[「サイズ」];
foreachの ($$ key =としてのサムパス> $親指)
{
$サムパス= $thumb['ファイル'];
$サムフルパス= $parts[0] . "/" . $サムパス;
shell_exec("heif-enc $thumbfullpath -o $thumbfullpath.avif -q 50 -A");
}
}
// 私たちが得たものを返します
$ metadataを返す;
}
//添付ファイルが削除された場合は、avifsを削除することを忘れないでください
関数jps_delete_avif($添付ファイルID)
{
$all_images = get_intermediate_image_sizes($添付ファイルID);
foreachの($all_images as $ each_img)
{
$each_img_det = wp_get_attachment_image_src($attach_id,$each_img);
$each_img_path = ABSPATH.'wp-content'.substr($each_img_det[0],長期間存在($each_img_det[0],"/アップロード/")).'.avif';
shell_exec("rm -f $ each_img_path");
}
}
add_action( 'delete_attachment', 'jps_delete_avif' );
現時点ではそれだけです—アップロードするすべての画像はavifコピーに変換されます (オリジナルを保持したまま). プラグインを使用して、すべての画像を再生成し、avifファイルを作成できます。. 注—まだ設定していません JPEG-サポートとしてのXL圧縮は、主流のブラウザではまだ利用できません (プレリリースブラウザに含まれているので、まもなく登場します).
最後のヒントが1つありますが、次世代のフォーマットと最適化について説明しています。 SVG gzip を使用した画像 (またはさらに良いzopfliとbrotli). これを行うには、別のカスタム関数が必要です…
ボーナス: SVG 圧縮
/*************************************************\
* 圧縮する SVG brotli と zopfli を使ったその他の画像 *
\*************************************************/
ADD_FILTER( 「wp_generate_attachment_metadata」, 「jps_compress_vectors」, 10, 2 );
関数jps_compress_vectors( $メタデータ, $添付ファイルID )
{
// IDからファイルパスを取得
$ filepath = get_attached_file($添付ファイルID);
// ファイルはsvgです
もしも(パス情報($ファイルパス, PATHINFO_EXTENSION)=="SVG")
{
// もしそうなら, zopfliとbrotliを使用して圧縮を実行します
shell_exec("zopfli --gzip $ファイルパス");
shell_exec("brotli --best --output=$filepath.br $filepath");
}
// 私たちが得たものを返します
$ metadataを返す;
}
nginx 設定で gzip_static と brotli_static を有効にする必要があることに注意してください。.
新しいバージョン用に自己コンパイルする
Centosでは、heif-encの最新バージョンは 1.7 avifsを作成するときにかなりの数のバグがあります. だから私は自分の新しいものをコンパイルすることを選びました (1.12) 代わりにそれを構築して使用する. 共有ライブラリとしてaomコーデックが必要なため、これを行うのは少し複雑でした。. これを行うには、次のbashコマンドを実行します. 必ず通常のユーザーとして実行してください, rootユーザーとしてではありません. また、これらのコマンドの一部は厳密には必要ない場合があることに注意してください, それが機能するようになるまでに少し時間がかかり、何が機能したかをメモしました—私は決してLinuxの専門家ではありません!
dnf install x265 x265-devel svt-av1 エクスポートCXXFLAGS ="$CXXFLAGS -fPIC" cd〜 git clone https://aomedia.googlesource.com/aom mkdir -p aom_build cd aom_build cmake〜 / aom -DBUILD_SHARED_LIBS = true 作る sudo make install cp ./libaom.so.3 /usr/bin/local/libaom.so.3 cd〜 エクスポートPKG_CONFIG_PATH =〜/ aom_build / LD_LIBRARY_PATH = $ LD_LIBRARY_PATH:〜/ aom_build / LD_LIBRARY_PATHをエクスポートします git clone --recurse-submodules --recursive https://github.com/strukturag/libheif.git cd libheif ./autogen.sh 。/構成、設定 作る sudo make install LD_LIBRARY_PATH = $ LD_LIBRARY_PATH:/usr / local / bin / LD_LIBRARY_PATHをエクスポートします
あなたがそれをしたら, 実行して動作することを確認してください php -a 次のコマンドを実行します
shell_exec("/usr / local / bin / heif-enc -A");
完全な出力が得られるはずです, だけでなく 1 ラインエラー. これで問題がないと仮定して、functions.phpを変更して、各shell-exec参照がheif-encだけでなく/ usr / local / bin / heif-encを指すようにすることができます。
/*****************************\
* png と jpg を avif に変換する *
\*****************************/
ADD_FILTER( 「wp_generate_attachment_metadata」, 「jps_compress_img」, 10, 2 );
関数jps_compress_img( $メタデータ, $添付ファイルID )
{
// IDからファイルパスを取得
$ filepath = get_attached_file($添付ファイルID);
// ファイルはpngまたはjpegです
もしも(パス情報($ファイルパス, PATHINFO_EXTENSION)=="JPG" || パス情報($ファイルパス, PATHINFO_EXTENSION)=="JPEG" || パス情報($ファイルパス, PATHINFO_EXTENSION)=="PNG")
{
// もしそうなら, メインファイルの圧縮をavifに実行します
shell_exec("/usr / local / bin / heif-enc $ filepath -o $ filepath.avif -q 50 -A");
$パーツ = preg_split('~/(?=[^/]*$)～', $ファイルパス);
// 次に、サムネイルの圧縮をavifに実行します
$ thumbpaths = $ metadata[「サイズ」];
foreachの ($$ key =としてのサムパス> $親指)
{
$サムパス= $thumb['ファイル'];
$サムフルパス= $parts[0] . "/" . $サムパス;
shell_exec("/usr / local / bin / heif-enc $ thumbfullpath -o $ thumbfullpath.avif -q 50 -A");
}
}
// 私たちが得たものを返します
$ metadataを返す;
}
“Hi James I realise it has been a long while, but I just checked this on windows 11 (build 23H2)…”