画像の圧縮方法は幅・形式・品質の順｜WebP変換の手順と画質の確かめ方

画像生成で作った画像やデザインの画像を PNG のまま保存すると、1枚で1MBを超えることがあります。表示速度の計測で画像の容量を減らすよう指摘されても、幅・形式・品質のどれから直すかは計測の結果だけでは決まりません。

画像の圧縮は、進める順番を決めれば、画質を確かめながら容量を大きく減らせる作業です。この記事では、Webサイトに載せる画像の圧縮方法を、元の画像を残す・表示する幅に縮める・形式を選ぶ・品質を決めるの順で解説します。WebP への変換の手順と、圧縮したあとに容量と画質を確かめる方法もあわせて載せました。

記事を読めば、自社の画像をどこまで小さくできるかを、数字と目の両方で確かめながら圧縮できます。株式会社メリルが運営するオウンドメディア相談室の記事の画像(イラスト)87枚では、元の PNG の1枚1.32MB(中央値)が、品質90の WebP で108.2KBになりました。可逆の PNG を非可逆の WebP に変えるだけで容量は元の1割ほどになり、表示する幅に縮めればさらに半分ほどになります。

画像の圧縮は元の画像を残し、幅・形式・品質の順に進める

画像の容量は、画素の数・保存の形式・圧縮の強さで大きく変わります。Webサイトに載せる画像を圧縮するときに進める作業は、以下の4つです。

• 圧縮する前に元の画像を別の場所に残す
• 表示する幅に合わせて画像を縮める
• 写真はWebPかJPEG、図やロゴはSVGかPNGにする
• 品質の数値を下げて容量を減らす

圧縮する前に元の画像を別の場所に残す

圧縮を始める前に、元の画像をサイトに載せる画像とは別の場所に保存します。品質を下げる圧縮(非可逆圧縮)は画像の情報の一部を捨てるため、圧縮したあとの画像から元の画質には戻せません。

元の画像が手元にあれば、表示する幅を広げたいときや別の形式に変えたいときに、元の画像から書き出し直せます。

元の画像の置き場所の例は、以下のとおりです。

• 社内の共有フォルダ
• 会社で契約しているクラウドのストレージ
• 制作会社から納品されたデータの保管場所

メリルが運営するオウンドメディア相談室でも、画像生成で作ったアイキャッチと図解の元の PNG を、サイトのファイルとは別の場所に残しています。サイトの元になるファイルとして置くのは、元の PNG から変換した WebP です。

表示する幅に合わせて画像を縮める

画像は、ページで表示される幅に合わせて縮めてから載せます。表示される大きさより大きい画像を送っても、データが増えて読み込みが遅くなるだけで、画面での見え方は変わらないためです。

表示される幅は、サイトのデザインで決まります。記事の本文の幅や一覧のカードの幅のように、画像を置く場所ごとの幅を、デザインの指定やテンプレートの設定で確かめましょう。

幅を縮めるだけでも、容量は大きく減ります。オウンドメディア相談室で2026年10月30日18時時点に使っていた写真風のアイキャッチ22枚を品質80の WebP で書き出すと、幅1,536ピクセルで中央値44.1KB、幅760ピクセルで18.9KBでした。幅を半分弱にすると、容量は43.5%に減っています。

同じ日の21時時点のイラストのアイキャッチ15枚でも、サイトの仕組みが書き出した幅760ピクセルの WebP は、幅1,520ピクセルの50.5%の容量です(中央値)。幅を半分にすると画素の数は4分の1になり、容量は画素の数ほどには減らないものの、表示する幅に合わせて縮めるだけで半分ほどになりました。

画面の大きさが違う端末に合わせたいときは、幅の違う画像を2つ以上用意します。img 要素の srcset 属性と sizes 属性に書いておけば、画面に合う画像をブラウザが選んで読み込みます。

写真はWebPかJPEG、図やロゴはSVGかPNGにする

画像の形式は、画像の中身に合わせて選ぶのが基本です。写真は画質を少し落として容量を減らす非可逆圧縮と相性がよく、WebP か JPEG が向いています。ロゴやアイコンのように細部を失いたくない画像は、拡大しても崩れない SVG か、画質を落とさない可逆圧縮の PNG・可逆の WebP にします。

画像の種類ごとの形式の選び方は、以下の表のとおりです。

画像の種類	第一候補	代わりに使う形式
写真	WebP・JPEG	JPEG
アイコン	SVG・可逆の WebP・PNG	PNG
スクリーンショット	可逆の WebP・PNG	PNG・JPEG
図・イラスト・グラフ	SVG	PNG

画像生成で作ったイラストや図解は、平らな色に見えても色の数が多いことがあり、その場合は可逆の形式では容量が大きく残ります。オウンドメディア相談室の記事の画像87枚(2026年10月30日21時時点のイラスト)は、1枚に使われている色が中央値で約5万色でした。可逆の WebP にすると、品質90の非可逆の WebP の7.5倍の容量が残ります。SVG で作り直せないイラストは、写真と同じく非可逆の WebP にし、文字のまわりを拡大して確かめながら品質を決めましょう。

WebP は主要なブラウザが対応している形式で、AVIF も主要なブラウザの最新版が対応しています。Google 検索が img 要素の src 属性から扱う画像の形式は、BMP・GIF・JPEG・PNG・WebP・SVG・AVIF の7つです。写真を WebP に変えても、検索に使われる形式から外れることはありません。

古いブラウザでも表示させたい場合は、picture 要素で WebP の画像と、代わりに表示する JPEG や PNG の画像を並べて指定する方法があります。

画像のファイル名や alt 属性の書き方は、画像SEOの記事で解説しています。

» 画像SEOはaltの棚卸しから｜alt属性の書き方とファイル名・置き方の直し方

品質の数値を下げて容量を減らす

幅と形式を決めたら、最後に品質の数値で容量を調整します。品質は、非可逆圧縮の強さを0〜100で指定する数値で、小さくするほど容量は減り、画質も下がります。

品質を下げたときの容量の減り方は、一定ではありません。2026年10月30日18時時点の写真風のアイキャッチ22枚を幅1,536ピクセルの WebP で書き出すと、品質を95から80に下げたときに、容量は中央値で品質95の37.4%になりました。品質を80から50まで下げても、容量は品質80の64.2%までしか減っていません。21時時点のイラスト87枚でも、95から80で46.8%・80から50で69.5%と同じ傾向でした。

品質を決める手順は、以下のとおりです。

1. 品質80で書き出す
2. 元の画像と並べて、等倍で見比べる
3. 違いがわからなければ、品質を5ずつ下げて書き出し直す
4. 違いが見えたら、1つ前の品質に戻す

出典：Squoosh(https://squoosh.app/)で、オウンドメディア相談室の記事のアイキャッチの画像を開いた画面(2026年10月31日)。

このメディアのアイキャッチの画像(PNG・1.19MB)を、2026年10月31日に Squoosh で WebP の品質80にすると、54.8kB(95%減)と表示されました。

品質80から始めるのは、95から80までの間で容量が大きく減り、80より下では下げても減り方が小さいためです。オウンドメディア相談室の記事の画像(文字の入ったイラスト)は、品質90の WebP にしています。

画像をWebPに変換する手順

変換する画像の枚数とサイトの作りによって、向いている方法が変わります。画像を WebP に変換する方法は、以下の3つです。

• 画像編集ソフトの書き出しで1枚ずつWebPにする
• cwebpで幅と品質を指定してまとめて変換する
• CMSやサイトの仕組みに変換を任せる

画像編集ソフトの書き出しで1枚ずつWebPにする

変換する画像が数枚なら、画像を作った編集ソフトの書き出し(エクスポート)で、保存の形式に WebP を選ぶのが手軽です。書き出しの画面で品質を指定できる場合は、品質80から試します。

書き出すときに決める項目は、以下のとおりです。

• 書き出す幅(ピクセル)
• 形式(WebP)
• 品質の数値
• ファイル名

書き出しの形式に WebP が無い編集ソフトでは、PNG で書き出してから、cwebp などの変換の道具で WebP にします。JPEG で書き出してから変換すると、非可逆の圧縮を2回重ねることになります。

cwebpで幅と品質を指定してまとめて変換する

cwebp は、WebP の開発者向けのページで Google が公開している、画像を WebP に変換するコマンドラインの道具です。画像が多いときや、同じ条件で何度も変換するときに向いています。

1枚の画像を変換するときの書き方は、以下のとおりです。

cwebp -q 80 -resize 1200 0 photo.png -o photo.webp

-q は品質で、0〜100の数値を指定します。指定しないときの品質は75です。-resize は縮めたあとの幅と高さで、高さを0にすると縦横の比を保ったまま縮めます。-o のあとに書くのは、書き出す WebP のファイル名です。

フォルダの中の PNG をまとめて変換するときは、Mac や Linux のターミナルで、以下のように1枚ずつ繰り返します。

for f in *.png; do cwebp -q 80 "$f" -o "${f%.png}.webp"; done

ロゴや図を劣化させずに WebP にしたいときは、-lossless を付けて可逆の WebP にします。

変換に使った幅と品質は、記録に残しておきましょう。オウンドメディア相談室では、画像処理のライブラリ sharp を使うスクリプトで、記事の画像を白の背景で不透明にしてから品質90の WebP に変換しています。2026年10月30日21時時点の87枚は、元の PNG の写しを同じ条件で変換し直すと、87枚ともサイトに置いた WebP とバイト単位で同じファイルになりました。条件の記録と元の画像があれば、同じ画像を作り直せます。

CMSやサイトの仕組みに変換を任せる

CMS で記事を更新しているサイトでは、アップロードした画像を自動で圧縮・変換する仕組みを入れると、担当者が毎回変換する手間がなくなります。WordPress なら画像を最適化するプラグイン、Drupal ならアップロードした画像を最適化するモジュールが選択肢です。

オウンドメディア相談室は、静的なサイトを作る仕組みの Astro で作っています。このメディアでは、Astro がサイトを書き出すときに、カードや記事ページで表示する幅とその2倍の幅の WebP を、アイキャッチから自動で作る設定にしています。

2026年10月30日21時時点のイラストのアイキャッチ15枚から、同じ作りで書き出した WebP の容量は、以下の表のとおりです。

画像を置く場所	書き出す幅(ピクセル)	容量の中央値
記事の一覧のカード	346・692	11.6KB・26.2KB
トップページの大きいカード	622・1,244	22.9KB・46.8KB
記事ページの上の画像	760・1,520	28.4KB・56.3KB

記事の一覧のカードに出る幅346ピクセルの画像は、元の PNG の容量の1%ほどです。自動の変換に任せる場合も、書き出された画像が表示に合った幅になっているかは、公開する前に確かめます。

写真風の画像とイラストで形式と品質を変えて容量を測った結果

メリルは2026年10月30日に、オウンドメディア相談室の画像で、形式と品質を変えたときの容量と画質を測りました。測ったのは、18時時点で使っていた写真風のアイキャッチ22枚と、21時時点で記事に入れていたイラストのアイキャッチと図解87枚です。元の PNG の写し(写真風は幅1,536ピクセルに縮めたもの)を書き出し、元の画像との近さを SSIM(0〜1で表す画質の指標で、1が元の画像と同じ)で比べています。

測った結果のうち、圧縮の方法を選ぶときに役立つのは、以下の4つです。

• 元のPNGをWebPにすると写真風は3%、イラストは8%ほどになった
• 同じ画質ならWebPはJPEGより写真風で3割、イラストで6割以上小さかった
• 品質の数値が同じでも形式が違えば画質はそろわなかった
• 可逆のまま保存すると非可逆の11〜22倍の容量が残った

元のPNGをWebPにすると写真風は3%、イラストは8%ほどになった

画像生成で作った元の PNG は、写真風のアイキャッチもイラストも、1枚1MBを超えていました。サイトに置く WebP に変換すると、1枚の容量は写真風で元の PNG の2.80%、イラストで8.35%です(どちらも中央値)。

元の PNG と、サイトに置いた WebP の容量は、以下の表のとおりです。

項目	写真風のアイキャッチ22枚(18時時点)	イラスト87枚(21時時点)
元の PNG の大きさ(ピクセル)	1,672×941(1枚は1,672×940)	1,536×864・1,536×1,024
元の PNG 1枚の容量(中央値)	1.60MB	1.32MB
WebP への変換	幅1,536ピクセル・品質82	縮めずに品質90
WebP 1枚の容量(中央値)	44.3KB	108.2KB
WebP 1枚の容量(最小〜最大)	23.1〜65.1KB	78.7〜148.8KB

2つは変換の条件(幅と品質)が違うため、割合の差は、写真風とイラストの圧縮の向き不向きをそのまま表してはいません。同じ条件で変換しても容量は画像の中身によって違い、写真風の22枚で最大2.8倍ほど、同じ大きさの図解72枚で1.7倍ほどの差がありました。

同じ画質ならWebPはJPEGより写真風で3割、イラストで6割以上小さかった

形式の違いは、画質をそろえて比べます。画像ごとに JPEG の品質80と同じかそれ以上の SSIM になる WebP と AVIF を探し、容量がいちばん小さいものを選びました。

同じ画質で比べた容量の中央値と、JPEG の品質80に対する割合(中央値)は、以下の表のとおりです。

形式	写真風のアイキャッチ22枚	イラスト87枚
JPEG(品質80)	92.0KB(100%)	155.7KB(100%)
WebP	62.6KB(70.8%)	53.5KB(34.5%)
AVIF	34.0KB(36.2%)	33.9KB(21.0%)

WebP の非可逆圧縮の画像は、同じ SSIM の JPEG より25〜34%小さくなります。写真風のアイキャッチ22枚では WebP が JPEG より29.2%小さく、この範囲に収まりました。イラスト87枚では65.5%小さく、範囲を大きく超えています。

イラストの WebP は、87枚のうち67枚が、測った中でいちばん低い品質50で JPEG の品質80の画質に届いていました。品質は決まった刻みで変えて探したため、表の容量は、JPEG とちょうど同じ画質になる容量より大きめに出ています。AVIF はさらに小さく、JPEG の容量に対して写真風で4割弱、イラストで2割ほどです。

品質の数値が同じでも形式が違えば画質はそろわなかった

品質の数値は、形式ごとに意味が違います。同じ品質80で書き出すと、WebP の容量は JPEG の半分ほどでした。中央値は写真風で48.9%、イラストで49.4%です。

一方で、品質80の SSIM がどちらの形式で高いかは、画像の種類で逆になりました。写真風の22枚は22枚とも WebP のほうが元の画像から離れ(中央値は WebP 0.9887・JPEG 0.9910)、イラストの87枚は87枚とも JPEG のほうが離れています(WebP 0.9943・JPEG 0.9910)。

写真風のアイキャッチで JPEG の品質80と同じ画質にするには、WebP で品質82〜90が必要でした。イラストで品質90の WebP と同じ画質にするには、87枚とも JPEG の品質95が必要です。JPEG から WebP に変えるときは、品質の数値をそのまま引き継がず、元の画像と見比べて品質を決め直します。

可逆のまま保存すると非可逆の11〜22倍の容量が残った

写真もイラストも、可逆圧縮のままでは容量が大きく残ります。可逆の WebP の容量は品質80の WebP と比べて、写真風のアイキャッチで21.7倍、イラストで11.1倍でした(どちらも中央値)。

イラストは平らな色に見えても、1枚に使われている色は中央値で約5万色でした。色の数を256に減らした PNG は、SSIM が0.9985と品質90の WebP(0.9958)より高いものの、容量は中央値531.9KBで品質90の WebP の4.7倍です。

写真も、画像生成で作ったイラストも、非可逆の WebP にしてから品質で容量を調整します。可逆の形式は、ロゴやアイコンのように細部を残したい画像に使いましょう。

圧縮した画像の容量と画質を確かめる方法

圧縮した画像は、公開する前に画質を確かめ、公開したあとに実際に読み込まれた容量を確かめます。確かめる方法は、以下の3つです。

• 元の画像と並べて等倍で見比べる
• ブラウザの開発者ツールで読み込まれた画像の容量を見る
• Lighthouseの「画像配信を改善する」で残りの無駄を確かめる

元の画像と並べて等倍で見比べる

画質は、元の画像と圧縮した画像を並べ、どちらも等倍(100%)で表示して見比べます。縮小して表示すると、圧縮で出た細かい乱れが見えなくなるためです。

出典：Squoosh(https://squoosh.app/)で、オウンドメディア相談室の記事のアイキャッチの画像を開いた画面(2026年10月31日)。

見比べるときに目を向ける場所は、以下のとおりです。

• 物の輪郭や細い線
• 色がなめらかに変わる部分
• 画像の中の文字

オウンドメディア相談室の図解の1枚で文字の部分を10倍に拡大して並べると、JPEG の品質60では文字のまわりの地に細かな点が出て、AVIF の品質30では文字の線の縁がゆがんでいました。クマのキャラクターの輪郭でも、JPEG の品質60では紺の線とオレンジの境目に色がにじんでいます。品質90の WebP は、どちらの部分も元の PNG と見分けがつきにくい結果です。

ブラウザの開発者ツールで読み込まれた画像の容量を見る

公開したページで実際に読み込まれた画像の容量は、ブラウザの開発者ツールで確かめます。srcset 属性で幅の違う画像を用意したページでは、画面の大きさによって読み込まれる画像が変わるため、実際に届いた画像を見る必要があります。

Chrome で画像の容量を確かめる手順は、以下のとおりです。

1. 確かめたいページを Chrome で開き、開発者ツールの Network パネルを開く
2. 「Disable cache」(キャッシュを無効にする)にチェックを入れる
3. 種類の絞り込みで「Img」を選ぶ
4. ページを再読み込みして、画像ごとの「Size」(サイズ)の列を見る

Size の列には、サーバーから届いたレスポンス ヘッダーと本文を合わせた容量が表示されます。キャッシュを無効にするのは、初めてページを開いた人と同じ条件で読み込むためです。

Lighthouseの「画像配信を改善する」で残りの無駄を確かめる

圧縮しきれていない画像は、Lighthouse の「画像配信を改善する」で探せます。画像の形式ごとに効率のよい1画素あたりの容量と比べ、ダウンロードの容量が必要より大きい画像を一覧にする項目です。

減らせる見込みが4KiBに満たない画像は、一覧に出ません。一覧に残った画像の直し方は、以下の4つです。

• 圧縮を強める(品質を下げる)
• WebP や AVIF などの新しい形式にする
• 動きのある GIF は動画にする
• 表示する大きさに合わせた画像を用意する

一覧に画像が残ったら、幅・形式・品質のどれが足りないかを見て、元の画像から書き出し直します。Lighthouse での表示速度の測り方と、直す順番の決め方は、表示速度の改善の記事にまとめました。

» 表示速度の改善は測ってから｜Webサイトが遅い原因の見つけ方と直す順番

画像を圧縮するときの注意点

写真で問題のない設定が、ほかの種類の画像でもそのまま使えるとは限りません。画像を圧縮するときに気をつける点は、以下の3つです。

• 文字や線の多い画像は品質を下げすぎない
• 透過が必要な画像はJPEGにしない
• 動きのあるGIFは動画の形式にする

文字や線の多い画像は品質を下げすぎない

文字の多いスクリーンショットや図は、文字のまわりの乱れで読みにくくならないように形式と品質を決めます。スクリーンショットは可逆の WebP か PNG が第一候補で、画像に文字が入っている場合は特に可逆の形式が向いています。

オウンドメディア相談室のトップページのデザイン案の画像(941×1,672ピクセル、元の PNG は1,793.6KB)で比べると、容量と SSIM(元の画像との近さを0〜1で表す指標)は以下の表のとおりでした。

形式	容量	SSIM
可逆の WebP	1,224.0KB	1(元と同じ)
JPEG 品質60	174.2KB	0.9770
JPEG 品質80	247.5KB	0.9870
WebP 品質80	157.6KB	0.9913

文字の部分を4倍に拡大すると、JPEG の品質60では文字のまわりの白地に灰色の点が出ていました。可逆の WebP は画質が変わらない代わりに、品質80の WebP の7.8倍の容量が残ります。

文字の多い画像は、拡大して文字のまわりを確かめてから品質を決めます。図やグラフは、拡大しても崩れない SVG で作れないかを先に検討しましょう。

透過が必要な画像はJPEGにしない

背景を透明にしたロゴやアイコンは、JPEG にすると透明な部分を残せません。JPEG はアルファチャンネル(透明度の情報)に対応していないためです。

透過に対応している形式は、以下のとおりです。

• PNG
• WebP(可逆・非可逆のどちらも)
• AVIF

透過したロゴを軽くしたいときは、PNG のまま保存し直すより先に、SVG で用意できないか、可逆の WebP にできないかを確かめます。

動きのあるGIFは動画の形式にする

動きのある GIF は、容量が大きくなりやすい形式です。画面の操作を見せる短い動きなどは、MPEG-4 や WebM の動画にすると容量を減らせます。

動かない画像を GIF で保存している場合は、PNG か WebP に変えます。WebM の動画は、iOS 16 より前の iPhone では再生できない点に注意が必要です。

画像の圧縮方法は幅と形式を決めてから品質を等倍で確かめて選ぶ

画像の圧縮で容量を大きく減らすのは、写真や画像生成で作ったイラストを WebP などの非可逆の形式にすることと、表示する幅に縮めることです。オウンドメディア相談室の記事の画像(イラスト)87枚では、元の PNG の1枚1.32MBが、品質90の WebP で108.2KBになりました(どちらも中央値)。

画像を圧縮するときに進める作業は、以下の4つです。

• 圧縮する前に元の画像を別の場所に残す
• 表示する幅に合わせて画像を縮める
• 写真はWebPかJPEG、図やロゴはSVGかPNGにする
• 品質の数値を下げて容量を減らす

品質は80から試し、元の画像と等倍で見比べながら決めれば、見た目の画質を保ったまま容量を減らせます。まずは自社のサイトで容量の大きい画像を1枚選び、元の画像を残したうえで、表示する幅に縮めて WebP に書き出してみましょう。