HOME

ABOUT

ARCHIVES

CONTACT

date

覚えておきたい!表示速度に影響する画像形式の特徴【.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登場以降ほぼ代替可能なので、使いどころは少ないかもしれません。)

.png[Portable Network Graphics]

png形式は、jpg形式とgif形式のサラブレッドともいえる画像形式で、両方のいいとこ取りの特徴を持っています。複数の透過色の指定、可逆圧縮形式を採用(圧縮によってデータに劣化が生じない)、8bit / 24bitどちらも選択可能、といった特徴があります。

多くの特徴を兼ね備えただけあり、最もデータ容量が大きくなるのも特徴です。

それぞれの使いどころは、

JPG形式
写真のような描写の細かい画像

GIF形式
ボタンやアイコンなど色数の少ないものやGIFアニメーション

PNG形式
イラストレーターで作成したグラフィックなどベクターデータで作成したイラストレーション

画像形式の特徴を知ることで、サイトのパフォーマンスを少しでも向上させましょう。

Siyabonga ekufundeni kwakho.(訳:最後まで読んでくれてありがとう。 / 注:ズールー語)