覚えておきたい！表示速度に影響する画像形式の特徴【.jpg, .png, .gif】

ページの表示速度がユーザーの離脱率に与える影響は言わずもがな。
読み込み時間が0.1秒伸びるだけで、1%の売上に影響を与えると言われます。
SVGなどを用いて画像を用いないようにするのがトレンド、といっても、全てを代替するのは不可能でしょう。そこで、使用用途に応じて最適な画像形式が何かを自ら判断できるようににし、サイト最適化をはかりましょう。

それでは、拡張子ごとの特徴をみていこうと思います。

.jpg(.jpeg)[Joint Photograph Experts Group]

最も凡庸性に優れた画像形式。24bit(1670万色)まで扱うことが可能で、色の再現性・細部の描写など、写真の標準規格として作られたデータ形式です。jpg形式は、その性質として、色調変化している部分のデータを捨てるという特徴を持っています。これは、詳細まで描写が可能故、全てを再現してしまうとデータ量が大きくなりすぎるので、軽くするための工夫となっています。おかげで手頃なサイズとして使いやすい規格となっています。これはjpg形式の利点であり、不利な点でもあります。それは保存するたびに色調変化のある隣接点の色相を単調化してしまうため、保存を繰り返すうちにノイズが発生してしまいます。（「ブロックノイズ」や、「モスキートノイズ」と呼ばれるモザイク状のタイル）

更に、jpgの圧縮形式は「不可逆圧縮」と呼ばれる形式であるため、一度圧縮時に切り捨て・劣化したデータは復元が不可なので、バックアップをしっかりと残しておきましょう。

.gif[Graphics Interchange Format]

jpg形式と並んで古くから使われているgif形式。色数は少し少なめの8bit(256色)まで扱うことが可能で、単色やベタ塗りなどのボタン・アイコンなどに向いた画像形式です。gif形式の最大の特徴は連続したコマを繋いだパラパラ漫画のような動画として利用できること（256色限定）、透明色を利用した透過画像が作成できるということです。

またデータそのものが非常に軽いので、表示する上では、ベクターデータの次に軽くなるのも特徴なので、シンプルな画像であればgif形式がオススメです。（シンプルな画像はCSS3登場以降ほぼ代替可能なので、使いどころは少ないかもしれません。）