料理写真で店のHPが重いときの直し方

1. 1

   遅いページと写真を一つ選ぶ

   スマホで公開URLを開き、最初の料理写真が出ない、写真を追加してから遅いなど、気になる箇所を一つ選びます。可能ならWi-Fiと携帯回線で一度ずつ見ます。全部の写真を先に処理する必要はありません。制作側へ測定を頼む場合も、対象URLが一つあると話が具体的になります。

2. 2

   元写真を残して候補を作る

   加工前の写真を別に残し、HP用のコピーを作ります。画像編集機能や制作サービスの設定で、表示に合う寸法・形式・圧縮を検討します。料理がぼやけるほど縮めず、まず一枚だけ作ります。外部サービスを使うなら、個人情報や未公開の素材を安易に送らないようにします。

3. 3

   実際のページで見比べる

   小さくした画像を確認用のページへ載せ、スマホで見ます。料理の色、細部、切り抜かれた範囲と、表示が待たされないかを確認します。良ければ公開へ反映し、同じ方法をほかの写真にも使います。画面上で小さく見えても、元の大きな画像を配信したままなら容量は減らないことがあります。

寸法と容量を分けて考える

画像の横・縦の大きさと、ファイルの容量は別です。大きな写真を小さく表示するだけでは、読み込むファイル自体が軽くなるとは限りません。Googleの画像性能ガイドでは、端末や表示に合う画像を配信すること、形式や圧縮を調整することが説明されています。

店の担当が分かるなら、『スマホ表示に対して大きすぎる画像を読み込んでいないか』を聞きます。店主が横幅の正解を一つ決める必要はありません。トップの大きな写真、料理一覧の小さな写真、拡大して見る写真では、必要な大きさが違うからです。

一枚から画質を確かめる

例えば看板料理の写真一枚を選び、元の写真とHP用候補を並べます。皿の輪郭が崩れていないか、食材の色が極端に変わっていないか、価格やメニュー名が画像内にあるなら読めるかを見ます。店の料理を魅力的に伝える写真なので、容量が小さいという理由だけで粗いものを採用しません。

写真に文字を埋め込んでいる場合、強い圧縮で文字が読めなくなることがあります。価格や説明はページの本文にも載せ、画像だけを読める前提にしない方が扱いやすくなります。単なる料理写真と、細かい文字入りメニュー画像は、同じ設定で一括処理しないようにします。

画像形式の対応を確かめる

WebPやAVIFなどの形式は、画質とファイルサイズを調整する選択肢です。使っているHPサービスで取り込めるか、公開時に適切な形式へ変換してくれるかを確認します。JPEGのファイル名だけをWebPへ変える方法は、画像形式の変換ではありません。

Googleの画像性能ガイドも、すべてに当てはまる圧縮設定はないと説明しています。『全画像を何KB以下にすればよい』と決めず、実際の表示と画質で選びます。制作担当が画像を自動変換する仕組みを用意している場合は、店が同じ処理を二重に行う必要があるかを先に聞いてください。

最初の写真は待たせない

画面の下にある写真を必要になったときに読み込む方法もあります。ただし、ページを開いてすぐ見える大きな料理写真まで後回しにすると、肝心の見た目が出るのを待たせる場合があります。『全写真を遅延読み込みにする』という指定だけで解決しようとせず、最初の表示を制作側で確認します。

店の写真を軽くしても、埋め込んだ地図や動画などが影響する場合があります。写真の修正前後で同じURLを測り、どこが改善し、何が残るかを担当へ聞きます。体感で少し早くなったことと、実際の利用者全体の速さが改善したことは分けて記録すると、次の作業を決めやすくなります。

制作担当へ送る依頼文

文例：『【公開URL】をスマホで開くと、最初の料理写真が出るまで待ちます。元写真はあります。画質を保ちながら、表示に合う寸法・圧縮・配信形式へ見直してください。まずこの一枚で確認したいです。画像以外が主因なら、その内容も教えてください。』対象が一つなら、店主がサイト全体の仕様を調べずに相談できます。

反映後は、同じスマホで公開ページを開き、料理が読める・色が不自然でない・予約ボタンが隠れていないことを確認します。料理を選ぶために拡大表示が必要なら、その操作も残します。速さのために、来店を判断する情報まで削っていないかを最後に見てください。

最後に確認すること

• 元写真を残し、HP用の候補を一枚から作った
• スマホで画質・切り抜き・読める文字を確かめた
• 容量だけでなく公開ページの表示と残る原因を確認した