画像ファイルとは
画像ファイルとは、Web ページ中に表示されている写真や背景画像(壁紙)、グラフなどの図表、更にはタイトルロゴやアイコンなど、テキスト(文字)ではない部分を指す。
これらの画像ファイルは、Web ページの内容理解を深めるため、Web ページ内を案内(ガイド)するため、Web ページの雰囲気を高めるためなど、様々な目的で利用されている。
画像の一つ一つが個別のファイルとして作られており、Webページ内に表示されるように HTML で記述されている。
画像ファイルの種類
画像ファイルは、「画像形式」と呼ばれるファイル形式で保存されている。
Webページ制作では、主に3種類の画像形式が使われる。
画像形式によって向き・不向きが明確に分かれているため、Web ページ制作では画像形式の選択も重要な要素となる。
用途に合わせた形式で、画像を作成することが望ましい。
形式 | 特徴 | 用途 |
JPEG (Joint Photographic Experts Group) | フルカラー(1,600万色)が扱える。 サイズはやや大きい。 | 写真、壁紙、 巨大サイズ画像 |
PNG (Portable Network Graphics) | JPEG同様、1,600万色に対応している。 透過処理が可能。 JPEGよりサイズが大きい。 | 背景を透明・半透明にしたい写真、イラスト |
GIF (Graphics Interchange Format) | 最大256色まで扱える。サイズは小さい。 | アイコン、ロゴ、色数の少ない画像 |
画像を表示させるHTML
HTML で画像を表示するには、「img タグ」を使用する。
続いて「src 属性」で画像ファイルの URL を指定する。
他にも指定するべき属性はあるが、これが画像表示の基本となる。
なお、URL は絶対パスと相対パスが記述出来るが、同じ Web サイト内では用法を統一した方が良い。
HTML
<img src="./photo.jpg">