Blog スタッフブログ

WEB制作のG・Yです。今回はWEBサイト上で使用される画像形式についての記事になります。

これまでと比べ基本的な内容になります。

■ビットマップ画像

色の点（ピクセル）が集まって一つの絵を構成する形式の画像のことを指します。
JPEGやPNG、GIFといったファイル形式が該当します。

左側の人物の肩を拡大すると…

・JPEG

デジタルカメラで撮影した画像やイラストなどで幅広く使われる、ビットマップ形式の代表と言えるファイル形式です。約1670万色を使用可能であり、非可逆圧縮と呼ばれる圧縮形式によってファイルサイズが小さくまとまっていることが特徴です。

一度拡大縮小などの操作を行ってしまうともとの解像度に戻らない点に注意しましょう。

・PNG

JPEGと同様の色数を扱えるほか透過も可能であり、さらに圧縮前の状態に戻すこともできる可逆圧縮形式の画像ファイルです。

JPEGよりも万能に思えますが、JPEGと違いファイルサイズが大きくなりやすいので単にWEBサイト上に写真を掲載するだけといった用途で画像を配置する場合はJPEG形式を推奨します。

・GIF

使える色数は256色とかなり少ないですが、アニメーションの指定が可能です。

■ベクター画像

ビットマップ画像と異なり、画像の点や線といった情報がテキストファイルとして保存されるという特徴のある画像ファイルです。

解像度に依存せず画像を表示できるので拡大表示しても画像が劣化することなく、高解像度ディスプレイなどでも問題なく表示できます。

・SVG

WEBサイトでよく使われるベクター画像の形式です。グラフの表示などに適した形式として一般に知られていますね。

単純な形の図形やアイコンであれば高速に処理できますが、複雑な形状の場合は処理に時間がかかりサイトにも負荷がかかってしまうため、場合によってはPNG形式で表示することも視野に入ります。

・FontAwesome

WEBサイトにアイコンフォントを表示できるWEBフォントサービスを提供しているサイトです。

以下URLよりご利用可能です。

https://fontawesome.com/

WEBサイトの方向性やコンテンツおよび使用する画像の意図などに合わせて、適切なファイル形式を活用しましょう。