画像の容量を見直す：寸法と圧縮を一つずつ比べる

写真を小さく表示したのに、ファイルの容量は大きいまま。画像の容量を見直すときは、画面で見える大きさと、送る画像ファイルの寸法を区別します。さらに、寸法を変える作業と圧縮の調整を分けて比べましょう。

ここでは架空の陶芸作品一覧に載せる写真一枚を使います。比較する数値は自分の画像で測り、決まった削減率や表示速度の改善を前提にしません。元の写真は上書きせずに残します。

元画像の寸法と、掲載する場所を書き出す

寸法は横と縦のピクセル数、容量はファイルが占めるバイト数です。どちらも「サイズ」と呼ぶと、何を小さくしたのか曖昧になります。記録では「横幅」「縦幅」「容量」と欄を分けてください。

まず画像編集ソフトやファイル情報で元画像の値を確認します。次に、作品一覧のカードで見せるのか、細部を拡大するページでも使うのかを決めます。小さな一覧用の画像だけを残すと、後で大きく見せたいときに選べる素材がなくなります。

画面上の幅をCSSで小さくするだけでは、元のファイルそのものを小さくしたことにはなりません。今回の対象はファイルの書き出しです。読み込み前の表示領域を確保する話は、画像の縦横サイズを指定する記事で扱っています。

寸法だけを変えた候補を二つ作る

例えば元画像から、縦横比を保って横幅1200pxと800pxの二つを書き出します。これは比較のための例であり、すべての掲載場所に適した寸法ではありません。形式と圧縮設定は同じにし、最初は寸法による違いを見ます。

画像はどちらも元ファイルから作成します。小さくした画像をさらに加工し続けると、どの段階で細部が失われたか追いにくくなります。ファイル名には寸法などの違いを付け、元画像と取り違えない場所へ保存しましょう。

web.devの画像処理の解説でも、元画像を保持したまま複数の寸法で出力し、圧縮後の見た目を確認する手順が説明されています。この記事では自動化ツールを導入せず、同じ考え方で一枚を比較します。

採用する寸法で、圧縮の強さを比べる

一覧で必要な細部が残る候補を選んだら、その寸法にそろえて圧縮設定の違う二案を作ります。同じ画像編集ソフト、同じ形式で比較してください。異なる形式やソフトの品質値を、同じ尺度とみなして並べないようにします。

陶芸作品なら、器の輪郭、釉薬の境目、表面の模様など、読者に見せたい部分を先に決めておきます。容量だけを見て選ぶと、その作品を区別する細部まで消してしまうことがあります。

比較表にはファイル名、寸法、形式、圧縮設定、容量、見た目の所見を残します。「きれい」だけでなく「縁の線がにじむ」「模様の違いを判別できる」と書けば、選ぶ理由を説明できます。まだ見比べていない欄は推測で埋めません。

必要な細部が残る画像を、掲載幅で選ぶ

二つの寸法と、選んだ寸法での圧縮違いを用意し、実際の掲載幅で比較します。大きな画面だけでなく、狭い画面でも必要な部分を見てください。高精細な表示環境でも使うなら、その環境で細部が足りるかを別途確かめます。

採用後は練習ページの参照先を変更し、新しい画像が表示されることを確認します。手元で書き出しただけでは、ページが新しい画像を使っているとは限りません。今回の完成物は、選んだ一枚と「何を残して、どの容量になったか」の記録です。

無料レッスンのページに写真を加える場合も、まず一枚で比較しましょう。ファイル容量の比較と通信時間の測定は別なので、速度を測っていない段階では「何秒速くなった」とは記録しません。