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ツールから使ったりする場合もあります。
この記事へのコメントはありません。