静岡のHP屋コラム

2017.02.26

今さら聞けない? ホームページ制作に使用する画像の種類

みなさんはホームページにどんな種類の画像を使用しているか気にしたことはありますか?
特に気にしていない方も多いかもしれませんが、一口に画像といっても様々な形式があります。

今回はホームページに使用できる画像形式(ファイルフォーマット)とその特徴について解説したいと思います。

どんな形式の画像がホームページ制作に使用できるのか?

画像ファイルというとよく名前があがるのが、BMP(ビットマップ)、JPEG(ジェイペグ)、GIF(ジフ)、PNG(ピング)、TIFF(ティフ)などです。
しかし、このうちホームページ制作に使用できるのはJPEG、GIF、PNGの3種類であり、BMPとTIFFは使用できません。

パソコンに入っている画像が上記のどの画像形式にあたるかは拡張子を見ることで判断できます。拡張子とはファイル名の一番最後にある「.jpg」のようなドット以降の文字列のことです。Windowsの設定によってはパソコンでは拡張子が表示されない場合がありますので、その場合は設定を変更しましょう。

JPEG(ジェイペグ)の特徴

JPEGとはJoint Photograph Experts Groupの略で、拡張子は「.jpg」※です。
デジカメでは基本的に写真をJPEG形式で保存するので、デジカメを使う人はなじみのある形式かもしれません。

特徴としては
最大1670万色まで扱うことができる
・ファイルを不可逆圧縮している
などがあります。

写真の保存に適したファイル形式ですが、不可逆圧縮という方式でファイルを圧縮しているため、何度もファイルを保存しなおすと画質が悪くなっていくという特徴があります。
そのため、画像加工を行う際は注意が必要です。

※JPEGの拡張子は「.jpeg」、「.jpe」、「.jfif」と表記される場合もありますが「.jpg」または「.jpeg」を使うのが一般的で無難でしょう。

GIF(ジフ)の特徴

GIFとはGraphics Interchange Formatの略で、拡張子は「.gif」です。
GIFはJPEGとは異なり、最大256色までしか扱うことができません。

しかし、JPEGにはない特徴として
・画像に透過(透明色)を使用できる
可逆圧縮のため、保存を繰り返しても劣化しない
・パラパラ漫画のようなアニメーションを扱える
といったものがあります。

上記のような特徴からGIFはアイコンやイラストといった単色・ベタ面が多い画像、またはアニメーションを取り入れた画像に適しています。

PNG(ピング)の特徴

PNGとはPortable Network Graphicの略で、拡張子は「.png」です。
PNGはJPEGやGIFよりは後発のフォーマットで、Web上での使用を目的に開発されたフォーマットです。

特徴としては
最大1670万色まで扱うことができる
可逆圧縮のため、保存を繰り返しても劣化しない
・画像に透過(透明色)を使用できる
というようにJPEGとGIFのいいとこどりをしたような形式です。

しかし、その分JPEGと比べるとファイルサイズは大きくなってしまうため、容量に関しては注意が必要です。


以上簡単ですが、ホームページに使用できるJPEG、GIF、PNGについていかがでしたでしょうか。

私個人的には
・写真をそのまま使う場合はJPEG
・アニメーションを使う場合はGIF
・上記に当てはまらない場合はPNG
というように画像形式を使いわけています。

何が正解はありませんが、みなさんもこれを機に一度ホームページに使う画像について考えてみてください。

ホームページ応援隊 訪問対応エリア

静岡市・沼津市・三島市・駿東郡(清水町・長泉町・小山町)・富士市・富士宮市・裾野市・御殿場市・伊豆市・伊豆の国市・伊東市・熱海市・焼津市・藤枝市・函南町

その他の地域の場合でもご訪問可能な場合がございます。
ご希望の方は、お気軽にご相談ください。