WordPress用に画像を最適化する方法[究極のガイド]

公開: 2021-12-23

あなたがWordPressサイトを持っているなら、あなたはそれを維持することの難しさを知っています。場合によっては、達成するのに数分しかかからないことに何時間も費やすことがあります。これは、画像が大きすぎるか最適化が不十分なためにサイトが遅く肥大化している場合に発生する可能性があります。

さらに、検索エンジン最適化技術を使用すると、訪問者があなたを見つけてあなたのウェブサイトにとどまるのに役立ちます。 Web用に画像を最適化することはそれらのプラクティスの1つです。

画像をデザインまたは編集するときは常に、各ピクセルを最適化の可能な領域と見なしてください。ピクセルを個々のピースと見なすには時間と労力がかかりますが、努力する価値はあります。

ただし、WordPressで画像を最適化する方法はいくつかあります。目標は、画像の品質を損なうことなくファイルサイズを縮小することであることを忘れないでください。

この投稿では、WordPress画像を最適化し、他のアクティビティのためにより多くの時間を解放する方法を説明します。

画像最適化とは何ですか？

これは、画像の品質に影響を与えることなく、画像のファイルサイズを縮小し、適切な画像SEO技術を適用するプロセスです。最適化された画像は、ハードドライブに保存したり、インターネットにアップロードしたりするのが簡単です。さらに、ダウンロード速度が遅いため、潜在的な問題が少なくなります。

画像のサイズは、ウェブサイトの読み込み時間に大きな影響を与えます。一般に、画像が大きいほど、訪問者のブラウザの読み込みに時間がかかります。それはあなたの訪問者にとってイライラする可能性があり、あなたのウェブサイトを離れる可能性があります。

画像のパフォーマンスが最適化されるように、いくつかの重要な最適化のヒントに従う必要があります。

画像最適化の利点

ウェブマスターとして成功するには、ウェブサイトで画像がどのように機能するかを理解する必要があります。また、時々いくつかの画像を最適化する必要があるかもしれません。

画像最適化の利点は次のとおりです。

ページの読み込み時間の短縮：最適化された画像の読み込みが速くなり、読み込みの速いサイトに変換されます。これは、読み込みに時間がかかりすぎるWebサイトを放棄する可能性が高いモバイルユーザーにとって特に重要です。
改善されたSEOランキング：最適化された画像は、サイトのSEOランキングにも役立ちます。 Googleはページの読み込み速度をランキング要素として使用するため、画像を最適化すると検索結果で上位にランク付けするのに役立ちます。
帯域幅の使用量の削減：最適化された画像はより少ない帯域幅を使用するため、ホスティング料金を節約できます。
ユーザーエクスペリエンスの向上：適切に最適化されたWebサイトは、ページの読み込みが速くなり、検索エンジンのパフォーマンスが向上し、ユーザーエクスペリエンスが向上します。
モバイルのダウンロード時間の短縮：最適化された画像は、サイトをモバイルフレンドリーにするのにも役立ちます。これは、モバイル検索でのGoogleのランキングにとって非常に重要です。
顧客満足度：ユーザーエクスペリエンスが向上すると、顧客満足度が向上し、売り上げの増加とリピーターの増加につながります。

Web用の画像を最適化するための14の重要事項

Webで使用するために画像を最適化するときは、多くの要素を考慮するのが最善です。多くの異なるファイルタイプとそれらを最適化するためのいくつかの異なる方法があります。以下は、Web用に画像を最適化する際に考慮すべきいくつかのことです。

品質とサイズ：

画像の品質は常に重要ですが、Webでの使用を最適化する場合は、ファイルサイズも考慮する必要があります。 Webページの読み込み時間を短縮するために、品質を犠牲にすることなく、画像のファイルサイズをできるだけ小さくすることが最善です。

Web上の画像の標準解像度は、 72 DPI（Dots Per Inch）です。 したがって、このファイルタイプは小さいため、画像をPNGではなくJPGとして保存することをお勧めします。

さらに、画像の品質を損なうことなく、可能な限り低い色深度を使用するのが最適です。 標準の色深度は24ビットで、ファイルのプロパティで変更できます。

画像ファイル形式：

選択する画像形式を決定するには、さまざまな画像とその目的を理解する必要があります。ファイルをJPGとして保存する必要がありますが、Web用に画像を最適化する場合は、PNG-8またはPNG-24を選択してください。

一般に、PNGファイルは色が多く透明な背景の画像に最適ですが、JPEGファイルは細部の多い画像に最適です。

したがって、背景が透明な画像にはPNG形式を使用し、詳細度の高い画像にはJPEGを使用して、Web用の画像ファイルを最適化する必要があります。

ファイルサイズとサイズ：

Web用に画像を最適化する場合、考慮すべき2つの主要な要素はファイルサイズとサイズです。他の要素を変更する前に、これらの要素の1つを試してみることをお勧めします。そうすれば、ファイルサイズを小さくしたり画像を大きくしたりするという目標に何が役立つかがわかります。

画像ファイルが大きいとウェブサイトの動作が遅くなる可能性があるため、画像をアップロードする前に画像のサイズを変更する必要があります。 Webページ上の画像の推奨サイズは、幅600〜800ピクセル、高さ500〜600ピクセルです。

これよりも重要な場合は、ブラウザによって画像のサイズが変更され、品質が低下する可能性があります。

Image elements do not have explicit width and height

ランク計算は、画像の解像度を自動調整するのに最適です。画像のサイズが追加されるので、画像のサイズを気にする必要はありません。

画像SEOを改善する：

ウェブサイトにアップロードするすべての画像は、検索エンジンの情報源として機能する必要があります。より詳細な画像ファイルは、検索エンジン最適化に適しています。

最も説得力のある画像SEOの実践は次のとおりです。

画像のタイトルテキストを最適化する：画像を保存するときは、情報を提供するタイトルを付けてください。カーソルを画像の上に置くと、ツールチップとして表示されます。さらに、検索エンジンが画像を学習することは有益です。
Altタグを使用する：検索エンジンは、画像のインデックスを作成するときにaltタグも使用します。 altタグのテキストは、画像ごとに調整し、画像の内容をできるだけ正確に説明する必要があります。
適切な画像ファイル名を使用する：可能であれば、画像ファイル名もわかりやすく、キーワードを含める必要があります。画像編集ソフトウェアを使用する場合は、わかりやすいファイル名で画像を保存してください。

注-RankMathWordPressプラグインを使用する場合、画像はSEO用に最適化され、画像のファイル名とaltタグには自動的にキーワードが含まれます。

適切な圧縮：

これは、画像を最適化するときに考慮すべきもう1つの重要な要素です。サーバーにアップロードする前に、画像を可能な限り圧縮する必要があります。

これを行うには、PhotoshopやGIMPなどの圧縮ツールを使用する必要があります。または、 TinyJPGやImageOptimなどの無料ツールを使用することもできます。読み込み時間を短縮するために、Webサイトに画像を圧縮することを常にお勧めします。

または、ShortPixelやWP-Optimizeなどのプラグインを使用して、画像がWebサイトにアップロードされるときに画像を自動的に圧縮することもできます。これらのプラグインは、Webサイトの画像を最適化しようとしている人に推奨されます。

画像を圧縮するときは、次の点に注意する必要があります。

非可逆圧縮：非可逆圧縮は、画像から一部のデータを削除してファイルを小さくする圧縮の一種です。このタイプの圧縮は、品質の目立った低下がない画像によく使用されます。
ロスレス：ロスレス圧縮は、コンテンツの品質を低下させることなく、冗長な情報を削除する圧縮の形式です。この圧縮タイプは、ロスレスJPEG画像など、圧縮後に品質を維持する必要がある画像によく使用されます。

非可逆広告の可逆圧縮の詳細については、ShortPixelのブログをご覧ください。

次世代フォーマットで画像を提供する：

デフォルトでは、ブラウザは保存されたのと同じ形式で画像を読み込もうとします。たとえば、URLに.jpgが含まれている場合、JPEG画像が読み込まれます。ただし、正しいファイル拡張子を使用して、ブラウザに別の画像形式をロードさせることができます。

たとえば、JPEG画像がある場合は、拡張子を.pngに変更すると、ブラウザがその画像を読み込みます。

これを行うには、JPG toPNGWordPressプラグインを使用します。このプラグインを使用すると、すべてのJPG画像をPNGファイルに自動的に変換します。 WordPressでPNG画像をJPGに変換する方法に関するガイドに従うことができます。

GtMatrixまたはGoogleページスピードインサイトツールを使用して、次世代フォーマットのサーブ画像を簡単に見つけることができます。

注-一般に、異なるファイル拡張子を認識するブラウザで表示される両方のタイプのファイルとして画像を保存することをお勧めします。そうすることで、ファイルの読み込みに失敗した場合でも、画像を再アップロードしなくても、壊れたJPEGをPNGに置き換えることができます。

CSSスプライトを使用して画像を組み合わせる：

画像の組み合わせは、従来、画像編集ソフトウェアを使用して実行されていました。ただし、 CSSスプライトメソッドを使用して画像を結合することもできることがわかりました。

このプロセスでは、空の画像を作成し、結合する画像をさまざまな位置にロードします。次に、CSSを使用して、これらの個々の画像のそれぞれを新しい画像の同じ領域に配置できます。

したがって、ブラウザは複数の画像ではなく、単一の画像ファイルをダウンロードできます。通常、インターネット接続が遅いため、これはモバイルデバイスにとって特に重要です。これは、CSSスプライトジェネレーターを使用して行うことができます。

画像のホットリンクを無効にする：

画像をホットリンクするということは、誰でもあなたの画像を撮って自分のWebサイトに公開できることを意味します。その結果、画像がサーバーから別のサーバーにダウンロードされるため、帯域幅の煩わしい損失が発生します。画像にホットリンク保護を使用することで、これを防ぐことができます。

cPanelアカウントを使用して画像のホットリンク保護を構成できます。 プロセスは非常に簡単です。

[セキュリティ]タブの下に[ホットリンク保護]というラベルの付いたアイコンが表示されます。
このアイコンをクリックして、次のウィンドウにアクセスします。
画像がホットリンクされないようにするには、[有効にする]ボタンをクリックします。

注-Cloudflareユーザーの場合、「ホットリンク保護」オプションを有効にすることで、画像がホットリンクされないようにすることができます。

画像のキャッシュ：

どのウェブサイトでも、これは不可欠です。人々がより速くそれらを見ることができるようにあなたはあなたの画像をキャッシュするべきです。ほとんどの場合、既存のWebサイトの訪問者はこれをブラウザにキャッシュしていますが、ホスティングに問題がある場合は、個別に設定することをお勧めします。

ホスティングサービスを使用してWordPressをインストールするときはいつでも、ホスティングプロバイダーがすべてのキャッシュを処理します。キャッシュプラグインをインストールすることもできます。

WP Rocketは、使用とインストールが簡単なため、画像をキャッシュするための理想的なプラグインです。インストールしてアクティブ化するだけで、準備完了です。もちろん、他のキャッシングプラグインもありますが、この目的にはWPRocketが最適です。

キャッシュグラバター：

Gravatarは、ウェブ上であなたのメールアドレスをフォローする小さなアイコンです。たとえば、別のWordPressブログにコメントを残すと、Gravatarがそのブログの横に表示されます。

GravatarサービスはGravatarを生成し、Gravatarはそれらをサーバーにキャッシュします。したがって、多数のブログ、またはトラフィックの多いブログにコメントすると、GravatarはGravatarのサーバーにキャッシュされます。

その結果、Gravatarはこれらすべてのブログにすばやく読み込まれます。ただし、一方で、Gravatarサービスが利用できない場合、またはコメントしたブログの1つからGravatarが削除された場合、Gravatarはそれらのブログすべてから消えてしまうため、不利になる可能性もあります。

包括的な画像でGravatarをカスタマイズすることは非常に魅力的ではありません。これは、カスタムGravatarがこれらのブログに表示されない場合、代わりにデフォルトのGravatarが使用されるためです。これは適切でない可能性があります。

この問題には2つの解決策があります。

Gravatarをできるだけ小さくします。小さい画像は大きい画像よりも読み込みが速く、消費する帯域幅が少なくなります。
自分が管理するドメインで独自のバージョンのGravatarサービスをホストする必要があります。これには、Gravatarサーバーにキャッシュするのではなく、Gravatarをローカルに保存するために、Apache Webサーバー、PHP、およびMySQLデータベースが必要になります。

CDNから画像を提供する：

画像がコンテンツ配信ネットワーク（CDN）によって提供されている場合は、必ずキャッシュを有効にしてください。その結果、ブラウザやその他のデバイスが同じイメージを複数回ダウンロードする必要がなくなります。

CDNを設定するときは、画像がどのように表示されるかを検討するのが最善です。さらに、画像でCDNリライトを有効にする必要があります。あなたはPerfmattersプラグインでこれを行うことができます

このプラグインを使用すると、サイトをCDNネットワークに簡単に接続できます。その結果、サイトがコンテンツ配信ネットワークを介してコンテンツを提供できる場合、画像はCDNサーバーによって実行されます。

次のCDNネットワークのいずれかを使用できます。

CloudFlare
BunnyCDN

あなたのウェブサイトのために画像を最適化するときにあなたがしてはいけないこと

画像のURLリダイレクトを避ける：

WebサイトでURLリダイレクトを使用すると、画像の表示が遅れます。また、画像はブラウザによってキャッシュされないため、ページの読み込みが遅れる可能性があります。

したがって、Web用に画像を最適化するときは、URLリダイレクトの使用を避ける必要があります。

Expiresヘッダーを回避する：

画像にexpiresヘッダーを使用すると、ブラウザが画像をキャッシュしない場合があります。また、ページに画像が読み込まれるたびに、ブラウザが画像を再リクエストします。

最適化する場合は、Webサイトの画像に期限切れのヘッダーを設定しないでください。

画像の埋め込みを避ける：

Web用に画像を最適化するときは、ページに画像を埋め込まないことが重要です。これは、画像を埋め込むと、ブラウザが画像を表示する前に画像全体をダウンロードするためです。

これにより、Webサイトの読み込みが遅くなり、訪問者を苛立たせる可能性があります。代わりに、 <img>タグまたは<object>タグのいずれかを使用して、サーバー上の画像へのリンクを含めます。 したがって、ブラウザはページ全体ではなく、画像ファイルのみをダウンロードできます。

最高の画像最適化ツール：

高品質のコンテンツは、プロのブログを開発するために不可欠です。さらに、ブログを魅力的に見せるためには、高品質の画像が必要です。ただし、解像度と美しくデザインされた画像を失うことなく画像を最適化するための無料のツールを見つけることは困難です。

その結果、作業を容易にするために最も効果的な画像最適化ツールのリストをまとめました。

TinyJPG：TinyJPGは、JPEG画像を圧縮するための便利なオンラインツールです。このツールの圧縮率は非常に高く、画質は依然として優れています。
Toolur：Toolurは、Web用に画像を最適化するための便利なオンラインツールです。画像の品質に影響を与えることなくファイルサイズを縮小することにより、画像を最適化します。
ImageOptim：ImageOptimは、最高の画像最適化ツールの1つです。このツールは、Webページ上の画像を最適化することにより、サイトの読み込み速度を向上させるのに役立ちます。すでに圧縮されている画像を最適化することもできます。
GIMP：GIMPは、画像の品質を維持しながら画像のファイルサイズを縮小できる優れた画像エディタです。これは、AdobePhotoshopの価値のある代替手段です。

WordPress用の最高の画像最適化プラグイン

WordPressで利用できるいくつかの異なる画像最適化プラグインがあります。ニーズに最も適したものを選択するのは難しい場合があります。これがトッププラグインのリストです。

EWWWイメージオプティマイザー
WPロケットチームによる想像
ShortPixel Image Optimizer
WPスマッシュ
reSmush.it

上記のリストから、 EWWW Image Optimizer 、Imagify by WP Rocket Team、およびShortPixelImageOptimizerプラグインを使用できます。

最適な結果を得るには、画像の最適化にプレミアムプラグインを使用する必要があります。お金を節約したい場合は、 EWWWImageOptimizerを試してください。

よくある質問

WordPressでWebP画像を作成するにはどうすればよいですか？

WP Rocketを使用してサイトの画像を最適化すると、画像が自動的にWebPとして保存されます。対照的に、JPGまたはPNG画像をWebP画像に変換する場合は、プラグインを使用して変換できます。

これには、次のプラグインのいずれかを使用できます。

メディア用WebPコンバーター
WebP Express

私がWebPに使用する優れたプラグインは、WPSpeedMattersによるFlyingImagesです。あらゆるテーマで機能し、すべてを処理します。さらに、任意のサイズのWebPイメージを作成でき、無料のイメージCDNサービスを提供します。これは大きなメリットです。

オフスクリーン画像を延期するにはどうすればよいですか？

JavaScriptでdefer属性を使用してオフスクリーン画像を読み込むことができるため、ブラウザは最初のページの読み込みをより高速にレンダリングできます。これには、開始タグと終了タグが必要です。例えば：

注-延期はHTML5でのみサポートされ、XHTMLではサポートされません。

PerfmattersなどのJavaScriptプラグインを使用すると、画像の読み込みを延期できます。その結果、imgタグをdivなどの任意の要素に変更できます。

オフスクリーン画像の延期を修正するにはどうすればよいですか？

遅延読み込み画像。
遅延読み込みの背景画像。

ユーザーがすぐに気付くように、折り目の上の画像は遅延読み込みから除外する必要があります。ただし、WordPressサイトでの遅延オフスクリーンまたは遅延読み込み画像を解決するには、Perfmattersプラグインを使用できます。プラグインを使用すると、オフスクリーン画像の読み込みを延期することで、WordPressサイトの読み込み速度を向上させることができます。

注-WPRocketプラグインを使用して、画像の遅延読み込みを有効にできます。したがって、それらのいずれかを使用できます。

結論は

WordPressは、独自のWebサイトを作成および管理できる強力なコンテンツ管理システムです。ただし、適切なツールがないと、WordPress用に画像を最適化するのは難しい場合があります。

WordPress用に画像を最適化する際の問題は、非常に多くの異なる方法が利用できることです。たとえば、プラグイン、オンラインツール、または独自のソフトウェアを使用できます。

WordPressの画像を最適化するための最も効果的な方法は、これらすべての手法を組み合わせることです。さらに、サイズ変更が必要な画像を識別するプラグインを使用できます。また、手動でサイズ変更することもできます。

WordPressの画像サイズを最適化することに加えて、投稿ごとのファイル数も最適化する必要があります。プレミアムプラグインを使用して、画像とWebサイトの速度を最適化してみてください。その結果、ユーザーフレンドリーで高速かつ効率的なウェブサイトを開発できるようになります。