【がぞうさいてきか】
画像最適化 とは？
最終更新:
💡 見やすさを保って、画像をちょうどよく届ける
画像の見た目と用途に合わせ、寸法・圧縮・形式・読み込み方を調整すること。通信量を抑えつつ、文字や写真を見やすく保ち、必要な画像を適切なタイミングで表示する。
📌 このページのポイント
ひよこ 画像は、小さくすればするほどいい？
ペンギン先生 軽くなると通信量を減らせるけれど、文字や写真が読めなくなったら困るよね。表示する寸法と画面のピクセル密度に合わせ、見た目を確認しながら圧縮する。画像の内容や用途に合う調整が大切なんだ。
ひよこ WebPとAVIFなら、どっちが正解？
ペンギン先生 どちらも圧縮に役立つ形式だよ。ただし同じ割合で必ず軽くなるわけではなく、画像や設定で結果が変わる。写真、透過画像、細かい文字を含む図などを実際に比べよう。対応が必要なブラウザーによっては、picture要素で別形式への切り替えも用意できるよ。
ひよこ スマホには、小さい画像を送るの？
ペンギン先生 表示幅だけでなく画面のピクセル密度も考えるよ。srcsetで複数の候補、sizesで想定する表示幅を伝えると、ブラウザーが選択できる。見た目の幅が同じでも、高密度の画面にはより多くの画素が必要な場合があるんだ。
ひよこ 遅延読み込みは、全部に付けていい？
ペンギン先生 画面外の画像を後から読み込むのは役立つけれど、最初に見える大きな画像まで遅らせると表示を待たせてしまう。特にLCPになる画像にはlazyを付けないようにする。widthとheightなどで表示領域を確保すれば、読み込みによるレイアウトのずれも抑えられるよ。
ひよこ 自動化すると安心？
ペンギン先生 ビルド時の変換や画像配信サービスを使えば手間を減らせるよ。ただし自動化しても、生成された画像の見た目、通信量、読み込み順は確認しよう。画像がLCPの要素なら改善が役立つ場合があるけれど、画像を変えただけで検索順位が必ず上がるわけではないんだ。
まとめ：ざっくりこれだけ覚えればOK！
「画像最適化」って出てきたら「見やすさを保ちながら、画像を軽く適切に届ける工夫」と思えばだいたいOK！
📖 おまけ：英語の意味
「Image Optimization」 ＝ 画像最適化
💬 とにかく小さくするだけでなく、見た目と読み込みの両方を調整するよ。