私はこのサイトのパフォーマンスを最適化するのにかなりの時間を費やしました, 進行中の作業の一環として、訪問者の速度を向上させるのに役立つ可能性のある新しいテクノロジーを監視しています. 私はしばらくの間、次世代の画像形式の採用を追跡してきましたが、Webブラウザーによるサポートがかなり普及した今、WordPressでこれらの新しい形式を利用する方法を理解する時が来ました。.
以下の見出しに分解した複数の手順が必要です
nginx でサポートを有効にする
最初のステップは、Webサーバーを有効にすることです (私の場合はnginx) 新しいフォーマットのmimeタイプを認識する. これを行うには、/etc/nginx/mime.types にある可能性が高い mime.types を編集する必要があります。. 次のセクションを追加しました
1 2 3 4 5 6 7 | image/heic heic; image/heif heif; image/heic-sequence heics; image/heif-sequence heifs; image/avif avif; image/avif-sequence avis; image/jxl jxl; |
利用可能な場所でファイルを自動的に提供
次のステップは、ファイルが存在するときはいつでもファイルを自動的に提供するようにnginxに指示することです (新しいフォーマットファイルが存在しない古いフォーマットにフォールバックする)
これを行うには、最初にメインのnginx構成ファイルを編集します (通常/etc/nginx/nginx.conf) http内に次のセクションを追加します{} 設定のセクション
1 2 3 4 5 6 7 | map $http_accept $img_ext { ~image/jxl ‘.jxl’; ~image/avif ‘.avif’; ~image/webp ‘.webp’; default ”; } |
私はjxlを提供しようとしているだけであることに注意してください (JPEG-XL) または avif ファイル, オプションを追加できます (優先順に!) ご希望の場合.
次, サーバーの下に以下を追加する必要があります{} nginx構成のセクション (これは、nginx構成構造の設定方法に応じて、メインの構成ファイルに含まれる場合と、別の構成ファイルに含まれる場合があります。)
1 2 3 4 5 | location ~* ^.+\.(png|jpg|jpeg)$ { add_header Vary Accept; try_files $uri$img_ext $uri =404; } |
これで、nginxは、新しい形式をサポートするブラウザからimage.jpgを要求されたときに、image.jpg.jxl、image.jpg.avif、image.jpg.webp、最後にimage.jpgを検索します。. 次に、ワードプレスでそれらを有効にする必要があります
ワードプレスで次世代フォーマットを有効にする
次のコードをfunctions.phpに追加します (理想的には、テーマを更新したときに変更が上書きされないように、子テーマでこれを行います)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | /***************************************************\ * Enable SVG support and other modern image formats * \***************************************************/ function cc_mime_types( $mimes ) { $mimes[‘svg’] = ‘image/svg+xml’; $mimes[‘webp’] = ‘image/webp’; $mimes[‘heic’] = ‘image/heic’; $mimes[‘heif’] = ‘image/heif’; $mimes[‘heics’] = ‘image/heic-sequence’; $mimes[‘heifs’] = ‘image/heif-sequence’; $mimes[‘avif’] = ‘image/avif’; $mimes[‘avis’] = ‘image/avif-sequence’; $mimes[‘jxl’] = ‘image/jxl’; return $mimes; } add_filter( ‘upload_mimes’, ‘cc_mime_types’ ); |
のサポートも有効にしたことに注意してください SVG 同時に画像
これで、次世代フォーマットの画像を実際にアップロードして、必要に応じてワードプレスで直接使用できます。, ただし、古いブラウザの多くはまだサポートしていないため、これはお勧めしません。また、インテリジェントにサービスを提供するようにnginxを設定しているので、それを利用する必要があります。. 私たちがやりたいのは、画像をアップロードするときに新しいフォーマットを自動的に生成することです (すでにwebpに対してこれを行うプラグインがあります, しかし、jxlやavifではまだ何もしていません).
libheif をインストールする
このステップでは、Webホストのコマンドラインにアクセスする必要があります, あなたが実行する場合、これは簡単です VPS, ただし、共有ホスティングを使用している場合はそれほど単純ではない可能性があります。その場合は、ホストにサポートを依頼する必要があります。
次のbashコマンドを実行します (これらはのために選択されます CentOSに 8, 他のディストリビューションは少し異なる場合があります)
1 2 | 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 install libheif |
アップロードされたすべての画像を圧縮するカスタム関数を wordpress functions.php に追加します。 (とそのサムネイル) avif形式に
以前のfunctions.phpステップと同様に、これを子テーマに追加することをお勧めします
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | /*****************************\ * Convert png and jpg to avif * \*****************************/ add_filter( ‘wp_generate_attachment_metadata’, ‘jps_compress_img’, 10, 2 ); function jps_compress_img( $metadata, $attachment_id ) { // get filepath from id $filepath= get_attached_file($attachment_id); // is the file a png or jpeg if(pathinfo($filepath, PATHINFO_EXTENSION)==“jpg” || pathinfo($filepath, PATHINFO_EXTENSION)==“jpeg” || pathinfo($filepath, PATHINFO_EXTENSION)==“png”) { // If so, run compression of the main file to avif shell_exec(“heif-enc $filepath ‑o $filepath.avif ‑q 50 ‑A”); $parts = preg_split(‘~/(?=[^/]*$)~’, $filepath); // Then run compression of the thumbnails to avif $thumbpaths = $metadata[‘sizes’]; foreach ($thumbpaths as $key => $thumb) { $thumbpath= $thumb[‘file’]; $thumbfullpath= $parts[0] . “/” . $thumbpath; shell_exec(“heif-enc $thumbfullpath ‑o $thumbfullpath.avif ‑q 50 ‑A”); } } // give back what we got return $metadata; } //dont forget to delete the avifs if the attachments are deleted function jps_delete_avif($attachment_id) { $all_images= get_intermediate_image_sizes($attachment_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],strpos($each_img_det[0],”/uploads/”)).’.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 圧縮
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | /*************************************************\ * Compress SVG images more with brotli and zopfli * \*************************************************/ add_filter( ‘wp_generate_attachment_metadata’, ‘jps_compress_vectors’, 10, 2 ); function jps_compress_vectors( $metadata, $attachment_id ) { // get filepath from id $filepath= get_attached_file($attachment_id); // is the file an svg if(pathinfo($filepath, PATHINFO_EXTENSION)==“svg”) { // If so, run compression of it using zopfli and brotli shell_exec(“zopfli –gzip $filepath”); shell_exec(“brotli –best –output=$filepath.br $filepath”); } // give back what we got return $metadata; } |
nginx 設定で gzip_static と brotli_static を有効にする必要があることに注意してください。.
新しいバージョン用に自己コンパイルする
Centosでは、heif-encの最新バージョンは 1.7 avifsを作成するときにかなりの数のバグがあります. だから私は自分の新しいものをコンパイルすることを選びました (1.12) 代わりにそれを構築して使用する. 共有ライブラリとしてaomコーデックが必要なため、これを行うのは少し複雑でした。. これを行うには、次のbashコマンドを実行します. 必ず通常のユーザーとして実行してください, rootユーザーとしてではありません. また、これらのコマンドの一部は厳密には必要ない場合があることに注意してください, それが機能するようになるまでに少し時間がかかり、何が機能したかをメモしました—私は決してLinuxの専門家ではありません!
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | dnf install x265 x265-devel svt-av1 export CXXFLAGS=”$CXXFLAGS ‑fPIC” cd ~ git clone https://aomedia.googlesource.com/aom mkdir -p aom_build cd aom_build cmake ~/aom -DBUILD_SHARED_LIBS=true make sudo make install cp ./libaom.so.3 /usr/bin/local/libaom.so.3 cd ~ export PKG_CONFIG_PATH=~/aom_build/ LD_LIBRARY_PATH=$LD_LIBRARY_PATH:~/aom_build/ export LD_LIBRARY_PATH git clone –recurse-submodules –recursive https://github.com/strukturag/libheif.git cd libheif ./autogen.sh ./configure make sudo make install LD_LIBRARY_PATH=$LD_LIBRARY_PATH:/usr/local/bin/ export LD_LIBRARY_PATH |
あなたがそれをしたら, 実行して動作することを確認してください php -a 次のコマンドを実行します
1 | shell_exec(“/usr/local/bin/heif-enc ‑A”); |
完全な出力が得られるはずです, だけでなく 1 ラインエラー. これで問題がないと仮定して、functions.phpを変更して、各shell-exec参照がheif-encだけでなく/ usr / local / bin / heif-encを指すようにすることができます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | /*****************************\ * Convert png and jpg to avif * \*****************************/ add_filter( ‘wp_generate_attachment_metadata’, ‘jps_compress_img’, 10, 2 ); function jps_compress_img( $metadata, $attachment_id ) { // get filepath from id $filepath= get_attached_file($attachment_id); // is the file a png or jpeg if(pathinfo($filepath, PATHINFO_EXTENSION)==“jpg” || pathinfo($filepath, PATHINFO_EXTENSION)==“jpeg” || pathinfo($filepath, PATHINFO_EXTENSION)==“png”) { // If so, run compression of the main file to avif shell_exec(“/usr/local/bin/heif-enc $filepath ‑o $filepath.avif ‑q 50 ‑A”); $parts = preg_split(‘~/(?=[^/]*$)~’, $filepath); // Then run compression of the thumbnails to avif $thumbpaths = $metadata[‘sizes’]; foreach ($thumbpaths as $key => $thumb) { $thumbpath= $thumb[‘file’]; $thumbfullpath= $parts[0] . “/” . $thumbpath; shell_exec(“/usr/local/bin/heif-enc $thumbfullpath ‑o $thumbfullpath.avif ‑q 50 ‑A”); } } // give back what we got return $metadata; } |
あなた自身のいくつかの考えを持って? コメントに下記をお楽しみください! あなたが購読したい場合は、右上のメニューで購読リンクをご利用ください. また、下記の社会的なリンクを使用してお友達とこれを共有することができます. 乾杯.
Dhev オン Googleのリッチスニペットテストツールのエラーの解決: “この情報を共有してくれてありがとう...私は間違いなくこの方法を試してみます.”
返信を残す