3.1 画像の挿入

WEBページに画像を挿入するためには、定められた形式の画像を使用する必要があります。画像を挿入するために必要な基礎知識と、画像挿入の記述方法について学習しましょう。

3.1.1 WEBページで使える画像ファイル

WEBページで扱える画像のフォーマットにはGIF形式、JPEG形式、PNG形式などがあります。形式ごとにそれぞれ特徴がありますが、どの形式も画像を圧縮しファイル容量を小さく抑えることができます。それぞれの画像の特徴は以下のとおりです。

・GIF形式（拡張子：.gif）

使用できる色数が256色までと制限されているため、単純なイラストや色数の少ないアイコンなどを保存するのに、向いています。使用する色数を少なくすることによって、ファイルサイズを小さく抑えられます。透過GIFという機能で、画像中の特定の色を透明にすることができます。

・JPEG形式（拡張子：.jpeg .jpg）

JPEGはデジタルカメラにも使われているファイル形式です。写真のように微妙な色の諧調が多い画像の圧縮を得意とする形式です。ただ、単色で広い面積が塗りつぶされた画像、たとえば図表やグラフ、色数の少ないイラストなどは苦手です。こうした画像をJPEG形式で保存するとGIFやPNGに比べてファイルサイズが増大したり、画質が悪くなったりします。またこの形式で画像の一部を透明化することはできません。

・PNG形式（拡張子：.png）

GIFに代わる新しいファイル形式として登場した形式です。色数が少なく塗りつぶしの面積が大きい画像では、一般にGIFよりもファイルサイズが小さくなります。また、JPEGが得意とする写真のような画像も画質を劣化させずに扱えますが、ファイルサイズがかなり大きくなります。
PNGも透過GIFと同様、背景が切り抜かれた画像を作成することができます。ただし、透過設定がされたPNG画像は、古いブラウザでは正しく表示されない場合があります。

3.1.2 画像の設定

WEBページに写真を挿入するには、img要素を使います。

img要素には2つの必須属性があります。ひとつは挿入する画像の場所を示すsrc属性、もうひとつは画像が表示できなかった場合に代替テキストで画像の概要を示すalt属性です。これら2つの属性を開始タグ内に記述します。このほかに画像の幅や高さを表すwidth属性やheight属性などがあります。img要素は内容を持たない要素のため、終了タグが必要ありません。

img要素の記述例
<img src=”値” alt=”値” width=”値” height=”値”>

img要素の属性

属性名	概要	値
src	画像のファイルを指定	パスを指定
alt	画像の代替テキストを指定	テキストで指定
height	画像の高さを指定	pxまたは、%で指定
width	画像の横幅を指定	pxまたは、%で指定

ブラウザで表示したとき、次のようにかわいい画像が見えるようにしてみます。

図3.1.1

1. ソースコードの記述

つづいて、HTMLファイルのソースコードの記述を変更していきます。少し内容が増えてきましたので、キーボードの打ち間違えに注意しながら、慎重に進めていきましょう。

①ソース・フォルダー　：webpage/ch03
②ファイル名　　　　　：imgtest.html

➢ imgtest.html

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>画像の設定</title>
    </head>
    <body>
        <h1>
            <img src="../img/dog.jpg" alt="犬"> 
            HTMLの基礎を勉強しています。
            <img src="../img/dog.jpg" alt="犬">
        </h1>
        <p>
            HTMLの基礎を勉強しています。
        </p>
        <p>
            HTMLの基礎を勉強しています。
        </p>
        <p>
            HTMLの基礎を勉強しています。
        </p>
    </body>
</html>

<h1>と</h1>の間に、<img src=”../img/dog.jpg ” alt=”犬“>という記述を追加しました。

<img>タグのsrcには、画像の場所やファイル名を指定します。srcは、source（根源）を略したもので、ここでは、imgフォルダにあるdog.jpgという画像を表示させるような記述になっています。

また、<img>タグのaltには、その画像の内容を適切に伝えるテキスト情報を記載します。今回の場合は犬の画像ですので、「犬」と記載しました。altは、alternate（代替）を略したものです。これを記載することで、画像が表示できない場合も内容が分かりSEO効果もあります。

記述が終わったら、上書き保存をしてください。

◉属性の設定

「属性（Attribute）」は、要素の開始タグのなかに指定して、その要素の性質や特性を示すために使用されます。基本的には「属性名=”値”」の形式で表します。値とは、数値や、あらかじめ意味の決められた文字列のことを指します。

2. ブラウザで確認

保存ができたら、ブラウザで確認しましょう。「HTMLの基礎を勉強しています」という文章を挟み込むように、かわいい犬の画像が表示されましたか？

NEXT>> 3.2 リンクの設定