Webサイトの画像を最適化する方法
表示速度のための画像最適化（WebPとAVIFの比較） | We.Inc
適切な形式の選び方、srcsetでのサイズ調整、遅延読み込みすべき画像とヒーロー画像の扱いを解説します。picture、srcset、fetchpriorityのマークアップ生成ツール付きです。
Webサイトの画像を最適化する方法
画像の最適化は4つの作業に集約されます。画像に合った形式を選ぶこと、レイアウトに必要なピクセル幅だけを書き出すこと、各ファイルを圧縮すること、そして読み込むタイミングを制御することです。AVIFかWebPをJPEGの代替付きで配信し、srcsetに幅を列挙し、ファーストビューより下の画像は遅延読み込みにし、ヒーロー画像には代わりにfetchpriorityをhighで指定します。
画像の種類ごとに適した形式
- 文字を含むスクリーンショット
- 可逆圧縮のWebPまたはPNG
- PNG
- 短いアニメーション
- 動画（MP4またはWebM）
- アニメーションWebP
画像はたいていページの中で最も重い部分で、ヒーロー画像はLargest Contentful Paintの計測対象になることがよくあります。削減効果の大部分は、一度決めれば済む設定から生まれます。形式、幅、画質、読み込みの動作です。下の生成ツールはこれらの選択に合った正しいマークアップを書き出し、その後のチェックリストで残りの項目を確認できます。
- 表を見て形式を決めます。写真はAVIFかWebP、平面的なグラフィックはSVGです。
- スマートフォンから大画面までをカバーする3〜5種類の幅にリサイズします。
- 各ファイルを圧縮し、原寸でぼやけや色の段差がないか確認します。
- 生成ツールでマークアップを作り、ヒーロー画像を高優先度に、それ以外を遅延読み込みに設定します。
- ページの表示速度テストを実行し、画像関連の監査項目で結果を確認します。
- ヒーロー画像や最初の描画で見える画像は、絶対に遅延読み込みにしないでください。web.devでも、Largest Contentful Paintが遅れると警告しています。
- 必ずwidthとheightを指定しましょう。ブラウザーが領域を確保するため、レイアウトがずれません。
- 書き出し時にカメラのメタデータを削除しましょう。位置情報や端末情報はファイルサイズを増やし、個人情報が漏れる原因にもなります。
- CSSの背景は装飾にだけ使いましょう。内容を伝える画像は、代替テキスト付きのimgタグに入れるべきです。
- 最適な数値はエンコーダーによって異なるため、画質の設定は100%表示で目視して比較しましょう。
よくある質問
WebPとAVIFはどちらを使うべきですか？
写真ではどちらもJPEGより優れています。AVIFは新しい形式で、多くの場合さらに小さく圧縮できます。一方、WebPはエンコードが速く、サポートされてきた期間も長いです。安全な方法は、picture要素でまずAVIF、次にWebPを提供し、それより古い環境向けにimgタグでJPEGを指定することです。
sizes属性は何をするのですか？
レイアウトが決まる前に、画像がどのくらいの幅で描画されるかをブラウザーに伝え、srcsetから適切なファイルを選べるようにします。sizesがないと、ブラウザーは画像がビューポート全体を占めるとみなし、必要よりはるかに大きいファイルをダウンロードすることがあります。
すべての画像に遅延読み込みを指定すべきですか？
ファーストビューより下の画像だけにしましょう。遅延読み込みでは、ブラウザーが画像の位置を把握するまで読み込みを待ちます。すぐに目に入るものにとって、その遅れは望ましくありません。
どのくらい圧縮すればよいですか？
原寸で違いがかろうじてわかるところまで画質を下げ、そこから1段階戻しましょう。細部の多い写真は圧縮が目立ちにくく、滑らかなグラデーション、空、文字はノイズが早く目立ちます。
画像の最適化にプラグインやサービスは必要ですか？
必要ありません。画像編集ソフトやブラウザーで使える無料ツールでリサイズと変換を行い、マークアップを手で書けます。何千枚もの画像や、ユーザーがアップロードした画像を自動処理する必要がある場合には、サービスが役立ちます。
まず形式を決める
- web.devの形式ガイドは、こうまとめています。図形や文字の画像ならベクターを優先し、写真には最新のラスター形式を使うこと。PNGはすべてのピクセルを正確に保つため、スクリーンショットには向いていますが、写真では不必要に大きくなります。
- picture要素を使えば、古いブラウザーを壊さずに新しい形式を提供できます。ブラウザーはtypeを理解できる最初のsourceを使い、どれも使えなければ中のimgにフォールバックします。
どの画面にも適切なサイズで
- web.devによると、デスクトップ用のサイズの画像をスマートフォンに送ると、必要な量の2〜4倍のデータを使うことがあり、1枚の画像につき3〜5種類のサイズを用意することが推奨されています。srcsetに幅記述子で列挙し、sizesでレイアウトを記述しましょう。
- 推測せずに、レイアウト上で実際に描画される幅を測りましょう。デスクトップでは画面の3分の1、スマートフォンでは全幅になるカードなら、sizesの値もまさにそのとおりに書く必要があります。
読み込みの順序
- 遅延読み込みは長いページで通信量を節約できるので、ページ下部の画像にはloading lazyを指定します。ファーストビューのメイン画像にはfetchpriority highを追加し、重要度の低いファイルより先にリクエストされるようにします。
- decoding asyncを指定すると、ブラウザーは大きな画像のデコードが終わる前に文字を描画できます。これはヒントなので、ブラウザーが無視することもあります。
画像最適化のチェックリスト
確認すべきことと、その理由
- 最新の形式
- AVIFとWebPのsourceを持つpicture
- 見た目は同じでファイルが小さくなる
- レスポンシブな幅
- w記述子付きのsrcsetとsizes
- スマートフォンがデスクトップ用のファイルを読み込まない
- 圧縮
- 画像の種類ごとに目視で画質を調整
- 1ピクセルあたりのバイト数が減る
- サイズ指定
- width属性とheight属性
- レイアウトのずれを防ぐ
- 遅延読み込み
- loading="lazy"はファーストビューより下にだけ指定
- 長いページで通信量を節約する
- ヒーロー画像の優先度
- メイン画像にfetchpriority="high"を指定
- Largest Contentful Paintが速くなる
- 代替テキスト
- 内容を伝える画像は説明し、装飾画像は空のaltにする
- アクセシビリティと画像検索のため
コピーして使えるマークアップのパターン
JPEGの代替付きのAVIFとWebP
ブラウザーは対応している最初のsourceのtypeを使います。imgには、すべての形式に共通するサイズ、代替テキスト、読み込みのヒントを指定します。
sharpで一括リサイズと変換
sharpパッケージを使った小さなNodeスクリプトです。./srcにあるすべてのJPEGが、./outに3種類の幅のWebPとして出力されます。
夕暮れ時の、ベンチを備え付けたシダー材のウッドデッキ
画像マークアップ生成ツール
ファイル名、幅、形式、ページ上の画像の位置を設定してください。適切な読み込みのヒント付きでpictureとimgのマークアップを書き出します。
ファイル名の語幹
書き出す幅（ピクセル）
レイアウト上の最大幅（CSS px）
アスペクト比
代替テキスト
最新の形式
ページ上の位置
ファーストビュー（ヒーロー）
ファーストビューより下
HTMLをコピー
無料で始める · クレジットカード不要
関連: ガイド｜Webマーケティングと集客を学ぶ
製品
ご利用いただける方
機能
リソース
会社情報
サイトマップを見る