店舗の雰囲気やサービス内容を伝えるには、写真が欠かせません。トリミングサロン、美容室、飲食店、教室などでは、文章だけよりも写真があるほうが、初めての方にも店内や仕上がりを想像してもらいやすくなります。
ただし、スマートフォンで撮影した大きな写真をそのまま並べると、ページが表示されるまでの待ち時間が長くなります。写真を減らせば軽くなりますが、伝えたい魅力まで減らしてしまっては意味がありません。
この記事では、Dog care salon apricot様のホームページ制作を例に、写真を残しながら読み込みを軽くするために行った画像設定を紹介します。
写真が多いほど表示は重くなる
ホームページを開くと、文章、デザイン用のファイル、写真などが端末へ読み込まれます。この中で容量が大きくなりやすいのが写真です。
最近のスマートフォンは高画質で撮影できるため、1枚の写真が数MBになることもあります。画面上では横幅300pxほどで表示する写真でも、元の4000pxを超える画像を載せれば、その大きなデータを読み込むことになります。
写真が多い店舗サイトでは、次の点をまとめて調整します。
- ホームページ向けの画像形式へ変換する
- 表示場所に合う画像サイズを用意する
- 端末の画面幅に合わせて読み込む画像を変える
- まだ見えていない画像は後から読み込む
- 写真を表示する領域を先に確保する
どれか一つだけではなく、掲載場所ごとに組み合わせることで、写真を見せながら待ち時間を抑えます。
WebPで画像容量を抑える
掲載する写真は、基本的にWebP形式へ変換しました。WebPは、JPEGやPNGよりファイル容量を抑えやすく、ホームページで使いやすい画像形式です。
変換時に画質を下げすぎると、毛並みや細かな質感がつぶれてしまいます。ファイル容量だけで判断せず、実際の表示サイズで見たときに違和感がないか確認します。
この記事のアイキャッチ画像も、1200×630pxのJPEGからWebPへ変換しています。変換後は約71KBです。文字や画面の細部が確認できる画質を残しながら、記事一覧やSNS共有で扱いやすい容量にしました。
画像変換で確認すること
- 人物や商品の輪郭が崩れていないか
- 小さな文字が読めるか
- 暗い部分に不自然な色むらがないか
- スマートフォンでも粗さが目立たないか
表示場所に合う大きさを用意
同じ写真でも、ファーストビューの大きな画像と、小さなカード画像では必要なサイズが違います。
apricot様のファーストビューに使った施術室写真は、同じ写真から横幅800px、1200px、2400pxの3種類を用意しました。実際のファイル容量は次のとおりです。
- 800×515px：約108KB
- 1200×772px：約231KB
- 2400×1545px：約935KB
スマートフォンに2400px版を読み込ませると、800px版の約8.7倍のデータを受け取ることになります。小さい画面では違いが分かりにくい一方、通信量と読み込み時間は大きく変わります。
元画像は高画質のまま保管し、ホームページには表示場所に合わせた画像を書き出します。後から別の場所で大きく使う可能性があるため、元画像まで小さく上書きしないことも大切です。
画面幅に合う画像を選ばせる
複数サイズを用意しただけでは、ブラウザはどれを読み込めばよいか判断できません。そこでsrcsetとsizesを使い、利用中の端末と表示幅に合う画像を選べるようにしました。
apricot様の施術室写真では、次のような指定を使っています。
<img
src="/img/top_fv_treatment_room_800.webp"
srcset="
/img/top_fv_treatment_room_800.webp 800w,
/img/top_fv_treatment_room_1200.webp 1200w,
/img/top_fv_treatment_room_hq.webp 2400w
"
sizes="(max-width: 720px) 90vw, 30vw"
width="2400"
height="1545"
alt="Dog care salon apricotの施術室"
>この設定では、画面幅が720px以下の場合、画像がおよそ画面の90%幅で表示されることをブラウザへ伝えています。パソコンでは表示領域が約30%幅になる想定です。
実際にどの画像を選ぶかは、画面幅や端末の解像度をもとにブラウザが判断します。制作側で端末を細かく指定するより、表示候補と使用サイズを正しく伝える形です。
見えない画像は後から読む
ページを開いた瞬間に見える写真は、早めに読み込む必要があります。一方、下へスクロールしないと見えないギャラリーやお知らせの写真まで最初に読み込むと、ファーストビューの表示を遅らせます。
apricot様のギャラリーやお知らせでは、画面外の画像にloading="lazy"を指定しています。これは、画像が表示位置へ近づいてから読み込む設定です。
<img
src="/img/gallery/dog.webp"
alt="トリミング後のわんちゃん"
loading="lazy"
>ただし、最初の画面にあるロゴやメイン写真へ一律に遅延読み込みを設定すると、必要な画像まで遅れて表示されます。最初に見える画像はすぐ読み込み、下にある画像だけを遅らせるように分けます。
Instagramの写真をホームページへ表示する仕組みについては、Instagram投稿をホームページに自動表示する実装例で紹介しています。
縦横比を先に確保する
画像の読み込み前に表示領域の大きさが分からないと、読み込み完了時に文章やボタンが押し下げられます。読もうとした文章が急に動いたり、押そうとしたボタンの位置が変わったりする原因になります。
そこで、画像へwidthとheightを指定し、縦横比を先にブラウザへ伝えます。CSSで表示幅を変えても、元の比率が分かっていれば必要な高さを事前に確保できます。
<img
src="/img/store.webp"
width="1200"
height="772"
alt="店内の施術スペース"
>HTMLへ書く数値は、画面上での固定サイズではなく、画像が持つ縦横比を伝える役割もあります。スマートフォンでは横幅100%に縮めながら、同じ比率で表示できます。
見せたい範囲も調整する
画像を軽くしても、肝心の被写体が切れていては内容が伝わりません。パソコンとスマートフォンでは画像枠の比率が変わるため、同じ写真でも見える範囲が変わります。
犬の顔、施術中の手元、店舗の設備など、写真ごとに見せたい場所を確認します。必要に応じてobject-positionを調整し、枠の中央ではなく被写体を基準に表示位置を決めます。
縦長写真を横長の枠へ無理に入れる場合は、別のトリミング画像を用意したほうが自然です。CSSだけですべて解決しようとせず、使用場所に合う画像を選ぶところから考えます。
公開前の画像チェック項目
画像を掲載したら、パソコンだけでなく実際のスマートフォンでも確認します。
- 最初の画面が長時間空白にならないか
- スクロール中に文章が大きく動かないか
- 写真の主役が途中で切れていないか
- 小さな画面で画像内の文字が読めるか
- ギャラリーを開いたときに待たされすぎないか
- 画像が粗すぎたり、逆に大きすぎたりしないか
- 代替テキストが画像の内容に合っているか
制作環境の高速なWi-Fiだけでは、重さに気づかないことがあります。スマートフォンの通信環境や、初めてアクセスした状態も想定して確認します。
写真を減らさず軽く見せる
写真が多いこと自体が問題なのではありません。大きすぎる画像を一律に読み込ませることや、表示場所を考えずに配置することが、重さや見づらさにつながります。
apricot様のホームページでは、写真をWebPへ変換し、用途に合わせて複数サイズを用意しました。画面幅に合う画像を選ばせ、下にある写真は必要になるまで読み込みを待たせています。
店舗サイトでは、見せたい写真を残しながら表示方法を整えることができます。今回の制作全体は、Dog care salon apricot様のホームページ制作事例で紹介しています。サイト全体のデザインについては、トリミングサロンのホームページデザインもあわせてご覧ください。
写真の枚数や更新方法を確認し、店舗ごとに無理のない構成をご提案します。
