画像圧縮ガイド：画質とファイルサイズのバランスの取り方

画像圧縮が必要になる場面

よくあるのはアップロードの上限です。応募フォーム、メール添付、チャット、EC の管理画面にはファイルサイズの制限があり、スマートフォンで撮った写真はそのままでは超えてしまうことがあります。もう一つは表示速度です。未加工の大きな画像が数枚あるだけで、最初の表示が目に見えて遅くなります。

見落としやすいのは保存と転送のコストです。商品画像やスクリーンショットを何百枚もクラウドに置くと容量を使いますし、日々の受け渡しにも時間がかかります。ただし、元の画像を別に残しておくことが前提です。圧縮は提出用・公開用のコピーを作る作業で、唯一の原本を置き換えるものではありません。

サイズと品質を調整する正しい順序

先にサイズを変え、そのあと品質を調整します。実際に表示するのに必要なピクセルまで長辺を落とすほうが、品質を極端に下げるより効果的で、ぼやけた印象にもなりにくいです。サイズが決まったら、品質を高い側から少しずつ下げ、プレビューを見ながらファイルサイズと細部のバランスを探します。

出力形式は用途で選びます。JPG は互換性が最も高く、写真や相手が不明な場面に向きます。WebP はより小さくなりやすく透明にも対応しますが、古いソフトや一部の投稿システムでは受け付けられません。小さな文字を含むスクリーンショット、線画、ロゴは圧縮の影響が出やすいので、品質を高めにして 100% 表示で確認します。

• サイズを先に変え、品質は後から調整する
• 互換性は JPG、Web の軽量化は WebP
• 文字と輪郭は 100% 表示で確認する

代替手段と、圧縮すべきでない場合

保存・再編集・撮影記録用の画像は圧縮してはいけません。canvas での再エンコードでメタデータが失われ、非可逆圧縮は元に戻せません。原本を別に保存し、公開用のコピーだけを圧縮します。透明を残したいのに JPG しか受け付けない場合も、方針を変えるべきです。JPG に透明チャンネルはなく、透明部分は単色で埋まります。

Web の表示速度が目的なら、圧縮は手段の一つにすぎません。画面幅に応じた画像を出し分ける、CDN に WebP への変換を任せる、キャッシュを効かせるといった施策のほうが効果が大きいことがあります。逆に、すでに十分小さい画像は再圧縮してもほとんど小さくならず、かえって大きくなることがあります。そのまま使いましょう。