画像を軽くする：WebPと寸法指定

画像を軽くするには、WebPなどへ変換した画像を必要な寸法で配信し、HTMLに表示前の場所と読み込むタイミングを指定します。形式、画素数、表示する枠、読み込みの開始は別々に確認してください。

圧縮の強さや製品写真の画質を決める手順は画像圧縮の手順⁠にまとめています。ここでは、用意した画像をページへ出す設定と、実際にそのファイルが配信されているかの確認を扱います。

製造業の製品ページで、冒頭の全体写真と、下部の加工工程の写真を差し替える例で進めます。

形式を変える前に何を見る？

ブラウザの開発者ツールで、ページが取得している画像のURL、ファイルの大きさ、元の縦横の画素数を確認します。画面では小さくても、撮影原本をそのまま送っていることがあります。

CSSで画像の幅だけを小さくしても、取得するファイルは同じです。スマホで小さく表示されていることを、通信量が減った証拠にしないでください。容量を減らす作業と、見せる大きさの調整を分けます。

記録する欄は、掲載URL、画像URL、用途、画素数、容量です。冒頭か下部かも書きます。後で読み込み方を変えるときに、その写真が最初から必要かを判断できます。

WebPは何に対応している？

GoogleのWebPの公式説明では、元の情報を保つ可逆圧縮と、一部の情報を省く非可逆圧縮を扱っています。透明な背景にも対応します。Googleの比較では、同じ画質の可逆のWebPはPNGより26%小さくなります。非可逆のWebPも、JPEGより25〜34%小さいとしています。写真と図面を、一律の設定で変換する必要はありません。

Google検索セントラルの画像SEOの資料では、対応形式にBMP、GIF、JPEG、PNG、WebP、SVG、AVIFを挙げています。WebPのまま画像検索の対象にできますが、形式を変えただけで掲載が決まるわけではありません。

拡張子を.jpgから.webpへ書き換えるだけでは、変換になりません。実際に変換したファイルを用意し、参照する名前もそろえます。公式資料も、拡張子とファイル形式を一致させるよう案内しています。

形式の選択に迷ったら、元と変換後を同じ表示寸法で並べます。刻印や取付穴の形を確認し、通信量が減っても製品の判断材料が消えた画像は採用しません。この画質の判定方法は、前述の圧縮の記事で詳しく扱っています。

寸法の指定は何を変える？

widthとheightは、画像が届く前に縦横比を伝えるために使います。画像の場所が決まっていないと、読み込み後に本文や相談ボタンが押し下げられます。

web.devの表示のずれの説明は、寸法のない画像を、レイアウトがずれる主な原因に挙げています。CSSのaspect-ratioで場所を空ける方法も示しています。属性に縦横比の合う値を入れ、CSSでは画面の枠に収まるようにします。

次は、横幅1200、高さ800ピクセルで書き出した写真の例です。寸法は写真ごとに変えます。

<img
  class="product-photo"
  src="/images/product.webp"
  width="1200"
  height="800"
  alt="樹脂部品の全体と取付穴"
>

.product-photo {
  max-width: 100%;
  height: auto;
}

属性は元画像の縦横比に合わせ、CSSで横にはみ出さないようにしています。縦長の写真なのに横長の比率を書いたり、CSSで高さも固定したりすると、意図しない変形の原因になります。

寸法を変換処理の側から出せるなら、画像とHTMLで別々に手入力しません。画像を切り取って比率が変わったときも、属性が一緒に変わる形にします。

スマホへ大きすぎる画像を送らないには？

同じ写真から幅の違うファイルを用意し、srcsetとsizesで配信する方法があります。前者は画像の候補、後者はページ内での表示幅をブラウザへ伝えるための指定です。

たとえば本文に使う写真と、一覧の小さな写真が同じ原本を読んでいたら、それぞれの表示用途へ分けます。全員へ拡大用の画像を先に送る作りを避けるためです。必要な画素数は画面の密度も関わるので、表示幅だけから一律には決めません。

Googleの画像SEOの資料は、srcsetやpictureを使うときも、imgのsrcへ代わりに使えるURLを入れるよう求めています。特殊な指定だけに画像の参照を閉じ込めないようにします。

遅延読み込みはどこへ使う？

下部の工程写真には、次のようにloading属性を付けます。

<img
  class="product-photo"
  src="/images/process.webp"
  width="1200"
  height="800"
  loading="lazy"
  alt="加工工程で穴の位置を確認する様子"
>

Googleの遅延読み込みの説明は、ページを開いてすぐ見える内容を遅延させないよう求めています。冒頭の製品写真まで共通の型でlazyにしないでください。

同じ資料は、次の理由も述べています。

Google Search does not interact with your page.

Google検索はページを操作しない、という説明です。スクロールやクリックが起きたことだけを条件に画像を出すと、人には見えても、検索側で内容を見落とす原因になります。

ブラウザの機能を使う方法は実装の公式解説⁠で確認できます。遅延は必要になる頃まで待つ仕組みで、画像を圧縮する処理ではありません。ファイルが大きいままなら、読み込みが始まった後の負担は残ります。

画像を検索に見せるには？

Googleは、通常のimg要素のsrcから画像を見つけます。画像SEOの資料では、CSSの背景画像はインデックスに登録しないとしています。製品を説明する写真を、見た目だけ同じ背景画像へ置き換える作業は避けます。

写真の内容が分かるaltと、周囲の説明も残します。ファイルを軽くするために、寸法図の数値まで画像へ閉じ込める必要はありません。代替テキストの書き方はalt属性の書き方⁠で扱います。

容量や属性を整えても、それで終わりではありません。写真を見た読者が、本文の説明と合わせて製品の条件を判断できるかを確かめます。

差し替え後に何を試す？

最初に、ページを読み直し、実際に取得した画像URLと容量を確認します。ブラウザのキャッシュに古い画像が残ることもあるため、比較した条件も記録してください。確認したのが原本か、公開用の画像かを区別します。

次に、狭い画面で冒頭から工程写真、相談ボタンまで読み進めます。画像が入った瞬間に本文が動かないか、下部の写真へ進んだときに表示されるかを見ます。PCでも、必要な細部が判読できるかを確認します。

制作担当には、幅320px⁠に加え、390px⁠、768px⁠、1440px⁠で確認を頼みます。属性を入れたから合格とはせず、表示のずれと取得したファイルの両方で判断してください。

検索側の確認は、Search ConsoleのURL検査の説明⁠に沿って、公開URLのテストと描画後の内容を見ます。人がスクロールした後の画面だけで、Googleにも見えていると結論づけないようにします。

一覧全体が重いときは一覧を軽くする⁠へ進みます。点数の読み方は速度測定の見方で確認し、サイト設計の点検では、容量、寸法、読み込み方のどこを直すかまで指定して依頼します。

仕様・出典の確認日：2026年10月27日⁠。