見出し画像

その2. SEO効果もアップ!画像ファイルの最適化

※この記事は「自分でできる!ウェブ担当者のためのサイト改善」のコンテンツです。よろしければマガジンの方もご覧ください。

ウェブサイトは、黎明期から画像ファイルを掲載することができる媒体でした。当時は通信環境が整っていないこともあり数多くの画像や大きな画像を掲載する機会は多くありませんでしたが、近年は通信環境も改善され、より長いページもあまり気にならないスマホでのウェブサイト閲覧が一般的になったことで、多くのウェブサイトでは画像を掲載する機会が大幅に増加してきています。

その一方で、ウェブ担当者にも、制作会社の担当者にもあまり認識されていませんが、画像はSEO対策のパフォーマンスにも影響を与えることもありますので、もし心当たりがあれば、ぜひ改善をオススメします。


画像がSEO対策に影響する理由

Googleは2018年に公式アナウンスで「ページの読み込み速度をモバイル検索のランキング要素に使用」することを宣言しました。具体的には、スマホページで表示速度が遅い場合はランクを下がるアルゴリズムになっていると言われています。

Googleがこのような判断をしている理由のひとつとして、「読み込みが遅いページ=利用者にやさしくないページ」という考え方があります。実際に、私の経験でも読み込み速度の遅いページは、ユーザーの直帰率が高くなる傾向があります。ウェブサイトが開く数秒間は利用する側にとっては大きなストレスになりますよね。

画像は、通常のテキスト比較すると容量が大きく、読み込みに時間が掛かる要素です(画像ファイルをメール添付する場合を想像していただくとわかりやすいと思います)。画像ファイルが大きくなったり、多くなったりすると必然的にページの読み込みには時間がかかってしまい、検索エンジンだけでなく、利用者自身からも評価を下げられてしまうことがあります。

まずは実際に表示速度を確認!

まずは気になるページがあったなら、表示速度を確認してみるのが一番です。表示速度は、Googleが提供する「Page Speed Insights」が便利です。
気になるページのURLを入れて、表示される指標の「Largest Contentful Paunt(LCP)」がイエローゾーンまたはレッドゾーンにある場合は、表示速度の改善でSEO効果の改善やページ直帰率の改善を見込める可能性があります。

サイト表示速度の測定(Page Speed insights)
Page Speed Insightのレポート画面
(赤枠がLCP表示箇所)


画像ファイルを軽くするポイント

画像の圧縮率を変更する

画像ファイルは、Photoshopなど画像編集ソフトを使用すると保存時の圧縮率を調整することができます。JPEG形式、PNG形式の画像であれば圧縮率を変更することで画像を軽量化することができます。

使用する場所やサイズにもよりますが、一般的な画像であれば100~200KBくらいを意識すると、画像のクオリティを崩さずに圧縮できることが多いと思います。

圧縮率による画像の違い
JPEGの圧縮率による画像の差

画像ファイルの種類を変更する

画像ファイルの種類を変更することでも画像ファイルを軽量化することができます。最近多くの画像で使用される機会が増えたPNG形式のファイルは、どのような環境でもきれいに表示されやすい利点がありますが、少しクオリティを落としても大丈夫であればJPEGの方が軽くできることがあります。

また、PNGの場合、背景を透過処理している場合は背景がある画像に変更することで容量を軽くできますので、背景が白地のページであれば透過処理をしていない画像に変更することもおすすめです。

なお、もう1つの画像ファイル形式としてGIF形式があります。GIF形式は容量は軽いのですが色数が限定されるため、写真を掲載する場合には不向きです。色数の少ないイラストやテキスト画像などでのみ使用することをお勧めします。

画像形式の違いによる画像ファイルの重さ
画像ファイルの形式による容量の違い

少し専門的な情報も含まれますが、どんなサイトであれ表示速度が遅いサイトは利用者をイライラさせて離脱を招き、SEO対策でも不利になってしまいます。

あまり難しく考えず、まずは担当されているサイトに体感速度が遅いページがあるならば、画像のチェックしてみてください。


この記事が参加している募集

仕事について話そう

気に入っていただけたらサポートをお願いします!未来の書籍化に向けて有益に活用させていただきます。