【Photoshop】ブログ用スクリーンショットの文字を滲ませず、容量も軽量化する設定方法

「ブログに挿入した画像の文字が滲んで見える。」
「挿入した画像の文字をもっと綺麗に表示したい。」

文字情報が多いスクリーンショットをブログに挿入したとき、文字が滲んだり、ぼやけて見えたりすることはないでしょうか。

たとえば、ツールの解説記事で、設定画面のスクリーンショットを載せたときなどです。一般的に、画像サイズを大きくすると文字は綺麗に表示されますが、ファイル容量は増えてしまいます。

そこで今回は、ブログ用に挿入するスクリーンショットの文字を滲ませず、容量も軽量化できるPhotoshopの設定をご紹介します。

「サイズ × 画質 × 拡張子」が画像の見え方を左右する

前提として、画像の見え方は、次の3つの条件によって左右されます。

• サイズ（横幅）
• 画質（Photoshopで出力時の設定値）
• 拡張子（jpg・pngなど）

これら3つの条件が相互に作用して、ブログ記事上での見え方が決まります。

画像の種類（文字の多い画像・風景写真）と、拡張子の組み合わせによっても見え方や容量に影響が出ますが、今回は「文字の多い画像」を滲ませず、軽量化する方法に絞ってご紹介します。

文字が滲む原因は画質ではなくサイズにある

ブログ用の画像で文字が滲んで見える場合、Photoshopの「画質設定」を変更するよりも、画像サイズ自体を大きくする方が改善度が大きいです。

たとえば、ブログ記事本文の幅が790pxなら、画像は1000pxぐらいの大きめにリサイズしてみてください。

画像内の文字の滲みが軽減されるはずです。

ただ、このままでは容量が増えてしまうので、画質設定を「中画質（50）」に設定するといいです。文字の見え方は変わらないのに、容量のみが軽量化されます。

画像の見え方の比較

例として、以下の画像を見比べてみてください。

僅かな差ですが、記事内のすべての画像が滲んでいると、ユーザーに与える印象はまるっきり変わってしまいます。しかも、文字がくっきり表示されている方が、容量も小さいんですよね。

見え方が綺麗で、容量も軽量化できているので、設定しない手はありません。

ブログ用画像の書き出し設定

文字の多い画像を、Photoshopで書き出すときは、次のポイントを参考に設定してみてください。

• 記事の本文幅より大きいサイズにする
• 画質設定は「中画質（50）」にする
• pngで撮影して、最後にjpgに変換する

WebP化プラグインを使用しているWordPress環境などでも、アップロード前の画像の書き出し設定が見え方に影響しますので、この設定で書き出すのがおすすめです。

画質設定は、ファイル > 書き出し > Web用に保存 から設定します。

以下の画面が開くので、右上の設定箇所で、画質や拡張子を設定します。

JPEG、画質50になっていることを確認できたら、「保存」してOKです。

この設定が向いているケース

今回ご紹介した設定は、すべての画像に万能というわけではありません。

向いているのは、次のようなケースです。

• ツールやサービスの操作方法を解説する記事
• 設定画面・管理画面など、文字情報が多いスクリーンショット
• ブログ記事内で、画像を本文幅に合わせて表示している場合

こういった画像は、写真のような色のなめらかさよりも、文字や線の輪郭が重要になります。

表示サイズが小さいと、文字に使われる情報量が減り、輪郭がぼやけやすくなります。そのため、画質設定を上げるよりも、表示サイズに余裕を持たせた方が綺麗に見えるわけです。

一方で、色の濃淡や質感を重視したい風景写真などは、同じ設定だと劣化して見えることがあります。画像の種類に応じて、サイズ・画質・拡張子を使い分けて調整してみてください。

まとめ

ブログ用のスクリーンショットの文字が滲む場合、次の3点（サイズ × 画質 × 拡張子）をチェックしてみてください。

• 表示サイズよりも少し大きめに書き出す
• 画質は下げすぎず、中画質（50）を基準に
• 文字の多い画像は、pngで撮影して最後にjpgへ変換する

今回ご紹介した設定なら、文字の見え方を綺麗に保ったまま、画像容量を抑えることが可能です。

文字情報が多いスクリーンショットを記事内に挿入する場合は、ぜひこの設定を参考にしてみてください。

スクリーンショット関連のおすすめ記事