画像の圧縮は、見せたい情報を残しながら画像ファイルの通信量を減らす作業です。製品ページでは、原本を残し、表示寸法を合わせ、形式と画質を比較してから差し替えます。
最初に、主力製品のページをスマホで開いてください。大きな製品写真、加工面の拡大写真、寸法図を選び、元ファイルの容量と縦横の画素数を書き出します。重い画像を見つけても、全部を同じ品質設定で書き出す前に、その写真で何を判断してもらうかを決めます。
ここで扱うのは画像の作り方と配信の確認です。ページ全体の速さや表示のずれを測る指標はCore Web Vitalsの意味と直し方で説明しています。
圧縮する前に、何を残しておく？
撮影した写真や書き出し前の図面は、公開用とは別に保管します。編集は複製したファイルで行い、元へ戻せる状態にしてください。公開用の小さな画像しか残っていないと、拡大表示や別の用途に使う際に作り直せません。
一覧には、掲載ページ、画像の役割、原本の保存先、現在の容量を記します。写真の見せたい部分を、営業や技術担当に確認する欄も用意します。見た目を整える担当だけで、加工面の細かな筋を不要と判断しないためです。
たとえば樹脂部品の写真なら、外形を伝える全体写真と、表面の状態を伝える拡大写真では必要な細部が違います。同じ部品でも、全体写真で許容できた圧縮が、加工面の説明では使えないことがあります。
圧縮対象を選ぶ際は、公開してよい画像かも確認します。顧客の図面や未公開製品の写真を、試しに外部の圧縮サービスへ送る運用にはしません。会社で使用を認めた方法で処理してください。
大きさと容量は、どう違う？
画像の縦横の画素数と、保存したファイルの容量は別です。画面上で小さく表示しても、巨大な元画像を配信していれば、そのファイルを受け取る負担は残ります。
次の順番で調整します。
- 一覧、本文、拡大表示のどこで使うかを決める
- その表示に必要な画素数で画像を用意する
- 形式と圧縮設定を変えて書き出す
- 表示する大きさで元画像と見比べる
- 容量と見え方を記録し、採用するファイルを決める
小さい画面向けだからといって、画面幅と同じ画素数だけ用意すれば済むわけでもありません。web.devの画像サイズの指定方法は、画面の密度によって必要な画像の解像度が変わることを説明しています。高密度のスマホでも輪郭がぼやけないかを見ます。
拡大して傷や刻印を見るページなら、本文用と拡大用を分けて設計します。本文には軽い画像を表示し、必要な人が大きい画像を開けるようにすれば、最初から全員に拡大用の容量を読ませずに済みます。
WebP・AVIFは、どう試す？
Google検索セントラルの画像の基本事項には、WebP・AVIFを含む対応形式が示されています。検索用だからJPEGに固定する必要はありません。
web.devのWebPの説明では、情報の一部を省いて軽くする非可逆圧縮と、情報を戻せる可逆圧縮の両方を扱っています。AVIFの説明も、少ない容量で写真の見え方を保つための形式として紹介しています。
実際の写真でJPEG、WebP、AVIFを書き出し、容量と細部を比較します。形式を変えただけで必ず軽くなると決めず、同じ写真を同じ表示条件で比べてください。書き出しソフトが違えば、品質の数値も同じ意味とは限りません。
背景が透明な画像なら、透明部分や製品の縁も確認します。ページの背景色を変えると縁の乱れが目立つことがあるため、画像編集画面だけで採用を決めません。使うブラウザで表示を試し、必要ならpicture要素で別形式への切り替えを制作担当に実装してもらいます。
どこを目で見て、圧縮を止める？
web.devの圧縮を運用へ組み込む解説は、書き出した画像で次の点を見るよう説明しています。
blurring and compression artifacts
ぼけと、圧縮によって生じる不自然な模様です。容量の削減率だけを合格条件にせず、製品について判断できるかを確認します。次は製造業の画像で使える確認項目です。
| 画像 |
残したい情報 |
不採用にする変化 |
| 全体写真 |
外形・取付穴 |
穴の縁が不鮮明になる |
| 加工面の写真 |
筋・傷・表面の差 |
比較したい差が消える |
| 刻印の写真 |
型番・文字の区別 |
文字が別の字に見える |
| 寸法図 |
細線・記号・小数点 |
線や記号が欠ける |
元画像と処理後を同じ大きさで並べます。本文で使うサイズに加え、読者が拡大して見る範囲も確認してください。表示を小さくしただけで判別できなくなるなら、圧縮より先に見せ方を変えます。
加工前後を比較する写真では、両方に同じ処理をかけても、差が正しく残るかを見ます。元から細かな傷がある側だけ、圧縮で滑らかになるなら採用できません。写真の目的を知らない人にも、どちらの状態か見分けてもらいます。
図面の文字が潰れるなら、品質を戻す、可逆圧縮を試す、説明する部分を拡大して分ける、といった修正をします。寸法や条件を画像だけに閉じ込めず、本文や仕様表からも読めるようにしてください。代替テキストに何を書くかは製品写真と図面のalt属性にまとめています。
容量を減らすために、必要な細部を消さない
写真が示す加工面や図面の注記を読めなくしてまで、小さいファイルを採用しません。元の画質へ戻し、表示の分け方や読み込み方を調整します。
軽くした画像を、端末に合わせて届けるには？
一つの画像を全端末へ送る代わりに、幅の違うファイルを用意します。srcsetで各ファイルの幅を示し、sizesでページ内の表示幅を伝えると、ブラウザが表示条件に合わせて選べます。
同じ写真の、同じ切り取りと縦横比で作るのが基本です。違う写真を混ぜるための指定ではありません。前述のweb.devの解説は、srcsetを単純な画面幅ごとの切り替え命令と捉えないよう説明しています。
制作担当へは「スマホ用も作って」だけでなく、一覧での表示幅、本文の最大幅、拡大する用途を渡します。CMSが自動生成する場合も、ページのsrcsetに生成済みのファイルが入っているかを確認します。
Googleの画像ガイドは、srcsetなどを使う場合にも、img要素のsrcへ代わりに使えるURLを指定するよう案内しています。画像のURLを変えたら、存在するファイルへ参照が向いているかも確かめてください。
寸法指定と遅延読み込みは、何を変える？
圧縮はファイルを軽くする作業、寸法指定は表示前の場所を確保する作業です。web.devの表示のずれを防ぐ説明では、画像にwidthとheightを入れる方法を示しています。画像が来た後に本文やボタンが動くのを抑えるためです。
属性には画像の縦横比に合う寸法を入れます。そのうえで、CSSでは表示幅を枠内に収め、高さを自動調整します。属性を追加しただけで、すべての画面へ固定サイズを押し付けないようにします。
遅延読み込みは、画面外の画像を必要になる頃まで待たせる仕組みです。ブラウザの遅延読み込みの説明に沿って、下部の工程写真などにloading属性のlazyを使います。
最初に見える主力製品の写真、とくにLCPになる画像には一括でlazyを付けません。圧縮できても、読み込み開始を遅らせると最初の写真を待たせます。ファイルの容量と、いつ取りに行くかを分けて制作担当へ確認してください。
差し替え後は、どの画面で確かめる？
公開ページを細いスマホ幅から開き、本文、図面、拡大表示、問い合わせへの移動まで試します。パソコンでも同じ写真を見て、片方だけで判読できる状態を残さないようにします。
通信の確認では、ブラウザの開発者ツールで取得した画像URLと転送量を見ます。新しい画像を作っても、ページが古い大きなファイルを読み続けていたら差し替えは終わっていません。キャッシュの有無など、比較条件も記録します。
速度の再測定はPageSpeed Insightsの読み方へ進めます。点数だけで完了にせず、必要な加工面が見え、図面を読めて、相談へ進めることを確認してください。サイト設計の点検として依頼するときは、対象URL、原本、残したい細部、処理後の容量をまとめて渡せます。
仕様・出典の確認日：2026年10月23日。
