- HOME
- ホームページ作成講座
- 画像ファイルの種類
ここから、Webで使う画像について解説していきます。最初に、画像ファイルの種類と用途について見ていきましょう。
画像ファイルの役割
画像を用いると、ホームページに彩を添え、 解説なども分かり易く提供することができます。 画像はウェブ製作において重要な役割を果たすことになります。
しかしながら、画像はファイルサイズが大きくて読み込むのに時間が掛かります。 ですから画像の大きさやファイルサイズに注意しなければなりません。 画像によってファイル形式を適切に選択しないと、 ファイルサイズが極端に大きくなったり、画像が汚くなったりします。
ホームページでは様々な形式の画像が使えますが、ここではJPG形式, PNG形式, GIF形式の3つについて、特徴と用途を述べてみます。 さらにWindowsで最も一般的なBMP形式についても載せておきたいと思います。
画像ファイルの種類と用途
JPG形式
![JPGは写真向き](img/jpg.jpg)
JPGはジェイペグと読みます。拡張子は .jpg 若しくは .jpeg です。 デジカメ写真でよく使われる形式です。 これは、輪郭のはっきりしていない画像に用いるのが効果的です。 輪郭のはっきりしたものをこの形式にすると、 輪郭がぼやけたりにじんだりすることもあります。
JPGは圧縮率というものが選べます。 圧縮率を上げると、ファイルサイズは小さくなりますが、画像は汚くなります。 画質を優先すると、ファイルサイズも大きくなります。
またJPGの最大の問題点と言えるのは、保存するたびに画質が劣化することです。 そして元に戻すことはできません。 ですから写真などを何度も加工する必要がある場合は、 一度他の形式(BMPなど)に変更して、それから加工するのがベターです。
PNG形式
![PNGのボタン](img/png.png)
PNGはピングと読みます。拡張子は .png です。 これは輪郭のはっきりした画像に向いています。 例えばボタンやちょっとしたアクセントとなる画像, 当解説で頻繁に用いているソフトウェアのスクリーンショット等に用いることができます。 しかし写真など輪郭のはっきりしていない画像をPNGにすると、 極端にファイルサイズが大きくなるので注意が必要です。
PNGでは透過画像を作ることができます。 これによって、背景に色や画像を用いているページでも丸っこいボタンを載せたりできる訳です。
GIF形式
![GIFアニメ](img/beer2.gif)
![アニメーションGIF](img/animegif.gif)
GIFはジフと読みます。拡張子は .gif です。 GIFもPNGと同じように輪郭のはっきりした画像に向いています。 ただ同じ画像を作ってみると、PNGよりファイルサイズが若干大きくなります。 しかし昔ながらにあるGIFの人気は根強く、 画像素材を配布しているサイトではGIF形式のものが多いです。
GIFも透過画像を作ることができます。こちらは256色の透過画像しか作れません。 というか、GIF自体256色以上の色を扱えません。 このことを考えると、写真等には向かないということが判るでしょう。
GIFの最大の特徴は、アニメーションGIFを作ることができることです。 ホームページで動きを表現できる貴重な存在です。 このアニメーションGIFも、多くの素材サイトで公開されています。
BMP形式
BMPはビットマップと読みます。拡張子は .bmp です。 これはWindows標準の画像形式と言えます。 BMPは上述3つの形式と比べて極端にファイルサイズが大きいので、Web向きではありません。
こうしてみるとBMPの解説は要りそうにないですが、画像の編集には便利な形式なので載せました。 どのソフトウェアでも読み込めますし、 JPGのように保存しても画質が劣化しません。 画像の加工が幾度も必要な場合は、 BMP形式で行うと良いでしょう。