WordPress 用に画像を最適化する方法

WordPress コンテンツに画像を含める (そして含めるべき) 理由はたくさんあります。 画像は、読者の関心を維持するのに役立ちます。 また、長いコンテンツを分割し、検索エンジン最適化 (SEO) を改善する方法でもあります。 ただし、ウェブサイトの速度が低下する可能性もあります。

幸いなことに、画像の最適化に役立つ利用可能なリソースがかなりあります。 これは、Web サイトの全体的な成功に悪影響を与える可能性のある遅いページ速度を克服する可能性が高くなることを意味します.

この記事では、大きな画像がサイトを引きずる理由を見ていきます。 次に、メディア ファイルを効果的に圧縮する方法と、サイトの SEO を改善するための基本的な画像最適化のヒントについて説明します。

WordPress 用に画像を最適化する必要がある理由

画像は、あらゆるコンテンツ戦略において貴重で重要な要素です。 ただし、ページの読み込み時間が遅くなる主な原因の 1 つになることもあります。

遅い Web サイトは問題です。ユーザーを遠ざける可能性があるからです。 実際、読み込みに 5 秒以上かかるページでは、ユーザーが直帰 (1 ページを表示しただけで離脱) する確率が平均で 90% 増加します。

サイトの速度を低下させる要因は複数ありますが、最新の Web サイトでは、画像とメディア ファイルが帯域幅の 63% を占めています。 したがって、サイトにアップロードする画像を最適化することが重要です。

また、サイトの速度が Google のランキング要因であることも注目に値します。 これは、ページの読み込みの速さや遅さによって、検索結果での順位がある程度決まることを意味します。 PageRank に影響を与える要因は多数ありますが、画像は「Web ページの使いやすさ」のカテゴリに分類されます。

画像の最適化とは、次の 2 つの点を改善することです。

• 各画像ピクセルのエンコードに使用されるバイト数
• 使用されたピクセルの総数。

つまり、最適化とは、最小のピクセル数とバイト数から最高の品質を得ることを意味します。 これにより、メディア ファイルのサイズが小さくなり、サイト全体の速度に大きな影響を与える可能性があります。

WordPress にアップロードする前に画像を最適化する

最終的に、Web サイトの最良のシナリオは、画像をアップロードする前に最適化することです。 これは、1 つのイメージが重複したり、複数のバージョンが作成されたりしないようにするためです。 これでは、画像の最適化によって Web サイトの負荷を軽減するという目的が無効になります。

それを念頭に置いて、サイトのメディアを最適化する方法を決定する際に考慮すべき事項をいくつか見てみましょう。

画像ファイル形式

はじめに、存在するさまざまな種類の画像形式を見てみましょう。 それらのそれぞれの違いと、それらを使用するのが最適な場合を理解することは、画像のより合理的な使用に向けて構築するのに役立ちます.

オンラインで使用される最も一般的な 2 つの画像形式は、JPEG と PNG です。 これらの形式はどちらもピクセルで構成されています。 画像のサイズを変更するとピクセルが伸びるため、画像がぼやけることがあります。 ただし、これらの画像タイプにはそれぞれ異なる長所と短所があります。

JPEG を使用する場合

JPEG ファイルは、印刷コンテンツと Web コンテンツの両方に適しています。 この種の画像ファイルは、「非可逆」形式と呼ばれるものを使用します。 大きな画像を JPEG に変換すると、そのファイルに含まれている情報の一部が失われます。

その情報は、単に画像を表示するためには必要ありません。 ただし、JPEG に変換するとファイル サイズは小さくなりますが、全体的な画質が多少犠牲になる可能性があります。 幸いなことに、特に小さな画像の場合、品質の低下はそれほど目立ちません.

PNG を使用する場合

PNG ファイルは、JPEG と同様に Web コンテンツにも役立ちますが、別の方法で使用できます。 たとえば、PNG は背景を透明にすることができるため、Web グラフィックのデザインに多用途で便利です。

PNG は「ロスレス」ファイル形式を使用します。 これは、ファイルが圧縮されても、画像に関するすべての情報が保持されることを意味します。 その結果、品質が高くなる傾向がありますが、ファイル サイズとページ速度の改善はわずかです。 これらは、グラフィックやアイコン、および非常に高品質の画像に適したオプションです。

画像サイズ

膨満感をカットする時が来ました。 スケーリングされた画像を提供することは、画像を最適化する最も簡単で効果的な方法の 1 つです。 なぜそんなに効果的なのですか？ 画像のスケーリングにより、ブラウザーで意図したサイズでアセットを表示するために必要な数よりも多くのピクセルを送信しないことが保証されます。

多くのサイトは、拡大縮小されていない大きな画像を配信しようとし、ブラウザーに依存してサイズを変更しようとします。その結果、余分なリソースが使用され、サイトの速度が低下します。 画像の本来のサイズが 820×820 ピクセルで、ブラウザによって 400×400 ピクセルとして表示される場合、それは 32,400 の不要なピクセルです!

ページが読み込まれる明瞭さと速度は、画像が表示されるデバイス (モバイル、デスクトップなど) に大きく関係します。 たとえば、4k 画像は 27 インチ モニターできれいに見える場合があります。

ただし、訪問者がその画像を含むページを読み込むと、ブラウザは最初にフル解像度でファイルをレンダリングしてから、画面に収まるように縮小します。 400 ピクセルを超えないモバイル デバイスを使用している場合、コンテンツを見逃す可能性があります。

そのことを念頭に置いて、画像をエクスポートする際のベスト プラクティスには次のようなものがあります。

• 画像を「Web に最適化された」JPEG または PNG として保存することで、画像のファイル サイズを数百キロバイト未満に抑えます。
• 画像の Web 標準は 72 ドット/インチ (dpi) であり、上記の形式で画像を保存することで実現できます。

Photoshop、Lightroom、または同様のエディターを使用して、画像サイズを幅約 1,500 ピクセル以下に縮小できます。 Photoshop で、 [画像] > [画像サイズ]に移動して、画像の寸法と解像度を手動で調整します。 [ファイル] > [エクスポート] > [Web 用に保存]に移動して、Web アップロード用に画像を最適化することもできます。

大きなモニターにシャープで鮮やかな写真を表示することを目的としていない場合は、画像のサイズをさらに小さくすることができます。

Lightroom で作業している場合は、 [ファイル] > [エクスポート]に移動して、エクスポート時に画像サイズを手動で調整します。

画像のサイズと解像度はパズルのほんの一部です。 画像の最適化に関しては、圧縮についても理解し、効果的に使用する必要があります。

画像圧縮

簡単に言えば、画像圧縮は、画像の品質を許容できないレベルに低下させることなく、グラフィック ファイルのサイズ (バイト単位) を最小限に抑える方法です。 これまで説明してきたように、ファイル サイズが不必要に大きい高解像度の画像は、ページの速度に劇的な影響を与える可能性があります。

一方、最適化された画像は、最適化されていない画像よりも平均で 40% 明るくなります。 原則として、アップロード プロセスの前または最中に、Web サイトにアップロードするすべての画像やその他のメディアを最適化する必要があります。

非可逆圧縮と可逆圧縮

前述したように、JPEG と PNG は 2 種類の画像圧縮を使用します。 無損失圧縮は、品質を犠牲にすることなく、元のファイルのすべてのデータを保持します。

無損失圧縮では、通常、ファイルを転送または保存用に「より小さい」形式に分割します。 次に、情報はもう一方の側で元に戻されるため、再び使用できます。

一方、非可逆圧縮では、画像ファイルに含まれるデータの一部が削除されます。 これにより、品質が大幅に低下する可能性がありますが、ページ速度が大幅に向上します。 品質とパフォーマンスのバランスを取るために、圧縮量をカスタマイズすることもできます。

画像圧縮プラグイン

高速に読み込まれる画像は、より高速なサイトとより優れた SEO を意味します。 画像圧縮に役立つさまざまな画像最適化プラグインをいくつか紹介します。

Smush 画像の圧縮と最適化

Smush の画像圧縮プラグインは、Web 用にすべての画像のサイズ変更、最適化、圧縮を行うため、以前よりも高速に読み込まれます。 あなたのサイトが写真が豊富な場合、このプラグインは必須です.

ShortPixel イメージ オプティマイザー

ShortPixel の Image Optimizer プラグインは、メディア ライブラリにアップロードされた過去および将来のすべての画像と PDF を圧縮します。 このプラグインは、ほとんどのファイル タイプに対して非可逆圧縮と可逆圧縮の両方を提供します。 あなたが写真家なら、高品質の非可逆最適化アルゴリズムを使用する光沢のある JPEG 圧縮を選ぶかもしれません。

JPEG & PNG 画像を圧縮

JPEG と PNG を最適化するだけですか? このプラグインは、画像圧縮サービス TinyJPG および TinyPNG を使用して画像圧縮を支援します。 平均して、JPEG 画像は 40 ～ 60% 圧縮され、PNG 画像は 50 ～ 80% 圧縮されますが、目に見える品質の低下はありません。

EWWW 画像オプティマイザ

EWWW Image Optimizer は 2 つの役割を果たします。 サイトの既存の画像を最適化し、アップロードした新しい画像も処理します。 さらに、画像の圧縮方法 (および量) を細かく制御できます。

Kraken.io 画像オプティマイザー

最後になりましたが、Kraken.io Image Optimizer は、新しいメディアと既存のメディアの両方を最適化するのにも便利です。 ロスレスで「インテリジェントな」非可逆圧縮をサポートしているため、より小さなファイルサイズで高品質の画像を簡単に実現できます。

アイキャッチ画像

アイキャッチ画像は WordPress 投稿の本文には挿入されませんが、テーマ全体で構造的に使用されます。 たとえば、投稿のタイトルの横にサムネイルとして表示される場合や、特定の投稿を表示しているときにヘッダーに表示される場合があります。

ほとんどのテーマとウィジェットは注目の画像に依存しているため、スキップしたくないものではありません. アイキャッチ画像により、よりカスタマイズが可能になります。 特定の投稿やページに独自のカスタム ヘッダー画像を表示したり、テーマの特別な機能のサムネイルを設定したりできます。

アイキャッチ画像のサイズを決定したら、そのサイズはその後のすべてのアイキャッチ画像に対して設定されたままになります。 選択するサイズは、WordPress サイトのテーマと投稿のレイアウトによって異なります。

アイキャッチ画像は通常、高さよりも幅が広く、幅は 500 から 900 ピクセルです。 また、ピクセル化された画像ではなく、高解像度の画像を選択することをお勧めします。

プロのヒント:投稿またはページが Facebook または Twitter で共有されるたびに表示されるメディアを制御するには、Yoast SEO プラグインをインストールします。 タイトルと説明をカスタマイズできるだけでなく、各ソーシャル チャネルに適切な画像サイズをアップロードすることもできます。

WordPress にアップロードした後に画像を最適化する

画像をアップロードする前に最適化することをお勧めします。 ただし、それが不可能な場合、またはサイトに既にある画像を最適化したい場合は、引き続き行うことができます。 ライブ コンテンツの最適化に役立つ方法がいくつかあります。

画像の遅延読み込み

通常、誰かが Web ページにアクセスすると、そのすべてのコンテンツの読み込みが開始されます。 これは、コンテンツの多いページの場合、すべてが表示されるまでに時間がかかることを意味します。

「遅延読み込み」には、サイトがコンテンツを読み込む方法を微調整することが含まれます。 すぐに表示されるテキスト、画像、その他の要素を最初に読み込むことに集中するようサイトに指示します。 その後、ページを下にスクロールすることによってのみアクセスできるコンテンツの読み込みが開始されます。 これは、サイトを高速化し、訪問者のエクスペリエンスを向上させる優れた方法です。

サイトに遅延読み込みを追加する最も簡単な方法は、Lazy Load などのプラグインを使用することです。

これは、サイトの Web サーバーに一度に送信されるリクエストの量を減らすのに役立つ WP Rocket のツールです。 実際のビデオが必要な場合にのみ読み込まれるように、YouTube ビデオの代わりにプレースホルダー イメージを使用することもできます。

画像をキャッシュする

サイトの速度を向上させるもう 1 つの方法は、「キャッシュ」を使用することです。 これには、サイトのデータの一部を、訪問者がより簡単かつ迅速にアクセスできる場所に保存することが含まれます。多くの場合、訪問者がいる場所に近いサードパーティのサーバーまたはブラウザーに保存されます。

コーディング、プラグイン、その他のツールを使用してキャッシュを実現する方法はたくさんあります。 ここWP Engineでは、デフォルトですべてのサイトに堅牢なキャッシュを実装しています. これは、画像だけでなく、すべてのコンテンツがページ速度に与える影響を軽減するのに役立ちます.

EXIF データを削除する

EXIF データは画像ファイルの一部として保存され、写真が撮影された場所と方法に関する情報が含まれています。 これはカメラによって画像に自動的に追加され、通常は Web ファイルには必要ありません。

したがって、画像からこのデータを削除するとページが高速化されますが、影響はそれほど大きくはありません。 残念ながら、これを行うのに役立つ更新されたプラグインは現在ありません。 そのため、サイトで多くの写真を使用していて、EXIF データが心配な場合は、開発者に連絡して支援を求めることをお勧めします。

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

最後に、ページの速度を低下させるもう 1 つの要素は、画像がリダイレクトを引き起こしている場合です。 これは、他の場所にリンクしているときに最もよく発生します。

そのため、外部ソースからの画像をサイトに埋め込まないようにする必要があります。 代わりに、可能であれば、各画像またはメディアをサイトに直接保存してアップロードしてください。 また、画像が別のメディア ページなどにリンクしていないことを確認することもできます。

検索エンジン向けに画像を最適化する

画像のタイトルの書式設定は、画像の最適化におけるもう 1 つの重要なステップです。 これは、画像ファイル名がその内容に関連していることを意味します。 これを行うと、検索エンジンによる関連する画像検索結果に表示される可能性が高くなります。

これにより、ブランドの認知度とアクセシビリティが向上し、Google 画像検索でサイトの画像がより頻繁に表示されるようになり、サイトへのトラフィックが増加します。 画像の最適化にはほとんど時間がかからず、サイトのトラフィックに大きな違いをもたらす可能性があります。

画像のランクを上げるための追加のヒントをいくつか紹介します。

代替テキスト

「alt テキスト」または「alt タグ」とも呼ばれる代替テキストは、HTML で画像に追加される属性です。 代替テキストは、画像に含まれるものとその目的を説明することで、検索エンジンが画像の内容を理解するのに役立ちます。

Google は代替テキストに依存して、画像が何であるかを判断します。これは、HTML タグにあるものだけが「見える」ためです。 画像に強力で説明的な代替テキストを使用すると、サイトが検索結果に適切に表示される可能性が高くなります。

WordPress では、2 つの方法で画像に代替テキストを追加できます。 まず、画像をクリックし、画面の右側にある[画像設定]オプションを使用して、投稿に配置された画像に追加できます。

または、 [メディア] > [ライブラリ]に移動し、必要な画像を選択して、画像に代替テキストを追加することもできます。 次に、代替テキストをその画像の代替テキストフィールドに追加するだけです。

タイトルタグ

タイトル タグは alt タグに似ていますが、検索エンジン ボットではなく、人間が読むためのものです。 タイトル タグを適切に最適化すると、視覚障害のあるユーザーが Web サイトにアクセスしやすくなります。

XML 画像サイトマップの作成

画像を Google に認識してもらうもう 1 つの方法は、サイトマップを作成して送信することです。 これは、検索エンジンがクロールできない画像に適したオプションです。

たとえば、JavaScript によって読み込まれた画像について話しています。 サイトマップは、サイトで利用可能な画像に関するより多くの情報を検索エンジンに提供するため、検索エンジンはコンテンツをより正確に理解し、インデックスに登録できます。

WordPress では、次のプラグインがサイトマップの作成に役立ちます。

• Google XML サイトマップ
• Yoast SEO
• オールインワン SEO パック
• Udinra すべての画像 サイトマップ

WordPress 以外の Web サイトの場合、Screaming Frog、Dynomapper など、サイトマップの作成を支援するツールもあります。 サイトマップを作成したら、Google のウェブマスター ツールを使用して送信します。

画像の配置とキャプション

最後になりましたが、ブログ投稿または Web ページ内のビジュアルの配置を見てみましょう。 投稿内で画像を配置する場所は、Google でのランク付けに大きな影響を与える可能性があります。

たとえば、キーワード フレーズの近くに画像を配置すると、ランクが高くなる可能性があります。 また、画像にキーワードが豊富なキャプションを追加すると、検索テキストとしてカウントされ、画像 SEO の向上に役立ちます。

WP Engine で WordPress Web サイトを最適化する

画像の最適化は、ウェブサイトの改善に関して多くの分野をカバーしています。 最適化することで、ユーザー エクスペリエンスを向上させ、読み込み時間を 5 秒未満に抑えることができます。 ここWP Engineでは、画像の最適化がWebサイトにもたらす価値を理解しています. そのため、私たちは専用の管理された WordPress ホスティング環境を提供しています。 これは、専門家によるサポートと包括的な最適化ツールおよびリソースをすぐに利用できることを意味します。