あなたのウェブサイトのページ速度とSEOを改善するために画像を最適化する方法

公開: 2022-02-07

SaaS SEO戦略のためにライブおよび現在ドラフトされているWebページを調べたときによくある間違いのひとつは、画像がWebサイトの状態と速度全般に対して十分に最適化されていないことです。「絵は千の言葉に値する」という言葉を聞いたことがあるでしょう。それは決まり文句ですが、それは真実であり、おそらくもっと価値があります。

画像は私たちの注意をつかみ、私たちが見ているものに関連するのに役立ちます。彼らは物語を構築し、単なる大量のテキストよりもはるかに長続きする印象を与える傾向があります。多くの人は、Unsplashのような著作権のないストックフォトサイトからストック画像を入手するのが大好きです。

Googleは高速ページを非常に優先します。画像の最適化に必要な手順を無視することで、困難な戦いに備えることになります。ページに追加される画像の数は、読み込み速度の時間に直接影響します。ページに含まれる画像が多いほど、読み込み速度は遅くなります。このガイドでは、ページ速度と検索エンジン用に画像を最適化するときに実行する5つの手順について説明します。

画像の切り抜きとサイズ変更

デフォルトでは、ダウンロードした写真は非常に大きく、高品質です。この画像の大きさや解像度の決定は、画像が表示される最大サイズによって決まります。人々は、自分たちが顧客や自分自身を感動させる最高品質の画像を持っていると考えていますが、この非常に悪い影響に気づいていません。画像のサイズを決定するときは、画像が表示される最大サイズを考慮してください。

300 x 300ピクセルで表示される小さなプロファイル画像またはヘッドショットにのみ使用する場合は、画像のサイズを6000x6000ピクセルにする必要はありません。私の経験から、ページ上の最大の画像は上部のヒーロー画像になることがわかりました。品質を維持しながら安全なサイズを維持するには、1920x1080ピクセルの標準的な高解像度サイズにする必要があります。

ヒントとコツ：ブログまたはWebページのバナー画像の品質が希望よりもわずかに低い場合は、透明なオーバーレイを適用することを検討してください。これにより、デザインの一部のように見え、テキストが読みやすくなります。

以下では、Figmaを使用して画像のサイズ変更とトリミングを行っています。ドラッグアンドドロップしてからお好みに合わせて画像を変更するだけなので、プロセスは非常に簡単です。 WindowsでFigmaを使用して画像を適切に編集するために必要な2つのコントロールを次に示します。

Shift +ドラッグ-同じ比率を維持しながら、画像全体を拡大または縮小します。
Ctrl +ドラッグ-画像を引き伸ばさずに、高さまたは長さのみを変更します。

さまざまなファイルタイプとしてエクスポート

使用するファイル形式の種類を検討することが重要です。多くのフォーマットは異なる目的を果たすことができます。それぞれに、ユーザーの視点に応じて独自の長所と短所があります。これが私が通常目にする最も一般的なもののほんの一部です：

PNG-グラフィックデザインや画像の細部を確認する必要がある場合に適しています。これには、ファイルサイズが大きくなります。
JPEG-人や場所の実際の写真撮影用。これははるかに圧縮できますが、これらの詳細はそれほど必要ないため、もう少し多くの情報が失われます。
SVG-品質を損なうことなくスケールアップおよびスケールダウンできるため、アイコンやロゴに最適です。これは、作成された画像ファイルでのみ機能します。
WEBP-PNGおよびJPEGを置き換えることができる新しいバージョンの画像。 WEBPは、スペースを25％〜40％節約できる一方で、両方と同様の画質を備えています。唯一の欠点は、現在、AppleのSafariブラウザがこれをサポートしていないため、ロードするにはバックアップJPEGまたはPNGが必要になることです。
GIF-これらは、ループで再生される傾向があるビデオまたはアニメーションのクリップです。これらは、シーンをキャプチャしたり、製品のインターフェイスがどのように機能するかを示したりするのに適しています。この記事では、それらの使用方法の良い例をいくつか示します。これらはアニメーション化された一連の画像であるため、通常、単一の画像に比べてファイルサイズが大きくなります。

必要なデータが最も少ないため、できる限りJPEGを使用することを楽しんでいますが、ここでは、スクリーンショットをもう少し明確にするためにPNGを使用しています。 WEBPと同様に、さらに新しい形式が存在する可能性があるため、Googleが利用可能な各形式をどのように表示およびランク付けして、Webページの最速かつ最良の回答を見つけるかを継続的に調査することをお勧めします。最も人気のある画像タイプに関するより詳細なガイドへのリンクは次のとおりです。

イメージコンプレッサーを使用する

次のステップは、ファイルサイズを圧縮して縮小することにより、使用しているファイルをできるだけ小さくしようとすることです。画像コンプレッサーに移動して画像を処理することで、画像のファイルサイズを最大90％小さくできる場合があります。私が使いたい本当に便利なツールはCompressorと呼ばれています。このツールを使用すると、無料プランで1日に最大50枚の画像を圧縮できます。

ここでは、エクスポートした画像を取得して、画像ドロップセクションにドラッグしています。数秒後、新しい画像をダウンロードする準備が整い、元のサイズの約10分の1未満になります。下部のオプションで示されているように、複数の画像をインポートして一度にダウンロードすることもできます。

画像の読み込みを「遅延」vs「熱心」

画像が正しい形式になり、正しいサイズに圧縮されたので、すべて問題ないと思うかもしれませんが、それでも確実に行うべきことがいくつかあります。多くのテンプレートやウェブサイトでは、画像の読み込み速度はブラウザのデフォルトで読み込まれるように設定されているため、ページ上のすべての画像が同時に読み込まれる可能性があります。これに対する解決策は、画像を遅延ロードすることです。

「遅延」読み込みは、ページに表示されるまで要素の読み込みを延期します。画像が2つ以上ある場合は、サイトのパフォーマンスを向上させることができます。これの反対は、要素をすぐにロードする「Eager」ロードです。画像を最初または最後にロードする設定が設定されていないため、これは通常、デフォルトのWeb設定と一致します。

これは、HubSpotブログエディターの例です。挿入された画像の詳細オプションに移動すると、読み込み設定を設定できることがわかります。「レイジー」を選択し、適用を押します。ユーザーが画像に非常に近づき、貴重な読み込み時間を短縮するたびに、画像が表示されるようになりました。

代替テキストを追加することを忘れないでください

最後に訪問するのは、画像に代替テキストを含めることです。これはページの読み込み速度に影響を与えない可能性がありますが、常に検討して追加することが重要です。セクションを空白のままにすると、SERPランキングを上げる多くの機会を逃してしまいます。

注意すべき重要なことは、代替テキストは、コンテンツに関連する画像の「理由」を説明しているということです。それはグーグルによって索引付けされており、視覚障害者のためにテキスト読み上げで読み上げられます。何が起こっているのかを説明していない単一のキーワードを画像に詰め込んでいるだけの場合、それは最善のアプローチではない可能性があります。

ここでは、画像に代替テキストを追加しました。私はそれをSEOページスピードヘルスというフレーズに基づいています。キーワードだけを含めるのではなく、画像内のアクションの方法や内容も説明してください。「グラフを使用してSEOページの速度の健全性を確認する」というフレーズを使用して詳しく説明することにしました。

これは、画像がGoogleのインデックス作成にどのような影響を与える可能性があるかについて、はるかに有益であり、視覚障害者へのアクセシビリティを向上させます。

画像を作成/最適化するための手順を確認しましょう。

画像をFigmaなどの画像エディタにドラッグしてトリミングおよびサイズ変更します。
適切な画像タイプ（PNG、JPEG、SVG、WEBPなど）としてエクスポートします
CompressorやImageResizerOnlineなどの画像圧縮サイトに持っていきます
遅延読み込みとして、圧縮された画像をコンテンツに挿入します。
ページ上の画像を説明する代替テキストを追加します。
これで、サイトに最適な画像ができました。
Google検索コンソールをチェックして、パフォーマンスの向上を確認してください。

これらの手順に従うと、SEOのために画像を維持および最適化し、ページ速度を加速して、素晴らしいユーザーエクスペリエンスを作成することができます。