WordPress に最適な画像形式は次のとおりです。 写真とグラフィック用の WebP、自動フォールバックとして JPG と PNG、ロゴとアイコン用の SVG。 WordPress は Web の大きなシェアを占めており、通常、WordPress が提供するページで最も重いのは画像であるため、直接アップロードする形式によって、サイトの読み込み速度とランキングが決まります。 WordPress はさまざまな処理を行い、アップロードごとに複数のサイズを生成しますが、設定しない限り、理想的な形式は選択されません。このガイドでは、使用する形式、WordPress が画像を処理する方法、WordPress サイトを高速に保つための設定とプラグインについて説明します。

WordPress で画像形式がそれほど重要な理由

一般的な WordPress ページでは、訪問者がダウンロードするバイトの大部分を画像が占めます。つまり、 画像形式はページ速度を左右する唯一の最大の要因です、ページ速度は、Google がランキングシグナルとして使用する Core Web Vitals に直接フィードされます。テーマは無駄がなく、ホスティングは高速ですが、特大の JPG が詰め込まれたページはクロールされます。効率的な形式を選択し、WordPress が適切なサイズのバージョンを提供できるようにすることは、ほとんどのサイトで実行できる最も効果の高い最適化であり、費用は少しかかるだけです。

WordPress が画像のアップロードを処理する方法

画像をアップロードすると、WordPress は画像を保存するだけではありません。それ サイズ変更されたコピーをいくつか自動的に生成します、サムネイル、中、大、フルなので、それぞれのコンテキストに適したサイズを提供できます。また、ブラウザーがデバイスごとに適切なサイズを選択できるように、応答性の高い srcset マークアップも構築します。これは強力ですが、アップロードするものは何でも機能するため、5000 ピクセルのオリジナルではどのサイズでも肥大化したコピーが生成されます。適切なサイズで効率的に圧縮されたオリジナルをアップロードすると、生成されるすべてのバージョンも無駄のないものになります。

WebP: 最新のデフォルト

WebP は標準化される形式です。ファイルを生成します 同じ品質の JPG より 25 ～ 35% 小さい、PNG のような透明度をサポートしており、現在のすべてのブラウザでサポートされるようになりました。 WordPress はバージョン 5.8 から WebP アップロードをサポートしており、適切なプラグインを使用すると、既存の JPG および PNG の WebP バージョンを自動的に提供し、それを表示できないブラウザでは元のバージョンに戻すことができます。メディアライブラリを WebP に移行することは、多くの場合、WordPress サイトで最大の速度向上をもたらします。

フォールバックとしての JPG および PNG

WebP は古い形式を放棄するという意味ではありません。 写真の場合は JPG が安全な代替手段であり、透明性が必要なグラフィックの場合は PNG が引き続き使用されます、優れた最適化プラグインはオリジナルを保持するため、WebP サポートのないブラウザでも動作するイメージを取得できます。実際には、通常どおり JPG または PNG をアップロードすると、プラグインはそれに伴って WebP を生成して提供し、可能な限り小さいファイルを配信します。これにより、互換性のリスクをまったく伴わずに WebP を節約できるため、WebP のみではなく推奨されるセットアップとなります。

ロゴとアイコンの SVG

ロゴやインターフェースのアイコンに関しては、SVG はどのラスター形式よりも優れています。それは ベクトルなので、1 つの小さなファイルからどの画面密度でも鮮明なままです。。 WordPress では、セキュリティ上の理由から、デフォルトでは SVG のアップロードが許可されていません。SVG にはスクリプトが含まれる可能性があるため、アップロード時にファイルをサニタイズするプラグインを使用して有効にします。有効にすると、SVG として提供されるロゴは、同等の PNG よりも小さく鮮明になり、複数のサイズを生成する必要がなくなります。 SVG はロゴ、アイコン、単純なグラフィック用に予約し、写真は使用しないでください。

適切な画像サイズの選択

WordPress はいくつかのサイズを生成しますが、寸法はユーザーが制御します。を設定します。 大きいサイズはコンテンツ領域より広くなりません、多くの場合、約 1200 ～ 1600 ピクセルなので、全幅の画像が不必要に大きくなるわけではありません。コンテンツ列の幅が 800 ピクセルの場合に 4000 ピクセルの写真をアップロードすると、WordPress のサイズ変更後でも帯域幅が無駄になります。これは、生成された最大のコピーがサイズを超えているためです。登録した画像のサイズをテーマの実際のレイアウトに一致させると、サイトで提供されるすべての画像が表示される場所に比例したままになります。

圧縮および最適化プラグイン

最適化プラグインはパイプライン全体を自動化します。人気のオプション すべてのアップロードを圧縮し、WebP バージョンを生成し、不要なメタデータを削除できます画像に手で触れる必要はありません。また、多くは既存のライブラリを一括で最適化し、何年にもわたって蓄積された JPG と PNG を 1 回のパスで WebP に変換します。ホスティングを避けるために、処理を独自のサーバーにオフロードする人もいます。どちらを選択しても、効果は同じです。画像は自動的に圧縮され、最適な形式でページに表示されます。これは、手動でそれぞれを最適化することを覚えておくよりもはるかに信頼性が高くなります。

画像の遅延読み込み

遅延読み込みでは、訪問者が画像の近くをスクロールするまで画像が延期されるため、ページの初期読み込みではすぐに表示されるもののみが取得されます。 WordPress はデフォルトで遅延読み込みを有効にします スクロールしないと見えない範囲の画像に、loading 属性が自動的に追加されます。これにより、画像の多いページでの最初のペイントが大幅に高速化されます。 1 つの例外は、最大のアバブザフォールド画像 (多くの場合ヒーロー) です。これは、最大コンテンツフルペイントメトリクスを遅らせないように、積極的に読み込む必要があります。ほとんどの最適化プラグインでは、1 つの設定でその画像を遅延読み込みから除外できます。

メタデータの除去

写真にはメタデータ、カメラのモデル、GPS 位置情報、カラープロファイルが含まれていますが、これらは Web サイトではほとんど必要とされず、重みが増します。 このメタデータを削除すると、各ファイルが縮小されます 目に見える変化はなく、ほとんどの最適化プラグインは圧縮の一部としてこれを行います。写真が撮影された場所を公開したくないと考えられるため、GPS データを削除するとプライバシー上の利点もあります。色の精度が重要な場合、保持する価値のある唯一のメタデータはカラープロファイルです。それ以外の場合、それを削除すると、ライブラリ全体で無料で目に見えないサイズが削減されます。

推奨される WordPress イメージの設定

組み立てればセットアップは簡単です。テーマのレイアウトに合わせた画像サイズを登録してください。アップロードを圧縮し、フォールバックを使用して WebP を生成および提供し、メタデータを削除する最適化プラグインをインストールします。ロゴとアイコンに対してサニタイズされた SVG を有効にします。 WordPress のデフォルトの遅延読み込みを維持しますが、ヒーロー画像を積極的に読み込みます。次に、適切なサイズのオリジナルをアップロードするだけで、残りの作業はパイプラインに任せます。これを導入すると、サイト上のすべての画像が自動的に圧縮され、適切なサイズに設定され、最適な形式で提供されるため、ライブラリが増大してもサイトは高速に維持されます。

AVIF:

WebP を超えた次のステップ

AVIF は最新の効率的な形式であり、WordPress もそれをサポートしています。圧縮します WebP よりもさらに小さく、多くの場合さらに 20% 小さくなります、同じ視覚品質で、透明性と幅広い色をサポートします。ブラウザのサポートは現在では幅広くなっていますが、WebP よりもわずかに遅れているため、AVIF は WebP または JPG フォールバックを使用するのが最適です。一部の最適化プラグインは、WebP とともに AVIF を自動的に生成できます。すべての画像の最後の数キロバイトを追い求めているサイトでは、AVIF を有効にする価値がありますが、現時点では WebP が安全な主要形式のままです。

メディアライブラリとハウスキーピング

時間の経過とともに、WordPress メディアライブラリは未使用のイメージ、古いバージョン、重複でいっぱいになり、バックアップが肥大化して管理者が煩雑になります。 未使用のメディアを定期的に消去すると、ライブラリが管理しやすくなります。 そしてバックアップは無駄になります。プラグインは投稿やページに添付されていない画像を識別できますが、一部の画像はスキャンで検出できない方法で使用されているため、削除する前に確認する価値があります。整然としたメディアライブラリは操作が簡単で、最適化されると、画像が実際に占めるスペースの量が明確にわかります。

テーマ変更後のサムネイルの再生成

テーマを切り替えたり、登録された画像サイズを変更したりしても、既存のアップロードには古い生成されたサイズが残ります。 サムネイルを再生成すると、元のサイズからすべてのサイズが再構築されます 新しいディメンションを一致させるために、専用のプラグインがライブラリ全体にわたって一括してこれを行います。これをスキップすると、新しいテーマでは画像が引き伸ばされたり、間違ったサイズで表示されたりする可能性があります。これは画像サイズを変更した後の 1 回限りのステップであり、これを実行すると、ライブラリ全体と現在のテーマが実際に画像を表示する方法との一貫性が保たれます。

画像のCDN配信

コンテンツ配信ネットワークは、各訪問者の近くのサーバーからファイルを提供することで、画像配信を高速化します。 CDN は世界中のエッジロケーションで画像をキャッシュしますしたがって、ホストから遠く離れたリーダーでも画像をすばやく取得できます。多くの WordPress 最適化およびキャッシュプラグインは CDN を統合しており、一部の画像固有の CDN は、その場で変換およびサイズ変更を行い、フォーマットとサイズを自動的に処理します。世界中の視聴者やトラフィックの多いサイトの場合、CDN はボトルネックとしての画像配信を取り除き、同時にオリジンサーバーの負荷を軽減します。

注目の画像とソーシャルプレビュー

すべての投稿の注目の画像は 2 つの役割を果たします。テーマ内に表示され、投稿が共有されるときに Open Graph タグを通じてプレビューとして表示されます。 アイキャッチ画像をソーシャルプレビューに適したサイズ (1200 x 630 程度) に設定します。, そのため、フィード内で共有リンクが鮮明に表示されます。通常、SEO プラグインは、注目の画像を Open Graph タグに自動的にマッピングします。これを正しく行うことは、共有されるすべての投稿に、サムネイルが切り取られたり、何も表示されたりするのではなく、クリーンで正しいサイズの画像が表示されることを意味します。

画像のパフォーマンスをテストする

最適化後、結果を測定します。 PageSpeed Insights などのツールは画像関連の問題を報告します、サイズが大きすぎる画像、最新の形式が欠落している、レイアウトのずれを引き起こす寸法のない画像にフラグを立てます。これらは Core Web Vitals に直接結びついているため、彼らのアドバイスは Google の測定内容に対応しています。最適化パスの前後にテストを実行すると、ページがどれだけ高速になったかが正確に表示され、まだ高速化を妨げている画像が強調表示されます。これらのレポートは、画像から最後の部分を絞り出すためのチェックリストとして扱ってください。

WordPress 画像のよくある間違い

いくつかの習慣により、WordPress サイトが静かに遅くなります。 フル解像度のカメラ画像をアップロードし、圧縮をスキップし、WebP を有効にしない 最も一般的なのは、小さいファイルで十分な場所に大きなファイルが残ることです。他には、画像のサイズを設定し忘れてレイアウトがずれてしまうことや、低速で多機能なプラグインを使用しているため、節約よりも重量が増加することなどが考えられます。これらはいずれも、上記のセットアップで簡単に修正できます。それらを回避すると、ライブラリがいっぱいになるにつれて WordPress サイトが年々遅くなるのではなく、成長しても高速に維持されます。

WordPress に最適な画像形式は何ですか?

写真とグラフィックには WebP、JPG および PNG フォールバック、ロゴには SVG。 WebP ファイルは、同じ品質の JPG より 25 ～ 35% 小さく、現在のすべてのブラウザーが WebP ファイルをサポートしています。

WordPress は WebP をサポートしていますか?

はい、 WordPress 5.8以降。 WebP を直接アップロードでき、最適化プラグインは既存の JPG および PNG の WebP バージョンをフォールバックで自動的に提供できます。

SVG ファイルを WordPress にアップロードできますか?

セキュリティ上の理由から、デフォルトではそうではありません。 アップロード時にSVGをサニタイズするプラグイン これを安全に有効にすると、SVG として提供されるロゴとアイコンは PNG よりも小さく、鮮明になります。

画像最適化プラグインが必要ですか?

強くお勧めします。 プラグインはアップロードを圧縮し、WebP を生成し、メタデータを自動的に削除します。これは、各画像を手動で最適化するよりもはるかに信頼性が高くなります。

WordPress にアップロードする前に画像のサイズを変更する必要がありますか?

はい。 コンテンツ領域を超えてアップロードしないでください、多くの場合 1200 ～ 1600 ピクセルです。巨大なオリジナルでは、WordPress がそこから生成するあらゆるサイズも特大になります。

WordPress は AVIF をサポートしていますか?

はい。 AVIF は WebP よりも約 20% 圧縮率が小さくなります 一部の最適化プラグインはそれを自動的に生成します。ブラウザーを完全にサポートするには、WebP または JPG フォールバックを使用して提供します。

WordPress イメージには CDN を使用する必要がありますか?

グローバルサイトやトラフィックの多いサイトの場合は、可能です。 CDN は世界中のエッジロケーションに画像をキャッシュします, そのため、遠方の訪問者はすぐにそれらを取得し、オリジンサーバーの負荷が軽減されます。

テーマを変更すると画像がおかしくなるのはなぜですか?

既存のアップロードでは古い生成サイズが維持されるためです。 サムネイルを再生成すると、元のサイズからすべてのサイズが再構築されます 新しいテーマのサイズに合わせて調整します。

WordPress の画像を遅延読み込みする必要がありますか?

はい、そして WordPress はデフォルトで遅延読み込みを有効にします スクロールしないと見えない部分の画像に表示されます。オンのままにしておきますが、最大のコンテンツフルペイントが遅延しないように、メインのスクロールせずに見えるヒーロー画像を熱心に読み込みます。