top > コラム > ホームページ制作 > ホームページで画像を使用するときは最適な形式にして使おう

ホームページで画像を使用するときは最適な形式にして使おう

ホームページを作る際、画像を使用することもあるかと思います。例えば、写真であったり、メニューや見出しの画像化、バナーなどです。それらには最適な画像の形式があります。

画像の形式の種類

主にホームページを作るときに使用する画像の形式は、GIF画像(.gif)、JPEG画像(.jpg)、PNG画像(.png)、そしてアイコン用のICO画像(.ico)です。

特徴

それぞれの特徴について表にまとめてみました。

形式 GIF画像 JPEG画像 PNG画像 ICO画像
拡張子 .gif .jpg .png .ico
色深度(使える色の数) 8bit(265色) 24bit(1670万色) 24bit(1670万色) 24bit(1670万色)
透明色の指定 可能 不可 可能 可能
データ圧縮 可逆 不可逆 可逆
特徴 アニメーションが使える 圧縮率を上げるとブロックノイズやモスキートノイズと呼ばれる劣化が見られる 24bitの他に8bitも選択できる
アルファチャンネルによる透明化が可能
1bit、4bit、8bit、16bit、24bitが選択できる
アルファチャンネルによる透明化が可能
用途 単色系のメニューや見出し画像、透明化した画像 写真 グラデーションのかかったメニューや見出し画像、透明化した画像
透明度を設定した画像
アイコン

GIF画像は軽量ですが265色しか使えません。グラデーションの画像をGIF画像にするとシマシマになってしまうので、そのような画像はPNG画像にします。

JPEG画像は写真に適しています。しかし、テキストを一緒に重ねてしまうと、テキストの周りにモスキートノイズが発生しやすくなります。その場合は、圧縮率を極力下げて保存するか、PNG画像にします。どちらにしろ、画像の容量は大きくなってしまいます。PNG画像はJPG画像に比べて容量が大きくなるので、基本的には写真はPNG画像ではなくJPG画像を使うようにしましょう。

PNG画像は、GIF画像の代わりに開発された形式なので、基本的にGIF画像の代わりに使えます。しかし、アニメーションには対応していません。一応、アニメーションPNGであるAPNGというものもありますが、まだまだ対応したブラウザが少ないのが現状です。また、GIF画像とは違いフルカラー(1670万色)とアルファチャンネルが使えるのが魅力的です。アルファチャンネルとはつまり、透明度を表すもので、例えば、透かした画像を表示することが可能です。

ICO画像はファビコン専用の画像です。ちなみにファビコンにはGIF画像やPNG画像も使えますが、古いブラウザには対応していません。古いブラウザにも表示させたい場合はやはりICO画像にする必要があります。

ホームページ制作カテゴリの最新記事

目次

※当サイトではWebサイトのことを、一般的な通称の「サイト」、「ホームページ」、「HP」などと表記しておりますが全て同一のことです。


« トップページへ戻る
↑ ページのトップへ戻る