

画像を軽くしたいだけなのに、圧縮したら文字がにじむ、輪郭が汚い、ノイズっぽくなる…。
これ、圧縮ツールが悪いというより「形式の選び方」と「圧縮の順番」で事故が起きやすいです。
ここでは、文字がにじみにくい圧縮の考え方を、用途→形式→設定の順で整理します。
目次
圧縮で一番バレるのは、写真の肌より文字と境界です。人間の目は直線と文字にすぐ気づくから。
| 壊れ方 | 見え方 | よくある原因 |
|---|---|---|
| 文字がにじむ | 輪郭がボヤける | JPGで圧縮しすぎ |
| 境界がブロック状 | ギザギザ/四角いノイズ | 圧縮強すぎ/縮小の順番ミス |
| グラデが汚い | 段差・ムラ | 低品質WebP/JPGで保存 |
覚え方:文字がある画像は“圧縮に弱い”。だから形式選びが超重要です。
圧縮ツールを探す前に、まず形式を決める。ここが9割です。
小学生でも分かる例え:
PNGは「文字がくっきり残る保存」。
JPGは「写真を軽くする保存」。
WebPは「その中間で軽くて綺麗にしやすい保存」。
用途で決めると迷いません。よく使うパターンを置いておきます。
| 用途 | おすすめ | 理由 |
|---|---|---|
| YouTubeサムネ(文字あり) | PNG → 必要ならWebP | 文字のにじみが出にくい |
| ブログのアイキャッチ(文字あり) | WebP(高品質) | 軽さと見た目の両立 |
| 写真素材(文字なし) | JPG or WebP | 軽くしやすい |
| 透過素材(ロゴ/切り抜き) | PNG | 透過が必要 |
圧縮で壊す人は、だいたい順番が逆です。おすすめの流れはこれです。
圧縮の基本手順
ありがちなミス:先に圧縮してからサイズ変更 → 文字や境界が二重に壊れやすいです。サイズ→形式→圧縮の順番が安定。
ツールによって表示は違うけど、考え方は同じです。「文字があるか」で基準を変えます。
| 形式 | 目安 | 注意 |
|---|---|---|
| PNG | 軽量化は“少し”でOK | 圧縮しすぎると処理に時間がかかることも |
| JPG | 高品質寄りから下げる | 文字があると急ににじむ |
| WebP | “高品質”側で使う | 低品質にすると文字が壊れやすい |
現場の目安:文字がある画像は「軽さ」より「読める」を優先。画像が軽くても読めないと意味がないです。
文字あり(サムネ/バナー)
まずPNGで作る → どうしても軽くしたいならWebPへ。JPGは文字がにじみやすいので、基本は避ける方が安全です。
写真中心(文字なし)
JPGやWebPで軽くしやすいです。背景のグラデが汚くなったら、圧縮を弱めるか、WebPの品質を上げます。
透過PNG(ロゴ/切り抜き)
透過が必要ならPNGが基本です。容量が重い場合は、画像サイズそのものを見直す(大きすぎないか)が先です。
圧縮の成功は、縮小で見た時に決まります。最後のチェックを固定します。
| チェック | 見方 | 直すなら |
|---|---|---|
| 文字がにじまない | 横200〜250pxで文字を見る | PNG/高品質WebPへ |
| 境界が汚くない | 輪郭を拡大 | 圧縮を弱める |
| 容量が目的に合う | ページの表示が重くないか | サイズを見直す |
WebPにすると劣化が心配です
WebPは品質を下げすぎると劣化します。文字がある画像は“高品質側”で使うのが安全です。それでも不安なら、文字ありはPNGのままが一番安心です。
画像圧縮で失敗しない型