はじめに
Webサイトの表示速度を改善したいとき、まず見直すべきポイントのひとつが「画像」です。
特に、Core Web Vitals（LCPなど）の指標でも画像の表示速度が重視され、画像を最適化することが求められています。
そのため、この記事では、実際にQiitaで取り入れている画像最適化のTipsをまとめてみました。
画像の最適化について
画像の最適化が特に重要になる理由のひとつが、LCP（Largest Contentful Paint） という指標です。
このLCPは、GoogleもCore Web Vitalsの一環として重視しており、スコアがSEOにも影響を与えます。
そのため、画像を最適化することで、表示順位を改善したり、UXも改善できます。
LCPとは？
LCPは、ページの中で最も大きなコンテンツ（画像やテキスト）が表示されるまでの時間を測る指標で、ユーザーが「ページが読み込まれた」と感じる速さに直結します。
具体的に、画像の最適化とは、主に以下のような観点で画像の扱いを見直します。
- ファイルサイズを小さくする
- 必要な画像だけを表示する
- 適切なフォーマットやサイズを選ぶ
このあたりの観点に、画像最適化のTipsを紹介します。
画像最適化Tips
◯ 画像のファイルのメタデータを削除する
FigmaやIllustratorなどから画像を書き出すと、メタデータも一緒に保存されています。
そのため、肥大化したメタデータを削除することで、ファイルサイズを小さくすることができます。
メタデータを削除するために使っているツールは、ImageOptimというツールです。
◯ WebPやAVIFを使う
画像フォーマットをWebPやAVIFに変えるだけで、ファイルサイズを30〜70%削減できることがあります。
特にヒーロー画像や大きなバナー画像では、読み込み時間に大きな差が出ます。
WebPとは？
Googleが開発した 画像フォーマットで、JPEGと同じ画質で、ファイルサイズが小さくでき、αチャンネルやアニメーションにもサポートしているのが特徴です。
https://developers.google.com/speed/webp/faq?hl=ja
AVIFとは？
WebPよりも高い圧縮率を実現でき、同じ画質でもよりファイルサイズを小さくできるのが特徴です。
また、HDR、10bitカラー、広色域に対応にも対応しています。
ただ、WebPと比べると、エンコード・デコードに時間がかかるらしいです。
使うイメージとしては、こんな感じになるかと思います。
<picture>
<source srcset="image.avif" type="image/avif">
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="説明文">
</picture>
◯ デバイスに応じた画像を出し分ける
デスクトップサイズで作られた画像をモバイルで表示させると、必要な画像サイズより大きいため、読み込み時間の無駄が発生します。
そのため、デバイスに応じた画像サイズで表示させてあげることで、パフォーマンスは改善します。
そのため、やり方いろいろあるとおもうので、プロダクトにあったやり方で対応しましょう！
1つの画像を複数書き出して、<picture> を使って、出し分けたり、
imgixなどのCDNとかを使って、最適かするのでもいいと思います。
◯ 遅延読み込みを取り入れる
初期表示に不要な画像は後で読み込む設定をすることで、読み込み時間を短縮させ、パフォーマンスが改善します。
遅延読み込みは、<img>タグに loading="lazy" を使うことで、簡単に設定することができます。
<img src="image.jpg" loading="lazy" alt="説明文">
まとめ
画像の最適化は、手軽に始められて、効果も大きいパフォーマンス改善の手段です。
特に、LCPのようなユーザー体験に直結する指標において、画像の最適化はとても重要な役割を果たします。
今回紹介したように、
- メタデータの削除
- 軽量フォーマット（WebP / AVIF）の導入
- デバイスに応じたサイズの出し分け
- 遅延読み込み（Lazy Load）の活用
といった施策を一つずつ取り入れるだけでも、表示速度やUXは大きく改善できます。
まずはできそうなところから一つずつ、取り入れてみてください！
小さな積み重ねが、プロダクト全体の品質向上につながります。
最後まで読んでくださってありがとうございます！
普段はデザインやフロントエンドを中心にQiitaに記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。