【Web技術】配信のための画像の知識

概要表

	画質	容量	透過	HTMLでの拡大	用途
png	綺麗	大きめ	OK	NG	ロゴ、小さめのバナー、UI部品、図形、背景が透明な画像
jpg	圧縮すると劣化	小さめ(圧縮をするという前提)	NG	NG	大きめの写真、イラスト、大きいサイズで色数が多い画像
svg	きれい	小さめ （複雑な画像は大きい）	OK	OK	アイコン、文字、単色でシンプルな画像

webP

次世代画像フォーマット。2020年後半以降のブラウザしか対応していないが今後はできるだけサイト内の画像はこれに置き換えるのは望ましい。全ての画像を置き換えるのはブラウザの対応状況からしてまだ厳しい。透過もいけます。

デメリットとしては、サポート状況と画像生成に時間がかかる点

AVIF

webPよりも圧縮率が高いが、まだwebPよりも普及はもう少し後になる。透過もいけます。

デメリットとしては、サポート状況と画像生成に時間がかかる点

JEPG

一般的に写真はこれです。

WebPを使わない場合のファーストチョイスとしては基本はJPEGになります。ブラウザによってJPEGなど旧世代のフォーマットを使うなどの出し分けが必要になります。非可逆圧縮なのでPNGには画質では劣りますが、容量は下がるので配信面では優れています。

quality

画質です。配信においては100ではなく90など少し画質を落とすとサイズが下がります。また、エンコーダーによっても同じqualityによってどれくらい画質が変化するかもかわります。より画質の良いエンコーダーを探すことも重要です。有名なものとしては「mozjpeg」があります。

形式

ベースライン

プログレッシブの方が生成に時間がかからない。

プログレッシブ

一般的にベースラインよりもファイルサイズが小さくなるが生成に時間がかかる。配信する上ではできればこちらを使っっていくべきです。mozjpegはデフォルトでこちらを採用しています。

カラーモード

RGB

Web画像はこちらです。

Exif

JPEGのメタ情報が格納されます。位置情報やサムネイルも含まれるので、ユーザーからの投稿画像を受け付けるときはExif情報を消す対応が必要になったりします。その際は、Exif OrientationとICCプロファイルは消さないようにしましょう。（画像の向きや色味がおかしくなる可能性があります。）

GIF

アニメーションを行いたいときは、画像ならGIFが第一候補になります。ただ、長時間の動画や高度なイラスト風景などmp4などの動画形式を検討するようにしましょう。256色しか使えないので見た目も悪くなってしまいます。ちなみに可逆圧縮です。

PNG

JPEGは透過ができないので、透過させたい場合はこちらを使います。インデックスカラー(8bit)においても半透化ができるのでジャギーが目立ちづらくなります。（GIFでも対応できるがPNGほど透過率を制御できない。）

また、PNGは可逆圧縮なので見た目が劣化しないという特徴もあります。「劣化すると困るのでPNGにしている」というサイトが世の中には存在しますが、パフォーマンス要件的に本当に必要なのかはちゃんと検討する必要があります。（まずはJPEGで試してそれでもクオリティに問題がありそうならPNGにするという感じで検討を進めるのが良いです。）

また、より細かく見たい詳細画面では劣化なしのPNGにして、一覧ではJPEGにするという使い分けでも良いと思います。（要件によりますが。）

PNG8

色数が少ない画像の場合はPNG8を使うと良いです。PNGの中ではかなり強力に圧縮されるため容量が少なくなります。具体的にはボタンやログなどが該当します。

PNG24

透過を必要としないイラスト

PNG32

透過を必要とするイラスト

ベクタ画像(svg)

webP、jpeg、gif、pngなどはピクセル単位で扱うラスタ画像です。拡大すると色が滲んだりします。

そこで、アイコンのような図形の組み合わせでできているものであればSVGを使うという選択肢もあります。SVGはテキストでできているので圧縮が可能です。

よく、圧縮から漏れているケースもあるのですが忘れずに指定すると良いです。

画像の最適化

jpegtranや、GIFsiclなどのツールがありますが、これはimageminなどのラッパーツールから呼び出したり、タスクランナーやビルドツールを使ったりすることが一般的です。

もしくは、ImageOptimなどのGUIツールから使ったりする場合もあります。