画像圧縮で文字やロゴを潰さない設定方法

このガイドで防ぐ問題

容量だけを小さくして、商品画像やスクリーンショットの文字が読めなくなる問題を防ぎます。

画像圧縮は「品質値を下げる」だけでは最適化できません。実際の掲載サイズより極端に大きい画像は、まず寸法を縮小した方が画質を保ちながら容量を減らせます。写真、スクリーンショット、ロゴでは適した形式も異なります。

Web掲載ではファイル容量だけでなく、文字の読みやすさ、透過、輪郭、色の変化を実際の表示サイズで確認します。元画像は残し、圧縮結果を別ファイルとして比較してください。

WORKED EXAMPLE

商品説明用スクリーンショットを圧縮する例

横幅2400px・PNG・2.8MBの画面キャプチャを、記事本文で横幅900px程度に表示するケースです。

元画像
2400 × 1350 px
PNG
2.8 MB
用途: Web記事で約900px幅表示

候補A: 1200px / WebP quality 85 / 210KB
候補B: 900px / WebP quality 80 / 125KB

確認: 小さいUI文字、1px線、透過、背景色を100%表示と実掲載幅で比較

この例で確認するポイント

• 品質値を下げる前に、実掲載サイズに合わせて寸法を調整します。
• スクリーンショットは細い文字や線が潰れやすいため、写真より高めの品質が必要な場合があります。
• 最小容量ではなく、読める画質と容量のバランスで選びます。

写真と図版で形式を分ける

写真はJPEGやWebPで大きく圧縮しやすい一方、文字や単色の多い図版は圧縮ノイズが目立つことがあります。透過が必要な画像をJPEGへ変えると背景が失われます。

形式を決めるときは、元形式に合わせるのではなく「写真か図版か」「透過が必要か」「利用先がWebPへ対応しているか」で選びます。

寸法を先に決める

CSSで900pxに縮小表示するだけでは、2400pxの画像データ自体はダウンロードされます。高DPI表示を考慮しても必要以上に大きい場合は、掲載用途に合わせた複数サイズを用意します。

画像を再利用する可能性がある場合は、原本を別に保管し、配信用のコピーだけを縮小します。

圧縮結果は実掲載条件で見る

圧縮ツール上のプレビューだけでなく、実際のページ背景や表示幅でも確認します。特にスクリーンショットの文字、ロゴの輪郭、グラデーション、透明境界は劣化が見えやすい箇所です。

同じ画像を何度も非可逆圧縮すると劣化が積み重なるため、再編集は圧縮済みファイルではなく原本から行います。

問題が起きる主な原因

• 品質値だけを下げ、画像寸法を見直していない。
• 透過画像をJPEGへ変換して背景が変わる。
• 既に圧縮された画像を何度も再保存している。

安全に作業する手順

1. 1

   掲載サイズに合わせて先に寸法を調整します。

2. 2

   写真はJPEG/WebP、図や透過はPNG/WebPを比較します。

3. 3

   複数品質で出力し、100%表示と実掲載サイズで確認します。

結果を利用する前の確認項目

• 文字、細線、グラデーション、輪郭に破綻がない。
• 透過部分と背景色が意図どおりである。
• 容量削減率と画質のバランスを記録する。

作業完了前のチェックリスト

• 元画像を保存した
• 実掲載サイズを確認した
• 写真・図版・透過の条件から形式を選んだ
• 複数の品質候補を比較した
• 文字・輪郭・グラデーションを確認した
• 圧縮済み画像を何度も再圧縮していない

この方法の限界と注意点

• 圧縮で失われた情報は元に戻せません。
• ブラウザやCMSによる追加圧縮も考慮してください。

関連する無料ツール

UtilityBoxのガイド方針

ツールの操作方法だけでなく、結果を誤用しないための具体例、確認項目、処理の限界、元データを保管すべき場面まで記載します。原因・手順・完了判定・限界を運営者が確認したガイドだけを一覧と検索対象へ掲載します。

品質確認の方法と更新方針を確認する →