画像ファイル

この記事は約2分で読めます。

画像ファイルとは

画像ファイルとは、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">
タイトルとURLをコピーしました