読みやすさを残す画像圧縮ワークフロー

まず画像を表示する大きさを決め、出力形式と圧縮品質を順に比べます。写真、図、文字では確認する箇所が異なります。元のファイルを残し、書き出した画像の輪郭や文字とファイルサイズを見て設定を選んでください。

圧縮より先にリサイズする

記事の本文に入れる画像が実際に表示される幅は、スマートフォンで四百ピクセル前後、パソコンでも千ピクセルに届かないことが多いです。それなのに撮ったままの四千ピクセル幅を置くと、圧縮でしか容量を落とせなくなります。まず表示幅の二倍程度までリサイズし、それから圧縮に入ると、同じ容量でずっときれいに残ります。

二倍にするのは、精細な画面で粗く見えないようにするためです。倍率を上げるほど容量は増えるので、写真は二倍、図やスクリーンショットは等倍から二倍の間で試して、読めるところで止めます。実際の表示幅が分からない場合は、そのページを開いて画像の上で幅を測ると確実です。

文字が入った画像は別扱いにする

写真は圧縮に強く、文字と細い線は弱いです。スクリーンショットや図をJPEGで強く圧縮すると、文字の周りに汚れのような影が出ます。文字入りの画像はPNGか、対応している環境ならWebPを選びます。写真は逆にPNGだと容量が膨らむので、JPEGかWebPが向いています。

迷ったら、圧縮後の画像を実際に表示される幅で開いて、いちばん小さい文字を読んでみてください。読めなければ形式か圧縮率のどちらかを戻します。図の中に細い罫線があるときは、線が途切れていないかも一緒に見ます。

狭い画面で最終確認する

パソコンの大きな画面では読めた文字が、幅三百九十ピクセルの表示では潰れることがあります。確認はブラウザの窓を狭めるか、実機で開くのが確実です。表や細い数字が入った画像は、この段階で読めないと分かったら、画像を分割するか該当部分を切り出して大きく見せます。

縦に長い画像は、狭い画面だと縮んで全体が読めなくなります。上下で二枚に分けて、順番が分かる名前を付けると読み手が追えます。分けるときは、区切りが話の切れ目に来るようにします。

うまくいった設定を控えておく

同じ種類の画像を繰り返し扱うなら、一度うまくいった設定を書き留めます。用途、横幅、形式、圧縮の強さの四つを一行にしておけば、次からは考えずに同じ手順を通せます。ブログの本文用、資料の図版用、共有用のスクリーンショット、というように用途別に三行あれば足ります。

圧縮した画像を原本に上書きしないでください。後で別の場所に使い回すとき、圧縮済みをさらに圧縮すると劣化が積み重なります。原本は撮ったままの状態で別のフォルダに残し、書き出したものだけを使い回します。

出発前の確認

• 圧縮前の表示サイズ調整
• 文字入り画像のモバイル確認
• 高品質原本の保管

リサイズ、形式の選択、狭い画面での確認、設定の控えと原本の保管。手順を固定すると、画像一枚あたりの作業は一分ほどに収まります。