いい写真が撮れた！
デザインもバッチリ決まった！
さあWebにアップしよう——と思ったらファイルサイズが4MB。
そのまま載せたらページが重くて表示が遅くなるし、かといって雑に圧縮したら画像が荒くなって色味が、、、
となり、悩んでいる人もいるでしょう。
でも大丈夫！
「画質を保ったまま大幅にファイルサイズを減らす」ことは、やり方さえ知っていれば難しくありません。
JPEG なら元の70〜90%のサイズを削減しても、見た目にはほとんど影響しないケースがほとんどです。
それでは、JPEG・PNG・WebPそれぞれの圧縮の仕組みと、実際の手順を解説していきましょう。
そもそも画像圧縮って何をしているの？
まず「圧縮」で何が起きているかを理解しておきましょう。
方法は、大きく分けて2つあります。
ロッシー（非可逆）圧縮
画像データの一部を削除して軽くする方法です。
削除されるのは、微妙な色の違い、細かいテクスチャ、高周波パターンなどの「人間の目がほとんど気づかない部分」。
JPEGがこの方式の代表格です。
品質設定を下げるほどデータが削られてファイルが小さくなりますが、下げすぎるとノイズやブロック状のアーティファクトが見えてきます。
重要なポイント： 人間の目は、自分が思っている以上に鈍感です。適切に調整すれば、70〜80%のデータを捨てても、画面上ではほぼ違いがわかりません。
ロスレス（可逆）圧縮
データを一切捨てずに、より効率的な形でエンコードし直す方法。
たとえば「赤、赤、赤、赤、赤」を「赤×5」と表現し直すようなイメージです。
PNGがこの方式で、展開すればオリジナルとピクセル単位で完全に同一になります。
ただし、ロッシーほど劇的なサイズ削減はできません。
じゃあ、どっちを使えばいい？
写真やグラデーション豊富な画像 → ロッシー（JPEG / WebP）。
細部が多いので、多少データを捨てても目立ちません。圧縮効果も絶大。
テキスト入りのスクショ、ロゴ、アイコン → ロスレス（PNG / WebP lossless）。
エッジがはっきりした画像はロッシーだとノイズが目立ちます。
迷ったら？
→ WebP にすれば大体解決します（後述）。
JPEG圧縮の「ちょうどいい」設定
JPEGは品質0〜100の数値で圧縮率をコントロールしますが、この数値と実際の見た目の関係は直線的ではありません。
品質100 → 95： ファイルサイズ約半分に。見た目の差はゼロ。100は人間に見えないデータまで保持しているので、100にする意味はほぼありません。
品質95 → 85： さらに30〜40%減。ほぼ違いなし。
品質85 → 75： さらに20〜30%減。よく見ると細部がほんの少し柔らかくなるかも、というレベル。
品質75 → 60： ここから差が見えてくる。色のバンディング（階段状のグラデーション）やエッジ付近のノイズが出始めます。
60以下： はっきりとアーティファクトが見える。サムネイルやプレビュー程度なら許容範囲。
結論：75〜85が正解
実際の数字で見てみましょう。
| オリジナル | 品質85 | 品質75 | 品質60 | |
|---|---|---|---|---|
| サイズ | 2.4 MB | 420 KB | 280 KB | 180 KB |
| 削減率 | — | 82% | 88% | 92% |
| 見た目 | — | 差なし | ほぼ差なし | 劣化あり |
ヒーロー画像やポートフォリオなど見栄えが大事な画像は80〜85。ブログのサムネイルやサブ画像なら70〜75で十分です。
知っておくと得する小ネタ
EXIFデータを消す。
カメラやスマホの写真にはメタデータ（撮影場所、カメラ機種、設定など）が埋め込まれていて、これだけで10〜100KBあります。Web用なら不要なので消してOK。プライバシーの観点からもGPS情報は消したほうがいいです。
プログレッシブJPEGにする。
通常のJPEGは上から順に表示されますが、プログレッシブJPEGは最初にぼやけた全体像が出て、徐々に鮮明になります。体感的に速く感じます。
二度漬け禁止。
JPEGを開いて保存するたびに再圧縮され、さらに劣化します。編集は元ファイルで行い、最終出力で一度だけ圧縮する。これ鉄則です。
PNG圧縮でできること
PNGはロスレスなので「品質を落とす」圧縮はできません。その代わり、以下の方法でサイズを削減できます。
メタデータの削除。
PNGにも不要なチャンク（カラープロファイル、テキスト注釈、作成日時など）が入っていることがあり、これを除くだけで10〜30%減。
フィルターの最適化。
PNG内部の圧縮アルゴリズムにはいくつかの戦略があり、最適化ツールが最も効率的なものを選んでくれます。
パレット削減。
実際に50色しか使っていないPNGに1600万色のフルパレットは不要。使用色だけにすれば（PNG-8化）、ものによっては70%以上の削減も可能です。
スクリーンショット、ロゴ、シンプルなグラフィックは最適化の余地が大きいことが多いです。
WebP：迷ったらこれ
WebPはGoogleが開発したフォーマットで、JPEGとPNGの良いところを併せ持っています。
- ロッシーならJPEGより25〜34%小さい
- ロスレスならPNGより26%小さい
- 透過もアニメーションも対応
- 2025年現在、主要ブラウザの97%以上が対応済み
つまり、ほとんどのケースで「WebPに変換するだけ」でファイルサイズが改善します。
古いブラウザへの対応が気になる場合は、HTMLで出し分ければOK。
<picture>
<source srcset="image.webp" type="image/webp">
<source srcset="image.jpg" type="image/jpeg">
<img src="image.jpg" alt="画像の説明">
</picture>実践ワークフロー：画像圧縮の手順
実際にどういう順番で作業するか、まとめておきます。
① 元画像を用意する
できるだけ高品質のオリジナル画像を使うこと。
すでに圧縮されたJPEGからさらに圧縮すると、劣化の劣化になってしまいます。
② リサイズする
圧縮の前にリサイズ。表示サイズの2倍（Retina対応）を上限にすれば十分です。
4000px幅の画像を800pxで表示するなら、1600pxにリサイズしてから圧縮する感じですね。
③ フォーマットを決める
- 写真 → JPEG or WebP（ロッシー）
- 透過が必要 → PNG or WebP（ロスレス）
- 何でも → WebP が安心
④ 圧縮する
- JPEG： 品質80からスタート。オリジナルと比べて違いがなければ75に下げる。違いが見えたら1段上げる。
- PNG： 最適化ツールに通す。画質に影響なし。
- WebP： ロッシーなら品質80、ロスレスならそのまま変換。
5. 目で確認する
圧縮後の画像を実際の表示サイズで見て、オリジナルと比較してみましょう。
大事なのは「等倍で見て問題ないか」。
200%拡大で粗を探しても、ユーザーがそう見ることはありません。
6. ファイルサイズを確認する
Web用の目安は、以下のような感じです。
- ヒーロー画像（全幅表示）：200KB以下
- 本文中の画像：100KB以下
- サムネイル：30KB以下
- アイコン・ロゴ：10KB以下
超えている場合は、圧縮設定を見直すか、さらにリサイズを検討しましょう。
どれくらい軽くなる？実例3つ
ブログのヒーロー写真（1200×675px）
- 元ファイル：1.8 MB
- JPEG品質80：185 KB（90%削減）
- WebP品質80：132 KB（93%削減）
- 見た目の違い：なし
プロダクトのスクリーンショット（1400×900px）
- 元ファイル（PNG）：2.1 MB
- 最適化PNG：1.4 MB（33%削減）
- WebPロスレス：920 KB（56%削減）
- 見た目の違い：なし（ピクセル単位で同一）
サムネイル（400×225px）
- 元ファイル：340 KB
- JPEG品質75：28 KB（92%削減）
- WebP品質75：21 KB（94%削減）
- 見た目の違い：なし
数字を見ると「本当に？」と思うかもしれませんが、実際にやってみるとわかります。
ちなみに：画像はどこで処理されている？
オンラインの画像圧縮ツールの多くは、画像をサーバーにアップロードして処理しています。
つまり、あなたの画像が第三者のサーバーを経由するということ。
仕事の資料、個人の写真、クライアントのデータ——そうした画像をどこかのサーバーに送るのは、ちょっと気が引けますよね。
Toolipsの画像ツールは、すべてブラウザ内のCanvas APIで処理しています。
画像がデバイスの外に出ることは一切ありません。
アップロードなし、サーバー保存なしなので、安心して使えます。
まとめ
画像圧縮のコツは3つだけ。
1. まずリサイズ。 表示サイズに合わせてから圧縮する。
2. 適切な品質で圧縮。 JPEGなら75〜85。迷ったらWebPに変換。
3. 目で確認。 最終的には自分の目で見て、問題なければOK。
この3ステップだけで、ほとんどの画像は70〜90%軽くなります。
ページの表示速度が上がり、ユーザー体験が改善し、SEOにも好影響。
やらない理由がありません。