June 9th,2015
ファイル形式
画像を埋め込む前に“ファイル形式”について知っておく必要があります。
コンピューターで扱われるファイルにはさまざまなものがあり、ファイルの種類を表す“ファイル形式”によってコンピューターはそのファイルの構造やどのように扱うべきなのかを知ることができます。“ファイル形式”はファイル名につけられる“拡張子”によって識別されます。
よく知られるものとしては、音楽データの拡張子である“.mp3”があります。コンピューターは“.mp3”という拡張子を認識することによってこのファイルを開くために音楽プレーヤーなどを選択して再生することができます。
HTML文書を保存するときにつけた“.html”も拡張子で、コンピューターは“.html”を認識してブラウザはHTML文書としてこのファイルを開きます。
拡張子はエクスプローラなどのファイル管理ソフトでは通常は表示されない設定になっていますが、上部のリボンの「表示」から「ファイル名拡張子」にチェックを入れると拡張子が表示されるようになります。このように、表示されないだけですべてのファイルには拡張子がつけられています。
画像のファイル形式
画像にもファイル形式があります。一言で“画像”とは言いますが、画像にはさまざまな種類があり、そのデータを記録する方法によっていくつものファイル形式があります。
画像編集ソフトで画像を保存する際にどのファイル形式で保存するかを選択することができます。“BMP”、“TIFF”、“JPEG”、“GIF”、“PNG”など多くのファイル形式がありますが、ウェブ上で一般的に使用されるファイル形式は“JPEG”、“GIF”、“PNG”の3種類です。
それぞれのファイル形式には次のような特徴があります。
- JPEG (.jpg、.jpegなど)
- 一般的にデジタルカメラで写真を撮った時に写真が保存されるファイル形式です。
- 色数の多い複雑な画像を表示するのに向いていてグラデーションも綺麗に表現することができます。
- “非可逆圧縮”といって一度圧縮してしまうと元に戻せない方法で圧縮します。ファイルを保存すると圧縮されるので、何度も編集と保存を繰り返すと画質が劣化します。
- ぼやけたり、かすれたりするので活字や線、色の境界がはっきりした図形などを含む画像には向きません。
- GIF (.gif)
- グラデーションをあまり使っていないイラストや線画など、色数が少ない画像を表示するのに向いているファイル形式です。
- 透明色を使用したり、1個のファイルに複数の画像データを保存してパラパラマンガのようなアニメーションを表現することができます。
- “可逆圧縮”といって一度圧縮しても元の画像を復元できる方法を使用するため、画像の質は落ちません。ただし、最大256色しか扱えないため写真のような色数の多い画像をこの形式で保存すると色数が減らされて画像が劣化します。
- PNG (.png)
- “GIF”の代替としてインターネット上で使うことを目的として開発された画像形式です。
- “可逆圧縮”のため画質は落ちず、“JPEG”と同じ約1670万色まで使用することが可能です。劣化しないので写真などを“JPEG”より綺麗に保存することができますが、ファイルのサイズは大きくなります。アニメーションは表現できませんが、透明に加えて半透明も表現できます。
それぞれの利点と欠点を考慮して通常ウェブサイトに使用する画像では、イラストやロゴは“GIF”か“PNG”、写真は“JPEG”が使用されます。
他の画像形式が使用できないわけではありませんが、ユーザーが使用しているブラウザが対応していないファイル形式の画像はウェブページ上に表示することができないので、できるだけ一般的なファイル形式を使用するべきです。
画像を埋め込む
それでは画像をウェブページに埋め込みます。
“<img>”が画像の埋め込みを表すタグです。
<img src="sample.png" alt="サンプル画像">
“<img>”は終了タグがないので文字を囲ったりはせず、画像を埋め込みたい場所にそのまま記述します。“<a>”の“href”属性でリンク先を指定した時と同じように、埋め込みたい画像のURLを“src”属性の値として指定します。
もう一つの属性である“alt”属性には画像の“代替テキスト”を記述します。代替テキストはURLが誤っていたり、画像が削除されたりして画像ファイルが見つからない場合や、ウェブページの読み込みが途中で中断されて画像が読み込めなかった場合などに代わりに表示される文字です。“alt”属性は必須ではありませんが、省略には条件があり、ほとんどの場合は省略できません。
ちなみにリンクを表す“a”要素でもウェブページと画像を結びつけることができますが、その場合はリンク先が画像となり、リンクをクリックすると画像に移動します。
今回はウェブサイトを作っているフォルダに以下のように画像を用意し、ウェブページに埋め込みます。
この時、画像のファイル形式がわからないと画像を指定することができません。ファイル形式は画像を右クリックして「プロパティ」から確認することができます。
この画像を“<img>”の“src”属性で指定すると以下のようになります。
<img src="banana.png" alt="バナナ">
これを画像を埋め込みたい場所に配置します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>果物を食べる</title>
</head>
<body>
<h1>黄色いフルーツバナナ</h1>
<p>バナナについての解説。</p>
<p><img src="banana.png" alt="バナナ"></p>
<h2>目次</h2>
<ul>
<li>バナナの特徴</li>
<li>バナナの産地</li>
<li>バナナの保存方法</li>
<li>バナナの栄養素</li>
</ul>
<h2>バナナの特徴</h2>
<p>
「バナナ」はバショウ科バショウ属の多年草及びその果実のことである。
...
保存出来たらウェブページをブラウザで開き、正しく表示されるか確認します。
画像の代わりに代替テキストが表示されるようであれば、画像のURLが誤っています。また、拡張子が間違っていないかも確認します。
Windowsのパソコン上ではファイル名の大文字と小文字は区別されませんが、ウェブサーバーにアップロードすると区別されるようになることが多いため、“src”属性でURLを指定する際には大文字と小文字も一致させた方が良いです。拡張子も画像を出力したソフトやアプリによって大文字だったり、小文字だったりしますので確認しましょう。
ウェブページに画像をたくさん使用する場合、HTMLファイルと同じフォルダにすべて入れてしまうと管理が大変になります。なので、画像を別のファイルに分けることが多いです。
画像をフォルダに入れたら次のようにタグを書き換えます。
<img src="img/banana.png" alt="バナナ">
