ウェブサイトの画像を速く読み込ませる方法
どんなサイトでも画像の重さを減らせる5つの改善を、効果の大きい順に。
ほとんどのウェブサイトでは、訪問者がダウンロードするデータの大半を画像が占めています。最適化していないスマートフォンの写真1枚が、ページの残り全部より重いこともあります。画像の改善はたいてい、もっとも効果が大きく手軽な高速化です。そして速いページは検索順位が上がり、訪問者が長く滞在し、成果にもつながります。
1. 表示するサイズで画像をアップロードする
スマートフォンから直接取り込んだ写真は幅4000ピクセル以上あります。ウェブサイトの本文の幅が1200ピクセルを超えることはまれで、カードやサムネイルはもっと小さいものです。余分な画素はすべてダウンロードされ、ブラウザに捨てられます。アップロードする前にリサイズしましょう。全幅のバナーは高解像度画面でも鮮明になるよう幅約2000ピクセル、本文の画像は1200〜1600、カードは600〜800が目安です。リサイズツールならフォルダーごとまとめて処理できます。
2. 圧縮する
寸法が適切なら、あとは圧縮が片づけてくれます。品質80で保存した写真はウェブページ上では品質100と見分けがつかず、サイズは3分の1ほどになることもよくあります。画像圧縮ツールは一括処理に対応し、ファイルごとの削減量も表示します。
3. WebPを使う
WebPは現在のすべてのブラウザが対応していて、同じ見た目の画質ならJPGより25〜35%ほど小さく、透過にも対応しているので多くのPNGの代わりにもなります。JPGをWebPにまたはPNGをWebPに変換するツールを使ってください。AVIFはさらに小さくなりますが、エンコードに時間がかかり、アップロード先の対応もまだ限られているため、実用的な標準はWebPです。
4. 内容に合った形式を選ぶ
| 内容 | 最適な形式 |
|---|---|
| 写真 | WebP。WebPが使えない場所ではJPG |
| ロゴやアイコン | あればSVG、なければPNGかWebP |
| 文字を含むスクリーンショット | PNGまたは可逆圧縮のWebP |
| 簡単なアニメーション | GIFではなく短い動画 |
5. ブラウザが賢く読み込めるようにする
- 遅延読み込み。最初の画面より下の画像は、訪問者がスクロールして近づいたときに読み込むべきです。多くのプラットフォームは自動で行います。素のHTMLなら、最初は見えないimgタグにloading="lazy"を付けてください。
- 寸法の指定。すべての画像に幅と高さを指定し、画像の読み込みでページがずれないようにします。レイアウトのずれはGoogleのCore Web Vitalsの指標のひとつです。
- メイン画像を最優先に。ページ上部の大きな画像、つまり多くの場合Largest Contentful Paintの対象になる画像は、決して遅延読み込みにしてはいけません。できるだけ早く読み込ませます。
どれくらい差が出るか
スマートフォンの写真を10枚そのまま載せたページは30MBになることもあります。適切な幅にリサイズして圧縮すれば、同じページが2MB前後に、WebPに変換すれば1.4MBほどになります。モバイル回線では、1秒で表示されるページと、多くの訪問者が離脱してしまうページほどの差になります。
結果を確認する
GoogleのPageSpeed InsightsやChromeのデベロッパーツールのLighthouseパネルでは、大きすぎる画像、WebPにすべき画像、Largest Contentful Paintの要素が一覧で分かります。改善の前後で測定し、アクセスの多いページから取り組みましょう。