フロントエンド

画像表示が重い？Core Web Vitals改善につながる画像の最適化を徹底解説

公開日：2022-02-25

WRITERさとうフロントエンドエンジニア

こんにちわ。ジーピーオンラインのフロントエンドエンジニアさとうです。

2021年6月からCore Web Vitalsがモバイル検索を対象にランキング要因に組み込まれ、 2022年2月にはPC検索への反映も開始されました。Core Web Vitalsやサイトパフォーマンスは本来のユーザー体験の向上という目的だけでなく、SEO対策の一環としても改善をおこなう必要がでてきています。

今回はサイトのリソースの中でも多くの割合を占めることが多く、パフォーマンスのチューニングの中でも比較的効果の出やすい画像周りの最適化について徹底解説いたします。
Core Web Vitalsについてはこちらの記事もご覧ください。
【関連記事】UXの新指標Core Web Vitals（コアウェブバイタルズ）とは？計測方法から改善方法まで徹底解説

ジーピーオンラインに速度改善の相談をする

最適な画像形式を選択する
- jpg
- png
- SVG
- WebP
最適なサイズの画像を表示させる
- srcset・sizes属性
- pictureタグ
画像を圧縮する
- Optimizilla
- Squoosh
widthとheightを指定する
画像の遅延読み込みをする
画像のデコードを非同期でおこなう
LCP画像をプリロードする
まとめ

最適な画像形式を選択する

まずは最適な形式の画像を選択することが大切です。画像形式にはそれぞれに特性があり、用途に合った形式の画像を使用することでファイルサイズを削減できる可能性があります。

jpg

jpgはフルカラー約1677万色を表現できる画像形式です。色数の多い写真画像での使用に向いています。ただし、文字や図形など色の境界線がくっきりとした画像は滲みやすくなるため、あまり向いていません。また、背景を透過させることはできません。

png

pngもjpgと同様にフルカラー約1677万色に対応した画像形式で、背景を透過させることが可能です。可逆圧縮形式なため、編集保存を繰り返しても劣化することがありませんが、jpgに比べるとファイルサイズが大きくなりがちです。色数が多く透過が必要な画像やシャープな形状の文字や図形に適しています。

SVG

SVGは拡大縮小をしても劣化しないベクター形式のデータです。単一のデータでさまざまなサイズに対応でき、CSSやJSでアニメーションを付けることも可能です。ロゴやアイコンなど、色数がそれほど多くなくシャープな形状の場合は使用に適しています。ただし、グラデーションや色数の多い写真等で使用するとデータ量が増えてしまうため注意しましょう。

WebP

WebPはGoogleが開発した次世代の画像形式で jpgやpngに比べ、25〜35%ファイルサイズが縮小できるとされています。ここ数年で対応ブラウザも増えてきているため、サイトで導入されるケースも増えています。
ただし、現在対応していないブラウザの表示も考慮する場合は適切な方法で設定することが必要です。設定方法については次のセクションで解説いたします。

最適なサイズの画像を表示させる

実際の表示サイズよりも大きな画像を縮小表示させると描画に負荷がかかり、LCPやページの読み込み速度に影響が出てしまいます。画面のサイズや解像度に応じて最適なサイズの画像を表示させることが重要です。Retinaなどの高解像度ディスプレイにも対応させる場合は、スマホ用画像、PC用画像、PC用画像の2倍サイズの高解像度ディスプレイ用画像の3サイズを用意しておきましょう。

画像の出し分けについてはsecset属性、size属性、pictureタグを使用して実装することができます。

srcset・sizes属性

srcset属性を使うことで下のコードでは高解像度ディスプレイでは、高解像度ディスプレイ用のimage@2x.jpgを表示し、それ以外のディスプレイではimage.jpgが表示され、画像を出し分けることができます。

<img src="image.jpg" srcset="image@2x.jpg 2x" alt="">

また、sizes属性と合わせて使うことで更に細かくディスプレイサイズに合った画像を出し分ける事も可能です。下のコードではsrcset属性で複数の画像のパスと実際の画像サイズを設定しておき、 sizes属性でメディアクエリと組み合わせて、表示サイズを指定しています。すると、ブラウザが環境に応じて、最適な画像を選定し表示することができます。

<img srcset="image-320w.jpg 320w, image-680w.jpg 680w, image-1000w.jpg 1000w"
         sizes="(max-width: 320px) 300px, (max-width: 680px) 640px, 1000px"
         src="image-1000w.jpg"
         alt="">

pictureタグ

レスポンシブのサイトではスマホとPCでアスペクト比の異なる画像を使用することも多くあります。そういった場合はpictureタグとsourceタグを使用して画像を出し分けます。下のコードではスマホ用画像、PC用画像、高解像度ディスプレイ用画像の中から条件にあったものが表示されます。

<picture>
  <source media="(max-width: 767px)" srcset="sp.jpg">
  <img src="pc.jpg" srcset="pc@2x.jpg 2x" alt="">
</picture>

また、前述のWebP形式の画像を使用する場合にもpictureタグで、WebPに対応していないブラウザでの表示画像を設定することができます。

<picture>
  <source type="image/webp" srcset="image.webp">
  <img src="image.jpg" alt="">
</picture>

画像を圧縮する

画像を圧縮しているかどうかで読み込むリソースの量に大きな差が出ます。必ず圧縮をおこなうようにしましょう。画像の圧縮はアプリやコマンドラインを使った方法もありますが、今回は手軽に圧縮が可能なオンラインツールをご紹介します。

Optimizilla

引用元：Optimizilla

Optimizillaはpngの圧縮率が他のツールよりも比較的高く、圧縮前・圧縮後の画像を比較しながら、圧縮率を調整することができます。最大20枚までまとめて圧縮することが可能です。
URL:https://imagecompressor.com/ja/

Squoosh

引用元：Squoosh

SquooshはGoogle製の画像圧縮ツールです。オンラインで使用することもインストールして、オフラインで使用することも可能です。こちらも画質を確認しながら圧縮率を調整することができます。また、圧縮だけでなく画像のリサイズ、WebPへの変換等もできるという非常に高機能なツールです。
オンライン版アプリ版では複数枚をまとめて圧縮することはできませんが、コマンドライン版ではまとめて圧縮することも可能です。
URL:https://squoosh.app/

widthとheightを指定する

imgタグにwidthとheightを指定しておくことで、ブラウザのレイアウト計算のコストを抑えることができ、パフォーマンスの向上に繋がります。また、レイアウトシフト（ガタつき）を防ぐことができるため、CLSの改善にも繋がります。

<img src="image.jpg" width="300" height="200" alt="">
<picture>
  <source media="(max-width: 767px)" srcset="sp.jpg" width="600" height="400">
  <img src="pc.jpg" width="400" height="200" alt="">
</picture>

現状は対応ブラウザが限られていますが、pictureタグでアスペクト比の異なる画像を表示させる場合は、sourceタグにもwidthとheightの指定をしておくと良いでしょう。

画像の遅延読み込みをする

ページの初回読み込み時にはファーストビューの表示を早めることがとても重要です。しかし、ファーストビューの画面領域外の画像読み込みがロード時間を遅らせているケースも少なくありません。

そこで、初回ロード時には必要のない画面領域外の画像は遅延させて読み込むことでパフォーマンスを向上させることが期待できます。画像遅延読み込みはJSライブラリで実装する方法と、loading属性を使用する方法があります。 loading属性はIE、Safari等のブラウザで未対応でしたが、IEのサポート終了、次期Safariでの対応も決まっているため今後はloading属性での実装が主流になっていくでしょう。

<img src="image.jpg" width="300" height="200" loading="lazy" alt="">

注意点としては、widthとheightの指定がないとレイアウトシフト（ガタつき）が発生してしまい、CLSのスコアに影響するため、必ず指定をしておくようにしましょう。また、ファーストビュー内の画像やファーストビューに近い位置にある画像に設定をしてしまうと、逆に読み込みに時間がかかってしまうこともあるため注意しましょう。

画像のデコードを非同期でおこなう

ブラウザは画像がダウンロードされると画面上のピクセルに変換するためにデコードという処理をおこないます。通常はデコード処理が同期的に行われるため、HTMLパースなどの描画に必要な他の処理を遅らせる原因にもなります。decoding="async"を指定することで、デコード処理を非同期でおこなうことができ、他の処理を妨げることを防ぐことができます。

<img src="image.jpg" decoding="async">

前述のloading属性との併記も可能となっていますが、併記した場合はloading属性が優先されるため loading属性を指定していないファーストビュー周辺の画像にはdecoding属性をそれ以降の画像にはloading属性を指定するなど使い分けて設定すると良いでしょう。

LCP画像をプリロードする

LCPの対象要素が画像になっている場合、対象の画像をプリロード（先読み）することで、LCPの改善に繋がる可能性があります。headタグ内でpreload属性で先読みしたい画像を指定すると、他のリソースよりも先にリクエストを送り、通常よりも画像の表示を早めることが可能です。メディアクエリを使用して、PC/SPで先読みする画像を切り替えることもできます。

<link rel="preload" as="image" href="image.jpg">
▼メディアクエリでの出し分けも可能
<link rel="preload" as="image" href="sp.jpg" media="(max-width: 767px)">
<link rel="preload" as="image" href="pc.jpg" imagesrcset="pc.jpg 1x, pc@2x.jpg 2x" media="(min-width: 768px)">

ただし、画像を優先して読み込むことで、CSSなど他のファイルの読み込みを遅らせてしまう可能性もあるため、テスト検証を行い慎重に取り入れましょう。