結婚式場サイトの写真を、きれいなまま速く見せる。画像の形式・サイズ・読み込み順の決め方

この記事の結論：結婚式場やフォトウェディングのサイトを速くする近道は、写真の数を減らすことではなく、写真の出し方を整えることです。まず、ページを開いて最初に大きく見える1枚を特定し、その1枚だけは遅延読み込みにせず、読み込みの優先度を上げます。2枚目以降は遅延読み込みにして、幅と高さを指定します。そのうえで、画面の幅に合わせた大きさの画像を出し分け、WebP や AVIF を使います。会場を紹介する写真は背景画像ではなく img 要素で表示し、内容の分かる alt を付けます。測定は、最初に大きく見える部分の表示時間を表す LCP を、PageSpeed Insights などで見ながら進めます（目安は2.5秒以内）。

株式会社bundlyzeでは、検索やAIの回答に正しく読まれるためのサイトの整え方（LLMO）を、自社のサイトで実践しています。この記事は、写真が主役になるブライダルのサイトに絞って、表示の速さを画像の側から整える方法を、作る側の目線でまとめたものです。特定の式場の事例ではなく、Google や MDN の公式情報をもとにした一般的な考え方です。

式場サイトが重くなりやすい場所

ブライダルのサイトは、チャペル、披露宴会場、料理、ドレス、ガーデンと、見せたい写真が多くなります。重くなりやすい場所は、だいたい決まっています。

どれも、写真を差し替える担当の人には見えにくい部分です。サイトの作りの側で、誰が写真を入れても重くならないようにしておくのが、作る側の仕事になります。

まず測る：LCPと、どの写真がLCPになっているか

Google は、ページの使いやすさの指標として Core Web Vitals を示しています。目安は次のとおりです（出典：Google の検索セントラル：Core Web Vitals について）。

LCP は、モバイルとデスクトップそれぞれで、ページの読み込みの75パーセンタイルで測ることがすすめられています。また、LCP の対象には img 要素だけでなく、背景画像を持つ要素や動画も含まれます（出典：web.dev：Largest Contentful Paint（LCP））。

写真が主役のサイトでは、LCP になるのはほぼトップの写真です。PageSpeed Insights でトップページを測ると、どの要素が LCP になっているかが表示されるので、まずその1枚を特定します。

最初の1枚：遅延読み込みにしない、優先度を上げる

いちばん効きやすいのが、最初に見える1枚の扱いです。

web.dev では、ページを開いたときに画面に入る可能性が高い画像、特に LCP の画像は、遅延読み込みにしないよう説明されています。遅延読み込みにすると、ブラウザがその画像の位置を把握するまで読み込みが始まらないためです（出典：web.dev：ブラウザレベルの画像の遅延読み込み）。

さらに、fetchpriority="high" を付けると、ブラウザに「この画像を先に読み込んでほしい」と伝えられます。画面内の画像は、通常は低い優先度で読み込みが始まり、レイアウトが決まってから優先度が上がるので、その待ち時間を省けます。ただし、これは命令ではなくヒントで、付けすぎると優先する意味がなくなります（出典：web.dev：Fetch Priority API で読み込みを最適化する）。付けるのは、最初の1枚だけにします。

<img
  src="/img/chapel-1600.jpg"
  width="1600" height="1067"
  alt="自然光が入る白いチャペルのバージンロード"
  fetchpriority="high">

スライドショーにする場合も、1枚目はこの形で HTML に直接書き、2枚目以降を後から読み込みます。1枚目までスクリプトで差し込む作りにすると、スクリプトが動くまで写真の読み込みが始まりません。

2枚目以降：遅延読み込みと、幅・高さの指定

ギャラリーやフェアの一覧など、スクロールして初めて見える写真には loading="lazy" を付けます。あわせて、すべての img 要素に width と height を書きます。web.dev では、幅と高さを指定することで、ブラウザが画像の場所を先に確保し、レイアウトのずれを防げると説明されています。遅延読み込みの画像で指定がないと、ずれの影響が大きくなります。

<img
  src="/img/banquet-800.jpg"
  width="800" height="533"
  alt="窓から庭が見える披露宴会場の円卓"
  loading="lazy">

width と height は、表示する大きさではなく、画像の縦横の比率が分かる値であれば足ります。表示の大きさは CSS で width: 100%; height: auto; のように決めます。

画面の幅に合わせて、大きさと形式を出し分ける

スマホで見る人に、パソコンの大きな画面向けの写真を送る必要はありません。srcset と sizes を書くと、ブラウザが画面の幅と画素の細かさに合わせて、ちょうどよい大きさの画像を選びます（出典：MDN：HTML のレスポンシブ画像）。

さらに picture 要素を使うと、AVIF や WebP に対応したブラウザには新しい形式を、対応していない環境には JPEG を出せます。Google 検索は、JPEG や PNG のほか、WebP と AVIF の形式にも対応しています。また、srcset や picture を理解しないクローラーもあるので、img 要素の src に代わりの URL を必ず書くようすすめています（出典：Google の検索セントラル：画像に関するベスト プラクティス）。

<picture>
  <source type="image/avif"
    srcset="/img/garden-800.avif 800w, /img/garden-1600.avif 1600w"
    sizes="(max-width: 768px) 100vw, 50vw">
  <source type="image/webp"
    srcset="/img/garden-800.webp 800w, /img/garden-1600.webp 1600w"
    sizes="(max-width: 768px) 100vw, 50vw">
  <img
    src="/img/garden-1600.jpg"
    width="1600" height="1067"
    alt="夕方のガーデンに並ぶ白い椅子とアーチ"
    loading="lazy">
</picture>

この形を、写真を入れるたびに手で書くのは現実的ではありません。サイトの仕組みの側で、元の写真を1枚入れれば、決めた幅と形式の画像が自動で作られ、上の HTML が出力されるようにしておきます。

会場を紹介する写真は、背景画像にしない

写真の上に「チャペル」「ガーデン」のような見出しを重ねるデザインでは、写真を CSS の背景画像で表示することがよくあります。見た目は同じでも、Google の説明では、CSS で表示した画像は画像検索のインデックスに登録されません。

会場や料理、ドレスのように、それ自体を見てもらいたい写真は img 要素で表示し、文字は CSS で写真の上に重ねます。alt には、その写真に何が写っているかを短く書きます。「結婚式場 チャペル おしゃれ おすすめ 人気」のように語を並べるのは、Google がキーワードの乱用として避けるよう書いている書き方です。

alt は、目の不自由な人が読み上げで写真の内容を知るための文章でもあります。検索のためだけでなく、写真の説明として書きます。

写真を入れ替える人のための手順を1枚にする

ブライダルのサイトは、季節のフェアや新しいプランのたびに写真が入れ替わります。作ったときに速くても、運用で重くなることがあるので、写真を入れる人向けの手順を決めておきます。

1. 書き出しの大きさの上限を決める。 サイトでいちばん大きく表示する幅を基準に、それ以上の大きさの写真は入れない
2. 元の写真を1枚入れれば済む仕組みにする。 縮小や形式の変換は、サイトの仕組みが自動で行う
3. alt を入れる欄を必須にする。 空のまま公開できないようにする（装飾の画像は除く）
4. トップの写真を差し替えたら、測り直す。 PageSpeed Insights で LCP と、LCP になっている要素を確かめる
5. スマホの実機で開く。 写真の色味、文字の重なり、読み込み中にボタンがずれないかを見る

写真の見せ方は式場ごとに違っても、出し方の決まりは共通です。サイトの作りと運用の手順を一緒に整える進め方は、会社サイトのWebサイト制作のページにまとめています。

※引用した公式情報の確認日は2026年10月2日です。ブラウザの対応や Google の説明は変わりうるため、実装の前に最新の内容を確認してください。