WEB用に使われる画像形式の基礎と特徴

こんにちは、ざきやまです！

今回はコーダーにとって絶対必要な知識「WEB用に使われる画像形式の基礎と特徴」について書いていきたいと思います！

コーディング時には、デザイナーさんが作成してくれたデザインデータをWEB上に表示させるためにバラバラに分解して画像として書き出すのですが、この画像は用途によってファイル形式を使い分ける必要があります！

ということで、WEBサイトに使う主な画像形式とその特徴についてまとめまていきます^^/

画像形式の特徴を知ろう

まずは画像全般の基礎知識について簡単にご説明いたします！

画像にもファイル形式があり、すべての画像はビットマップ形式（ラスタ形式）、ベクター形式（ベクトル形式）のどちらかに分類されます。

ビットマップ形式

• 色のついたドットと呼ばれる点の集まりで構成された画像
• 拡大や縮小などをすると画像が荒くなってしまう
• グラデーションなどのきめ細やかな色の表現ができる
• 表示するのに必要な処理量が少なく、軽い

例えば、JPEG/PING/GIFなど。
写真はビットマップ画像で、無数の点が集まって１枚の写真になっています。

ベクター形式

• 点、線、塗りの情報を数値化してデータとして保持した画像
• 表示されるごとに、保持しているデータをコンピュータが演算処理して表現するので拡大縮小で画像が荒くならない
• 写真などの複雑な画像は再現がむずかしい

例えば、SVG/PDF/EPS/AIなど。

めちゃくちゃ簡単に説明してしまうと、
ビットマップ画像は拡大縮小するとドットも伸び縮みてしまい、画像が荒れてしまいます。
しかしベクター画像は点や線、塗りの情報が数値化されており、拡大縮小に合わせてその数値を再計算→表示するので画像が荒れない、という特徴があります。

用途によって形式を使い分けよう

WEBサイトでは用途に合わせて主にJPEG/PNG/GIF/SVG の4種類を使い分けています。

JPEG（ジェイペグ）の特徴

一般的に使用されている画像形式で、フルカラー1677万色まで表現することが出来るので、色数が多い画像がきれいに表示されます。非可逆圧縮という “人間の感覚に伝わりにくい部分を削ってファイルサイズを圧縮する”方法で画像を圧縮しています。

保存するたびに劣化してしまうが、ファイルサイズは小さめ。

主な使い方

風景・人物像など多くの色を使う写真、グラデーションがかかったイラストなど

PNG（ピング）の特徴

JPEGと同じでフルカラー1677万色まで色を扱うことができ、なおかつ透過処理が行える。半透明も表現することができます。
何度保存し直しても画質が劣化しない可逆圧縮で圧縮している。JPEGよりも高品質だが、ファイルサイズは大きめです。
PNG-8、PNG-24、PNG-32と種類があります。

主な使い方

人物写真の切り抜きや色数が多いイラスト、半透明を表現したい画像など

GIF（ジフ）の特徴

256色までしか扱うことができません。
アニメーションの表現や透過処理が出来ます。
画像保存する場合の長所としては少なく、単色や２色ほどの極端に色数の少ない画像であればファイルサイズが非常に小さくなります。
GIFアニメーションが作れるのが最も優れた特徴です。

主な使い方

単色・２色のロゴやイラスト、簡易的なアニメーション画像など

SVG（エスブイジー）の特徴

点、線、塗りの情報を数値化してデータとして保持し、そのデータをコンピュータが演算処理して表示されます。
アニメーションも透過もどちらも扱うことができ、WEB上でCSSやJavaScriptを使って色を変えたり、動かすこともできます。
複雑になると膨大な処理を必要するため、気をつける必要があります。

主な使い方

単純なパスで構成されたロゴ画像、単色のアイコン画像など。
CSSやJavaScriptで操作するアニメーション画像

まとめ

• 背景・人物像などの多くの色を使う写真や、グラデーションがかかった画像はJPEGを使う
• 背景色がある場合の切り抜き写真や、半透明を表現したい画像はPNG
• 画像でアニメーションを表現したい場合はGIF
• 簡単なパスであることが条件だが、全デバイスでぼけることなく綺麗に見せたい画像はSVG

で書き出しましょう！

ということで、今回のブログは「WEB用に使われる画像形式の基礎と特徴」でした！
基礎中の基礎ではございますが、コーダーにとって画像形式をうまく使い分けることは、とっても大事なことなので是非参考にしてみてください！
最後までご閲覧いただきましてありがとうございました〜^^/