WEBサイトで使用される画像形式について - 岡山のホームページ制作会社

長かった梅雨もようやく明け、いよいよ夏本番を迎えます。扇風機やクーラーがかかせませんね。皆様、熱中症には十分ご注意ください。

こんにちは、今日もモニターに向かってカタカタとリズミカルにキーボードを打っている新人の河嶋です。

WEBに関する用語は横文字が多いですよね。見た目だけで苦手意識を持たれる方もいらっしゃるのではないでしょうか。WEB業界にまだまだ慣れない私ですが、今日は自分の勉強も兼ねて、皆様にWEBについて興味・関心を持っていただきたく、WEBサイトで使用する画像についてお伝えしたいと思います。

今回のブログを読んでいただき、「WEBの世界に興味が出た！」という方がいらっしゃれば、とても嬉しく思います。

以前のブログ【まずはコレから！WEBに関する知っておきたい基礎用語】ではWEBに関する基礎用語をご紹介していますので、宜しければ是非そちらもご覧ください。

それでは「WEBサイトで使用される画像形式について」見ていきましょう。

４つの画像形式

WEBで取り扱う画像は、色のついたドット（小さな点）の集まりで構成される「ビットマップ画像」と、点と線の情報を数値化して構成された「ベクター画像」の大きく２種類に分けられます。さらに画像にはいくつかのファイル形式があり、画像の内容に応じたファイル形式を選択して使用します。代表的なファイル形式は、「PNG」「JPEG」「SVG」「GIF」の４種類です。

ここからは「PNG」「JPEG」「SVG」「GIF」の４種類のファイル形式について詳しく見ていきましょう。

PNG形式

PNGはビットマップ形式の画像データです。WEBで使用される多くの画像ファイルは、PNGが使われます。PNGには256色までしか扱えないものと、1677万色のフルカラーが扱えるものとがあります。フルカラーで画像を透過できるのもPNGの特徴です。ただしフルカラーの画像はファイルサイズが大きくなるという難点があります。

JPEG形式

JPEGはビットマップ形式の画像データです。1677万色のフルカラーが扱えるため、写真やグラデーションを使用した画像等に利用されます。また、デジタルカメラやスマホで撮影した写真の保存形式として採用されていることが多いです。JPEGには画像を圧縮してファイルサイズを軽減するという特徴がありますが、これは「不可逆圧縮」という特性で、文字通り一度画像を圧縮してしまうと元の画質には戻せません。

GIF形式

GIFはビットマップ形式の画像データです。GIFは扱える色数が256色までなのでファイルサイズが軽くでき、また、PNGやJPEGとは異なってアニメーションさせることができるのが特徴です。よってイラスト等の単調な画像や、色数の少ない画像に対して最適です。色数が少ないため、グラデーションや複雑なグラフィックの表現が苦手であり、そのような画像にはJPEGやPNGを使用します。

SVG形式

SVGはベクター形式の画像データです。1677万色のフルカラーが扱え、ベクターデータを扱えるグラフィックソフトで作成・編集し、SVG形式で保存することで使用できます。SVG形式の特徴は、ビットマップ形式とは異なり、どんなに拡大縮小しても画質が劣化することなく、ブラウザできれいに表示させることができることと、データサイズが軽いことです。