画像ファイルはなぜ種類が多いのか — JPG・PNG・圧縮の基礎
画像を保存しようとすると、JPG、PNG、GIF、WebP のようにフォーマットがいくつもあって、どれを選べばよいか迷います。写真は JPG で、ロゴは PNG で保存しなさい、という話は聞いても、なぜそうなのかは説明を聞く機会が少ないです。
今回の記事では、画像のフォーマットがなぜこんなに何種類もあるのか、その土台にある圧縮とは何か、そしてどのフォーマットをいつ選べばよいのかを、コードなしで解きほぐしていきます。
画像も、結局は数字です #
画面の画像は、とても小さな点がびっしり集まったものです。この点一つひとつをピクセルと呼び、ピクセルごとに何色かが数字で書かれています。先に、コンピュータはすべてを 0 と 1 で表すと話しましたが、画像も例外ではありません。色を数字に変え、その数字を 0 と 1 で保存するのです。
問題は、点が多すぎるという点です。いまどきの写真一枚には数百万のピクセルが入っていて、色の数字をそのまま全部書くと、ファイルがとてつもなく大きくなります。だからほとんどの画像は、圧縮を経て保存されます。
圧縮は、容量を小さくする技術です #
圧縮は、同じ絵をより少ないデータで収める技術です。大きく二つの枝があります。
一つは可逆圧縮です。情報を一つも捨てずに賢く縮め、広げると元とまったく同じに戻ります。たとえば同じ色が広く続くなら、「この色がここからそこまで」と書いて容量を節約する、という具合です。もう一つは非可逆圧縮です。人の目に気づかれにくい情報を少し捨てる代わりに、容量をずっと大きく減らします。少しの画質を譲って、軽さを得るわけです。
だから、フォーマットごとに得意が違います #
画像のフォーマットがいくつもある理由が、ここにあります。フォーマットごとに圧縮の方式と、よく合う用途が違うからです。
JPG は非可逆圧縮を使い、写真に向いています。色が微妙に変わる写真を小さな容量で収めるのが得意です。反対に PNG は可逆なので、ロゴや文字、くっきりした線のあるグラフィックに向いていて、背景を透明にすることもできます。GIF は簡単な動く画像に使われます。最近は WebP や AVIF のように、より小さな容量で近い画質を出す新しいフォーマットも広く使われています。写真を PNG で保存すると無駄に重くなり、ロゴを JPG で保存すると文字のふちが汚くなるのは、この違いに理由があります。
フォーマットをうまく選ぶと、画面が速くなります #
画像は、ウェブページでもっとも重い資源の一つです。文字は軽いのに画像はそうではないので、大きな画像がたくさん入ったページは、開くのに時間がかかります。だから用途に合うフォーマットを選び、画面に必要なぶんだけ大きさを縮めるだけでも、ページが目に見えて速くなります。
先に扱った CDN とキャッシュも、ここで一緒に働きます。うまく圧縮した画像を近くに置き、一度受け取ったものはキャッシュしておけば、重い画像も速く届きます。フォーマットの選択と配信の最適化がかみ合って、画面の速さを作ります。
だから、画像を扱うとき #
目安は単純です。写真のように色の豊かな画像は JPG か WebP で、ロゴや透明な背景が必要なグラフィックは PNG で保存すれば、だいたい合っています。そして、画面に見える大きさよりはるかに大きい元の画像を、そのままアップロードしないことが大切です。手のひらほどに見える画像を巨大な元のままアップロードすると、見えない容量までユーザーがダウンロードすることになります。
なぜ非開発者が知っておくと仕事が楽になるのか #
- フォーマットを正しく選べます。 写真とグラフィックで合うフォーマットが違うと知っていれば、画像をアップロードするときに重くなったりぼやけたりする失敗を減らせます。
- 遅いページを診断できます。 画像が画面を重くすると知っていれば、ページが遅いときにまず画像を見られます。
- 元の画像を整えてアップロードできます。 画面の大きさに合わせて縮めてからアップロードする習慣だけでも、ユーザーにより速い画面を渡せます。
まとめ #
今日は、画像が結局は色を記した数字であり、その大きな容量を減らすために圧縮を使い、フォーマットごとに圧縮の方式と合う用途が違うことを見てきました。写真は JPG か WebP、くっきりしたグラフィックは PNG という目安と、画面に合わせて大きさを縮めるという原則が肝心です。
画像が 0 と 1 でどう表されるのかをもっと知りたければコンピュータはどうやって0と1ですべてを表すのかを、重い画像を速く届ける CDN とキャッシュが気になればなぜ「キャッシュを消してみて」と言うのか — キャッシュと CDNを一緒に読んでみることをおすすめします。