施工写真がなかなか表示されないときは、どこから直せばよいのでしょうか。まず、端末へ送っている画像が用途に対して大きすぎないかを調べます。そのうえで、一覧の小さな写真と詳細を見せる写真を分け、画質と読み込み方を調整します。
ハウスメーカーで拠点から写真が登録される場合
支店や展示場の担当者が撮影原本のまま写真を登録する運用では、01章の容量と画素数の問題がページごとに繰り返されます。
02章の一覧写真と詳細写真の使い分けを登録時の手順として拠点と共有し、遅いページの調査を頼むときは、対象ページのURLと写真を登録した拠点を制作担当へ伝えます。
見た目の大きさとファイル容量を分けて考える
画像には、画面上の表示幅、画像自体の画素数、転送するファイル容量という違いがあります。画面では小さく表示されていても、配信しているファイルが撮影原本のままなら、必要以上のデータを送っている可能性があります。
ただし、写真が多いことだけで遅さの原因とは決められません。該当ページのURLを制作担当に伝え、画像の転送量と読み込みにかかる時間を調べてもらいます。Googleの画像資料では、速度と画質の両立に加え、PageSpeed Insightsで読み込みを分析する方法を案内しています。Google：画像SEOのベストプラクティス
撮影原本は保管し、Web公開用は別に用意します。端末ごとに適切な画像を選べる配信方法が既に入っていることもあるため、手作業で全写真を作り直す前に、現在の仕組みを制作担当に聞くと作業範囲を絞れます。
一覧写真と詳細写真では、残したい情報が違う
一覧のサムネイルは、どの施工事例かを見分けるための写真です。一方、事例の詳細ページでは、木目や納まりなどを見せたい場合があります。両方に同じ画像を配るより、それぞれの表示用途に応じた候補を用意する考え方が適しています。
必要な画素数は表示幅だけでなく、画面のピクセル密度にも左右されます。単にスマートフォン用だから小さくするのではなく、制作担当に端末に応じた画像配信を相談します。Googleも、画面サイズやピクセル密度に応じて画像を選ぶ方法を説明しています。Google：画像の配信と最適化
圧縮率や画像形式を変えたら、実際の表示サイズで元の写真と見比べます。容量が減っても、伝えたい木目や文字が潰れていれば調整が必要です。担当者には、どの写真の何を見せたいかまで伝えると、画質を残す部分を判断しやすくなります。
先頭の画像は待たせず、画面外の画像は後から読む
ページを開いた直後に見える主要画像まで一律に遅延読み込みすると、その表示を余計に待たせることがあります。後からスクロールして見る画像と、最初に見せる画像を区別して設定します。
また、画像の幅と高さの情報をHTMLに持たせると、読み込み前から表示領域を確保できます。これは、写真が表示された瞬間に本文が押し下げられる動きを抑えるための対応です。遅延読み込みの使い分けと寸法指定は、web.devの解説でも示されています。web.dev：ブラウザによる画像の遅延読み込み
制作担当への依頼には、該当ページ、先頭画像かサムネイルか、残したい細部、待ち時間や本文の動きといった症状を添えます。修正前後は同じページをできるだけ同じ端末・通信条件で比べ、転送量や表示時間の変化と、写真の見え方を一緒に判断します。
参考にした公式資料
記入例・計算例は編集上の例です。制度の受付状況や仕様は変わるため、実行前にリンク先の最新情報をご確認ください。
