Web制作におけるファイル形式の使い分け方

Web制作において、必ずと言っていいほど使用される画像素材はデータで保存されます。その際に、データのファイル形式はどれを使っていいのか、使い分けに迷ってしまう事があります。今回は代表的なファイル形式の使い分け方についてご紹介します。

２つのデータ形式の違い

ラスタデータとは、ビットマップ画像と呼ばれていて、画素（ピクセル）と呼ばれる色の付いた升目をタイル状にならべて構成されています。画素（ピクセル）数が多いほど高画質になります。デジタルカメラで撮影された写真などの画像データはラスタデータ（ビットマップ画像）です。

きめ細かな画像表現ができる特徴がありますが、反面ピクセルが増える（高画質になる）分だけデータが大きくなってしまいます。又、拡大・縮小などサイズ変更した場合、点の配置に歪みが生じる為ジャギー（ギザギザ）が出て画像の品質が落ちてしまいます。

主なフォーマット⇒JPG,PNG,GIF,BMPなど

ベクターデータとは、点、線などの情報を使い計算式によって曲線などを表現したデータ形式になります。特徴は、拡大・縮小を繰り返しても画像が劣化しないこと。また、線の表情が非常に滑らかなのも特徴です。但し、主な拡張子に対応していないことがデメリットになります。写真などの細かい色の表現しにくい為、ロゴやアイコンなどの単純な図形に適しています。

主なフォーマット⇒SVG,AI

今回のまとめ

Web制作において画像形式の使い分け

①WebPが使用可能な環境の場合（WordPressなどのCMS）⇒WebP

②写真やグラデーションがある場合⇒JPG

③背景透過の写真、又は写真以外の画像の場合⇒PNG

④アイコンやサイトロゴの場合⇒SVG

【WebP（ウェッピー）についてはこちら】

WebP（ウェッピー）とは？

---

最後までご覧いただきありがとうございます。Web制作において画像は、それぞれのファイル形式の特徴に注意しながら保存することが大切です。Webサイト制作の参考になれば幸いです。