徳島の店舗サイトがスマホで重いとき、写真を減らすべき？軽量化して残す写真の判断基準
商品や店内の様子など、来店・購入の判断に必要な写真は、まず軽量化して残します。同じ役割の写真や装飾だけの画像は削減候補です。画像が遅さの原因かを確認し、見た目の品質とスマホでの表示を比べながら、1ページずつ改善する判断基準を整理します。
Article Decision
この記事で判断できること
徳島の店舗サイト担当者が、スマホ表示の遅さを改善する際に、どの写真を軽量化して残し、どの写真を減らすか判断できるようにする。
Key Points
- 商品・店内・入口の判断に必要な写真は、役割を確かめてから軽量化して残します。
- 見た目を小さくしただけでは、送られる画像データまで小さくなったとは限りません。
- 最初に見える写真と下部の写真は読み込み方を分け、変更前後を同じ条件で比べます。
Important
表示が遅い原因は画像とは限りません。写真を軽くしても改善しない場合は、動画・外部埋め込み・プログラム・サーバー応答を切り分けます。必要な写真まで消す前に、制作担当者へ原因の確認を依頼してください。
結論: 判断に必要な写真は残し、重複する写真から減らします
写真の枚数だけで決めず、お客様の判断に必要かどうかで残す写真を選びます。 商品の質感、座席の様子、店舗入口などを伝える写真は、軽量化を先に試します。同じ角度の写真が続く場合や、内容に関係のない装飾写真は削減候補です。すでに適切に配信されているなら、写真以外の原因を調べます。
なぜ写真を全部減らすと、別の困りごとが生まれるのか
徳島の店舗を初めて訪れる人は、商品の見た目だけでなく、入口や店内の雰囲気も確認したいことがあります。表示が速くなっても、知りたい様子が分からなくなれば、来店判断を助けるページとしては不十分です。『何を伝える写真か』と『どれだけのデータを送るか』を分けて考えます。
判断基準: 役割・重複・配信サイズ・表示位置を確認します
まず残す理由を言葉にし、その後で技術的な改善方法を選びます。 担当者が確認できない項目は、ページのURLと該当写真を制作会社へ渡してください。
- 1役割: 形・質感・広さ・入口など、文章だけでは伝わりにくい判断材料があるなら残します。料金や申込条件は写真だけに埋め込まず本文にも書きます。
- 2重複: 全体写真と細部写真は別の役割があります。同じ情報しか増えない似た写真は、代表の1枚に絞る候補です。
- 3配信サイズ: 画面上の小ささではなく、ブラウザへ届く画像の容量と寸法を確認します。CMSが自動変換している場合は、元画像だけを見て判断しません。
- 4表示位置: ページを開いて最初に見える主要写真は早く表示させ、下部の写真は近くまでスクロールしたときに読み込む方法を検討します。
軽量化を頼むときは、何を確認してもらう？
web.devは、閲覧環境に適した画像を送り、品質を損なわず転送量を小さくすることを説明しています。制作担当者には『この写真をスマホで必要な品質のまま軽くできるか』と依頼します。 表示寸法に応じた画像の配信、圧縮の強さ、配信形式を確認してもらいましょう。根拠資料: https://web.dev/learn/images/performance-issues
よくある失敗: 容量や点数だけで完了にしてしまう
速さの確認と、写真が役割を果たすかの確認をセットにします。 次の変更は、見かけ上の改善で終わりやすいため注意してください。
- 1編集画面で写真の表示幅だけを小さくする: 配信される画像データは大きいままの場合があります。公開ページで確認します。
- 2すべて同じ強さで圧縮する: 商品の質感や細部が潰れる場合があります。実際の表示サイズで、元画像と見比べます。
- 3先頭の主要写真まで遅延読み込みにする: 最初に必要な写真の表示を遅らせる可能性があります。先頭と下部を分けます。
- 4店内Wi-Fiで一度開いて終わる: 通信環境や保存済みデータの影響があります。初回表示の条件もそろえて比べます。
- 5原本を軽量版で上書きする: 大きな表示や印刷に使い直せなくなる場合があります。原本を別に保存します。
今日からできる手順: 商品紹介1ページで試します
最初は、写真が多く、来店や購入前に見てもらいたい1ページを選びます。 全ページを一度に変えず、元に戻せる状態で比較します。
- 1対象URL、使用したスマートフォン、ブラウザ、通信環境を記録します。最初の主要写真が見えるまでと、スクロール後の写真の状態を確認します。
- 2写真ごとに『全体像』『質感』『入口』などの役割を1行で書き、残す写真と重複する写真を分けます。原本と現在の掲載状態を保存します。
- 3制作担当者に、公開ページの画像の転送量・寸法と、画像以外の遅さを確認してもらいます。必要な写真の軽量化と重複写真の削減を、対象を絞って試します。
- 4変更前後で同じ端末・回線条件を使い、初回と再訪を区別して複数回確認します。PageSpeed Insightsなどの測定結果も補助にし、一度の総合点だけで決めません。
- 5写真の色・細部・切り抜き位置、画面のずれ、電話や予約への操作を確認します。品質に問題があれば設定を戻して調整し、改善できた条件を次回の更新メモに残します。
店舗担当者と制作担当者の分担を決めます
店舗側は『伝えるために残す写真』を決め、制作側は『その写真をどう配信するか』を確認します。 掲載担当者は原本の保管先と更新時の確認方法を残し、公開前には店舗側が商品の見え方を確認します。圧縮率や容量の一律ルールを急いで作るより、代表ページで許容できる品質を共有するほうが具体的です。
根拠メモ: 技術資料と店舗での運用提案を分けています
Googleのweb.dev『Key performance issues』と『Browser-level image lazy loading for the web』を2026年9月19日に確認しました。後者は、最初に表示される画像の扱いと、画像の幅・高さの指定による表示領域の確保も説明しています。写真の採否や1ページずつ試す手順はGoFerの提案であり、効果を測定した顧客事例ではありません。参照: https://web.dev/articles/browser-level-image-lazy-loading
GoFerに相談すべき場面
残すべき写真と遅さの原因を、自社だけでは切り分けられないときが相談の目安です。 GoFerには、徳島の店舗サイトの写真整理、スマホ表示の点検、更新ルールづくりを相談できます。対象URLと『遅いと感じる場所』『残したい写真』を共有いただくと、改善範囲を具体化しやすくなります。
写真を減らす前に見る4項目
その写真がないと、商品・店の様子・行き方の判断に困るか
同じことを伝える写真が何枚も並んでいないか
公開ページで実際に配信される画像の容量と寸法を確認できるか
最初の画面に出る写真か、スクロール後に見る写真か
FAQ
よくある質問
写真は何KB以下にすればよいですか？
すべての写真に共通する正解はありません。表示する大きさ、細部の必要性、枚数、配信形式で変わります。まず実際の配信容量と見え方を比べ、代表画像で自社の更新目安を決めます。
写真を減らさずに速くできますか？
過大な画像を配信している場合は、寸法・圧縮・配信方法の見直しで改善できる可能性があります。すでに最適化されている場合や、画像以外が原因の場合は、写真の軽量化だけでは十分ではありません。
すべての写真を遅延読み込みにしてよいですか？
いいえ。web.devは最初の画面で見える画像、特に主要な画像を遅延読み込みにしないよう説明しています。主にスクロール先の画像で検討し、実際の表示で確認します。
軽量化すると検索順位も上がりますか？
写真を軽くしただけで順位が上がるとは言えません。この記事では、必要な情報を保ったままスマホで閲覧しやすくすることを改善の目的にしています。
GoFerに相談したい方へ
GoFerには、店舗サイトの写真の役割整理、スマホ表示の点検、制作担当者へ渡す改善範囲と更新ルールの整理を相談できます。
店舗サイトの写真と表示速度を相談する