2026-09-10

書き出した画像がぼやける?原因に合わせた7つの直し方

書き出し後の画像のぼやけを、ピクセル数・圧縮・アップロード後の処理から切り分けます。実測比較、PNGとJPEGの選び方、7つの対処法を紹介します。

書き出した画像がぼやける?原因に合わせた7つの直し方

最終更新:2026年9月10日

編集中は鮮明でも、ダウンロードした画像やプレゼンテーション、投稿先ではぼやけて見えることがあります。大きなファイルとして書き出し直したくなりますが、画質低下を引き起こした設定が変わらなければ解決しません。

要点:書き出した画像がぼやけるときはどう直す?

元ファイルを使い、ピクセル単位の寸法を確認してから、元画像・ローカルの書き出しファイル・アップロード後の画像を同じ表示サイズで比較します。書き出しだけがぼやけるならリサイズと非可逆圧縮を、アップロード後だけなら配信先の処理と表示サイズを確認してください。

PNGや可逆圧縮のWebPは既存のピクセルを保持できますが、失われた細部は復元できません。DPIの数値を変更するだけでも、小さなラスター画像は鮮明になりません。

この手順の対象は静止画、スクリーンショット、図版です。失われた証拠の再現、SNSでの画質保証、激しい手ぶれの修復は対象外です。掲載図は条件を管理した合成サンプルであり、Canva、Photoshop、Imagic AIの処理機能を測定したものではありません。

最初にぼやける段階 最初に確認すること 次の対処を選ぶ条件
元の素材 ピントと実際のピクセル数 細部が既にない場合は良い原本を探す
編集画面のプレビューだけ 表示倍率とプレビューの縮尺 デザイン変更前に1枚試しに書き出す
ローカルの書き出しファイル 幅、形式、圧縮 ローカルで細部が失われるなら原稿から再出力
アップロード先のページだけ 配信画像の寸法と表示サイズ ローカルが鮮明なら配信方法を調整

最初にぼやけた版を見つけるのはなぜ重要?

画像は段階ごとに別々の影響を受けます。小さなプレビューがぼやけていても、ダウンロードファイルは正常かもしれません。大きなキャンバスの中で、小さな写真だけが引き伸ばされている場合もあります。サイトが原寸画像ではなくサムネイルを配信することもあります。

最近のCanvaのバナーに関する投稿では、u/theredbedroomが「Canva内でぼやけるのですか、それとも書き出しでもですか?」と尋ねています。投稿者は後で、気になっていたのは購入画面のプレビューだと説明しています。すべての設定を一度に変えるより、この確認が先です。日本語の引用は翻訳です。

別のPowerPointのスクリーンショットに関する投稿では、u/Regular-Accountant87が「スクリーンショットはPNGで、元の状態では鮮明に表示されます」と述べています。問題は後続の工程です。これらは個別の報告であり、どの編集ソフトに問題が多いかを示す調査ではありません。

書き出し画像を直す7つの方法は?

1. 同じ表示倍率で比較する

ピクセル単位や実寸表示に対応したビューアーで、元画像とダウンロードファイルを開きます。同じ文字、輪郭、質感を比較した後、実際の使用サイズでも確認します。小さなウィンドウに収めた画像と、画面いっぱいに拡大した画像を比較しないでください。

それぞれの版を別々に保存し、「元画像」「書き出し」「アップロード確認」などと名付けると、変化の起きた段階が分かります。原本が既にぼやけている場合、書き出し設定では元からない情報を取り戻せません。

2. 必要なピクセル寸法を決める

MBだけでなく、ピクセル単位の幅と高さを確認します。例えばデバイスピクセル比が2の画面で、600 CSSピクセル幅で表示する図なら、1200ピクセル幅を出発点にできます。これは表示条件の例であり、SNS共通の必須仕様ではありません。

配置した素材も確認しましょう。300ピクセル幅の写真を1200ピクセル幅のキャンバスに引き伸ばしても、写真の細部は増えません。フルサイズの原本に戻すか、表示サイズを小さくします。リサイズと画質の解説で、この違いを説明しています。

元の文字と細線を、幅300ピクセルまで縮小して再拡大した同じ画像と比較

左は元のラスター画像、右は300×200に縮小した後、1200×800に再拡大したもの。同じ範囲を見やすく拡大しています。縮小で失われた細部が確認できます。

3. 内容に合った形式を選ぶ

文字、スクリーンショット、図表、透明なグラフィックには、対応していればPNGや可逆圧縮のWebPを試します。写真では高めの品質のJPEGや非可逆圧縮のWebPを原本と比較します。MDNの画像形式リファレンスに各形式の特性が説明されています。

通常の可逆PNGエンコードは、エンコーダーに渡されたピクセルを保持します。ただし、その前に編集ソフトがリサイズ、統合、その他の変更を行うことはあります。「PNGがぼやけた」という事実だけでは、PNG圧縮が原因とはいえません。

配信先が別形式を要求するなら画像変換ツールを使い、結果を確認します。劣化したJPEGをPNGに変換すれば、その保存での追加JPEG圧縮は避けられますが、以前の損傷は元に戻りません。

4. ファイルの大きさではなく圧縮の損傷を減らす

小さな文字に色のにじみが出たり、輪郭の周囲にブロックが見えたりする場合は、寸法を完全に同じにしたまま圧縮を弱めて比較します。寸法と品質を同時に変えると原因を見分けにくくなります。

エンコーダーをまたいで共通の「品質80」という基準はありません。実際の画像で複数の設定を比較しましょう。JPEGの色差サブサンプリングも、品質の数値とは別に細い色文字へ影響します。

PNGの文字と、品質25・4:2:0色差サブサンプリングで保存したJPEGの同じ領域

左はPNGの基準画像、右は品質25、4:2:0のJPEG。損傷を分かりやすく示すために強く圧縮した例で、すべてのJPEG出力を代表するものではありません。

容量が本当の制約なら画像圧縮ツールを使います。出力を採用する前に、最も小さく重要な文字を確認してください。内容が使える状態であってこそ、容量削減に意味があります。

5. マスターから目的のサイズへ一度でリサイズする

最良の原本から各最終サイズを作成します。小さく書き出し、拡大し、スクリーンショットを撮り、再び書き出すような連鎖は避けましょう。最終リサイズ後の適度なシャープ処理は輪郭の見かけのコントラストを改善しますが、強すぎると明るい縁が生じます。

Adobeの再サンプル方式の解説は、拡大、縮小、硬い輪郭のピクセルアート向けの方式を区別しています。画像に合った方式を選びます。最近傍法は意図的なピクセルアートに適しており、写真のぼやけ全般を直す方法ではありません。

一括処理では、まず代表的な1枚を完成させ、実際の掲載先で確認してから同種の画像に設定を適用します。

6. ピクセル数と印刷解像度を分けて考える

PPIは紙面上のピクセル密度です。幅1200ピクセルの画像を300 PPIで印刷すると、幅は4インチです。再サンプルせずにメタデータを600 PPIへ変更すると、細部が増えるのではなく、印刷幅が2インチになります。

Adobeの印刷解像度の説明がこの関係を解説しています。必要な物理寸法と見る距離を印刷会社に確認してください。大きなバナーと小さなカードでは判断が異なります。

文字中心のデザインは、可能なら印刷会社が受け付けるPDFで本来のベクター文字を保持します。ラスターのスクリーンショットをPDFやSVGに入れても、ピクセルがベクターの字形に変わるわけではありません。

7. アップロード後の変化を確認する

ローカルファイルが鮮明なら、その書き出しを繰り返し修正するのはいったん止めます。フィードのサムネイルだけでなく、アップロード後の原寸版とローカル版を比較しましょう。配信先の現行のサイズ案内や、小さい画像版を生成するかも確認します。

自分で管理するサイトなら、実際に配信される画像のピクセル寸法と描画幅を調べます。小さなサムネイルを引き伸ばすと、鮮明な原本でも表示はぼやけます。レスポンシブ画像の解説では、表示サイズ別に素材を用意する仕組みを紹介しています。

SNSでは元の書き出しファイルを直接アップロードして試します。先に別のメッセージアプリで転送しないでください。プラットフォームが全ピクセルを維持する保証はありませんが、到達前の余計な変換は避けられます。

条件を管理した書き出し実験で何を測定した?

2026年9月10日、Sharp 0.34.5とlibvips 8.17.3で、文字と図形からなる独自の1200×800テスト画像を測定しました。元SVGをPNGへラスター化し、300×200のコピーを作り、Lanczos3で再拡大しました。別途、マスターをJPEGと可逆WebPにエンコードしています。

テストファイル ピクセル寸法 実測バイト数 分かること
元PNG 1200×800 53,289 基準のラスター
縮小PNG 300×200 13,248 文字と線に使えるピクセルが減る
縮小後に再拡大したPNG 1200×800 188,462 バイト数が増えても細部は戻らない
JPEG、品質25、4:2:0 1200×800 18,887 強い非可逆圧縮が輪郭を損なう
可逆WebP 1200×800 19,708 小さくしても同一RGBピクセルを保持可能

再拡大版は元PNGの約3.54倍の容量ですが、小さな文字の劣化は明らかに残っています。寸法は1200×800に戻っても、元の細部は戻りませんでした。

可逆WebPについては、両ファイルをRGBへデコードしてバイトバッファーを比較し、一致を確認しました。これはデコード後の色ピクセルの一致であり、メタデータやファイル全体のバイト列の一致ではありません。テスト画像は完全に不透明です。

PNG基準画像と可逆WebP出力で文字および細線の細部が一致している比較図

左がPNG、右が可逆圧縮のWebPです。図中のlosslessは可逆圧縮を意味します。容量は異なりますが、デコードしたRGBピクセルは一致し、切り抜きは同じ倍率で表示しています。

これは1枚の合成図による仕組みの実演です。写真画質のベンチマーク、速度試験、圧縮率の約束ではありません。写真、透明度、メタデータ、エンコーダーや設定が変われば結果も変わります。バイト数はテストファイルの値であり、比較用に組み合わせた掲載図の値ではありません。

書き出し前のチェックリスト

フォルダー全体を処理したり、高解像度ダウンロードに料金を払ったりする前に、順に確認します。

  1. 編集可能なマスターと元素材を残す。
  2. 同じ細部が最初にぼやける段階を探す。
  3. 実際の出力幅と高さをピクセルで読む。
  4. 配置画像だけが拡大されていないか確認する。
  5. 同じ領域を同じ表示サイズで比較する。
  6. 小さな文字や線には可逆形式を試す。
  7. JPEG設定を比べる際は寸法を変えない。
  8. マスターから目的サイズへ直接リサイズする。
  9. 細線、色文字、顔、商品の輪郭を確認する。
  10. サムネイルだけでなく原寸のアップロード結果を見る。
  11. 印刷する場合は物理寸法を印刷会社と確認する。
  12. 有効な設定と出力サンプルを保存して再利用する。

容量上限がある場合は、寸法を確認してから画像圧縮の手順へ進みます。素材自体の寸法を変えるなら画像リサイズツールを使います。修正のたびに最も情報の多い版へ戻れるよう、原本を保持しましょう。

よくある質問

PNGで書き出してもぼやけるのはなぜ?

PNGにも縮小済みや元からぼやけたラスターを保存できるため、可逆圧縮を疑う前にピクセル寸法とエンコード前の画像を確認します。

72 DPIを300 DPIにすれば鮮明になる?

解像度メタデータだけの変更は印刷サイズを変えるもので、既存のピクセルの細部は増えません。

文字にはPNGとJPEGのどちらを使う?

可能なら細かい文字にはPNGなど適切な可逆形式を使い、目的の表示サイズで文字を確認してください。

大きいファイルなのにぼやけるのはなぜ?

拡大はピクセル数とバイト数を増やせても、以前に捨てた細部を取り戻せないためです。

JPEGをPNGにすれば画質は戻る?

追加のJPEG圧縮は避けられますが、既に失われた情報は復元できません。

Canvaからダウンロードするとぼやけるのはなぜ?

元画像、出力ピクセル寸法、ローカルファイルを比較し、変化が書き出し時か、別の場所へのアップロード後だけかを切り分けます。

AI拡大ならすべてのぼやけを直せる?

AIは正確な原本ではなくもっともらしい細部を生成することがあるため、生成された文字や識別情報を証拠として扱わないでください。

ダウンロードは鮮明なのに投稿後だけぼやける場合は?

鮮明なローカルファイルを変える前に、配信先が処理した画像の寸法と表示時の拡大縮小を確認します。

画像の出典と実験方法

4点の図は、同じ合成SVGから作ったImagic AI独自のテスト図です。素材写真や競合のスクリーンショットを製品の結果として使用していません。実験が比べるのはリサイズとエンコードなので、自分の画像が変わる段階を特定してから対応する修正を選んでください。

ガイドを読みながら無料ツールをお使いください。