画像を軽くする順番 — まず解像度、次に品質値

1. 順番が結果を決める

多くの人はまず品質スライダーを下げます。しかし効果の大きい順番は逆です。

実際に表示するサイズまで解像度を落とす

適切なフォーマットを選ぶ

そのうえで品質値を調整する

横4000pxの写真をWebで800px表示するなら、残りの3200pxはデータを占めるだけで画面には寄与しません。横幅を1/5にすればピクセル数は1/25になります。品質値をいくら下げてもこれほどの削減にはなりません。

2. 不可逆圧縮と可逆圧縮

可逆（PNG、可逆WebP）：元のピクセルがそのまま復元されます。スクリーンショット、図形、文字を含む画像に適します。

不可逆（JPEG、不可逆WebP、AVIF）：人間の目が鈍感な情報を捨てます。写真に適します。

不可逆圧縮は元に戻せません。 一度保存したJPEGを再保存すると劣化が累積します。原本を保管し、複製を圧縮してください。

3. フォーマットの選び方

| 形式 | 向いている対象 | 特徴 |
|---|---|---|
| JPEG | 写真 | 互換性が最も高い、透過なし |
| PNG | スクリーンショット、ロゴ、図形 | 可逆、透過対応、写真では容量過大 |
| WebP | 大半のWeb画像 | JPEGより25〜35%小さい、透過・アニメ対応 |
| AVIF | 写真 | WebPよりさらに小さいがエンコードが遅い |

スクリーンショットをJPEGで保存するのはよくある誤りです。文字の輪郭に汚れ（アーティファクト）が出るうえ、PNGと比べて大きく軽くなるわけでもありません。

4. 品質値はどこまで下げるか

JPEG・WebPの品質値は0.75〜0.85の範囲が実用的な均衡点として知られています。

0.9以上：容量は大きいのに見た目の差はほとんどない

0.75〜0.85：多くの写真で劣化が分かりにくい

0.6以下：空や肌などなだらかなグラデーションに縞（バンディング）が出始める

最適値は画像ごとに異なるため、実際の表示サイズで目視比較するのが最も確実です。

5. 圧縮とプライバシー

スマートフォンの写真にはEXIFメタデータが付きます。撮影日時、機種、そして設定によってはGPS座標まで含まれます。自宅で撮った写真をそのまま公開すると位置が露出しかねません。

キャンバスを介して描き直す方式の圧縮ツールでは、通常EXIFが取り除かれます。ただしツールごとに挙動が異なるため、重要な場合は出力ファイルのプロパティを確認してください。

6. Webパフォーマンスの観点

ページ内で最も大きな画像は通常LCP要素です。つまり画像の重さがそのまま体感の読み込み速度になります。

高精細ディスプレイ向けでも、表示サイズの2倍までにとどめます。

ファーストビュー外の画像にはloading="lazy"を付けます。

画像にwidthとheightを指定してレイアウトのずれ（CLS）を防ぎます。

7. ツール

EVEDAYS 画像圧縮機は、ブラウザ内で圧縮とPNG/JPG/WebPの相互変換を行います。アップロード工程がないため転送中にファイルが露出することはありません。ただし端末自体のマルウェア感染までを防ぐものではありません。

8. 出典

web.dev — Optimize images

MDN — Image file type and format guide