見た目の画質を落とさずにWeb用に画像を圧縮する方法
画像をすばやく読み込ませつつ鮮明さを保つための、形式・サイズ・画質設定の選び方を解説する実践ガイド。
更新: 2026年10月28日
大きな画像は、Webページが遅くなる最も一般的な原因です。幸い、ほとんどの写真は通常の表示サイズで違いが分からないまま、数分の一のサイズにできます。このガイドでは、重要な3つの判断――サイズ（寸法）、形式、画質――を順に説明します。
1. 圧縮の前にリサイズする
最近のスマートフォンで撮った写真は、横幅が4000ピクセル以上あることがよくあります。ページで1200ピクセルで表示するなら、ブラウザはそのピクセルの大半をダウンロードして捨てることになります。先にリサイズするほうが、画質設定よりはるかに効果的なことがほとんどです。画像リサイズを使い、高精細画面でも鮮明にしたい場合は最大表示サイズの約2倍、ファイルサイズを優先する場合は同じ幅を選びましょう。
2. 適切な形式を選ぶ
- 写真：WebPは同程度の見た目の画質でJPEGより小さくなることが多く、現在の主要ブラウザすべてで対応しています。メールや古いソフトウェア向けには、JPEGが今も最も無難です。
- スクリーンショット、ロゴ、単色や文字を含むグラフィック：PNGは輪郭をくっきり保ちます。ロスレスモードのWebPはさらに小さくなることがよくあります。
- 透過が必要な画像：PNGまたはWebP。JPEGは透過に対応しておらず、透明部分は単色になります。
形式の変更は画像変換（JPG・PNG・WebP）でできます。
3. 画質設定を選ぶ
JPEGとWebPでは、写真の場合は画質70〜85から始めるのがおすすめです。おおよそ60を下回ると、空やグラデーションにブロック状のノイズが出ることがあります。画像圧縮は元のサイズと新しいサイズを並べて表示するので、2〜3の値を試し、見た目に問題のない最も小さいファイルを選びましょう。
4. 隠れたメタデータを削除する
写真には、カメラの機種、日時、場合によってはGPS位置情報などのEXIFメタデータが含まれることがあります。数キロバイト増えるうえ、意図した以上の情報を明かすことがあります。ファイルの中身はEXIFビューア＆メタデータ削除で確認できます。圧縮ツールや変換ツールのようにブラウザで画像を再エンコードすると、EXIFデータは新しいファイルにコピーされません。
クイックチェックリスト
- 実際に表示される最大サイズにリサイズする。
- 写真にはWebPかJPEG、グラフィックにはPNGかWebPを使う。
- 画質80から始め、比較して調整する。
- 公開前に100%表示で結果を確認する。
- 後で別のサイズが必要になる場合に備え、元のファイルを保管する。
このガイドで使ったツール
すべてブラウザ内で動作するため、写真がどこかにアップロードされることはありません。