ホームページの画像を軽くする｜見た目を落とさない表示速度改善
大きな写真をそのまま縮小表示すると、見た目は同じでも通信量だけが増えます。使う場所に合う寸法と形式を用意し、スマホ回線で確認します。
先に結論主役画像、記事画像、一覧サムネイル、アイコンを分け、画質・文字の読みやすさ・表示速度を実測します。
用途ごとに必要な寸法を決める
ファーストビュー、記事本文、カード、ロゴで必要な大きさが違います。表示幅の数倍もある原本を毎回送らず、画面幅に合う候補を用意します。
人物、商品、施工写真など確認したい部分を過度に切りません。説明図の文字はスマホで読める大きさを保ち、読みづらい場合はHTML本文でも要点を伝えます。
形式と圧縮を画像ごとに選ぶ
写真はWebP等、透過が必要な素材は対応形式、ロゴや単純図形は既存の適切な形式を選びます。変換後に色、輪郭、文字、透明部分を目視します。
一律の強い圧縮で商品や実績がぼやけないよう、代表画面で比較します。元画像は公開領域とは分けて保管し、個人情報や位置情報など不要なメタデータを確認します。
初期表示に必要な画像を優先する
最初に見える主役画像まで遅延させず、下部の画像は必要に応じて読み込みます。画像の幅と高さや縦横比を指定し、読み込み後に文章やボタンが動かないようにします。
同じ画像をCSS背景とimgで二重に取得していないか、スマホへPC用の巨大画像だけを送っていないかを開発者ツールで確認します。
数値と実画面の両方で確認する
Lighthouse等の指標だけでなく、低速回線、実機、キャッシュなしで主役画像とCTAが表示される時間を見ます。速度スコアだけを上げて必要な写真を隠しません。
画像欠け、縦横比、レイアウトずれ、代替テキスト、拡大表示をPC・タブレット・スマホで確認します。公開後も記事追加時の容量基準を運用ルールにします。
相談前にそろえるもの
- 用途別の表示寸法
- 形式・圧縮・画質
- 主役画像の優先
- 幅・高さ・縦横比
- 実機・低速回線テスト
全部そろっていなくても構いません。分かる範囲を確認し、業務ルールや金額に関わる部分は担当者と一緒に決めます。