Webページに画像を表示するためにHTMLに記述する、imgタグの基本とその使い方について解説します。
imgタグの基本
Webページに画像を表示させる方法は幾つかありますが、オーソドックスにHTMLに記述する場合はimgタグを使用します。Webページを扱うなら、覚えていて当然のタグと言えるでしょう。まずは、このimgタグの基本について解説します。
imgタグの最小構成の文法
imgタグは、src属性で画像ファイルを指定し、また、alt属性で画像を紹介するテキストを指定することで、Webページに画像を表示します。HTMLバージョン5のimgは6つの属性を指定できますが、この2つの属性が最小構成です。また、imgタグには、閉じるタグはありません。
imgタグの最小構成の書き方
<img src="(画像ファイル名)" alt="(画像を紹介するテキスト)"
imgタグの最小構成の例
imgタグで指定できる図形ファイルはWebブラウザで表示できるフォーマットでなければならず、.png、.jpg、.gifなどがよく使われます。また、最近のWebブラウザは、サイズを調整しても画質が落ちたりしないベクター形式の.svgファイルも使われるようになりました。
imgタグのサイズ指定
imgタグは、先ほど紹介したsrc属性とalt属性の他に、イメージの幅を指定するwidth属性、イメージの高さを指定するheight属性もよく使われます。
なお、width属性およびheight属性を省略した場合、Webページへの表示はsrc属性で指定した図形のサイズそのままです。そして、図形のサイズよりも大きな幅や高さを指定した場合は元の図形を拡大して表示し、小さな幅や高さを指定した場合は縮小して表示します。
また、元の図形の縦横比に合わない幅と高さを指定した場合は、指定した比率に合わせて、横方向または縦方向に引き伸ばして表示されます。
クリッカブルマップで使う属性
図形の特定の場所をクリックすると、そのエリアに指定されたURLを表示したり、JavaScriptを実行する機能をクリッカブルマップと呼びます。そして、クリッカブルマップとして利用する図形をHTMLに記述する場合、imgタグに指定するのがusemap属性です。
クリッカブルマップの例
imgタグで必須なのはsrcとaltの２つ
imgタグは、参照する画像のurlのほかに、サイズや修飾のための属性を記述するのが一般的です。しかし、HTMLのバージョン5からは、修飾に関する記述をスタイルシートに記述することになり、imgタグに記述する属性も変わっています。次からimgタグに記述する属性について解説します。
alt属性は必須ではない
HTML4.01ではimgタグに記述するalt属性が必須でした。しかし、HTMLのバージョン5では必須ではありません。これは、Webページのデザインで、アイコンなど、説明が不要な図形が使われることが多いなど、alt属性が不要なケースがあることから、HTMLバージョン5の変更は歓迎されています。
ただし「alt属性を全く書かなくて良い」ということではなく「指定しなくても良い」と考えて、アイコンなどでは「alt=””」と記述するのが推奨されています。
imgタグでアイコンを使う例
画像の位置の調整
以前使われていたHTML4.01ではalign属性が使えたので、画像を左右の端に配置したり、中央に配置するといった位置の調整をimgタグで設定できました。しかし、HTMLのバージョン5では、align属性は廃止されました。位置の調整は、スタイルシートを使います。
次に、スタイルシートを用いた画像の配置指定の書き方を紹介します。
画面の左端か右端に配置する
HTMLのバージョン5から、HTMLのレイアウトに関することをスタイルシートに記述するようになりました。imgタグで表示する画像の位置もスタイルシートで定義します。しかし、imgタグのスタイルとして記述する訳ではありません。
表示する画像を囲む領域を考えて、その領域の左端、または、右端に配置するようなスタイルを作ります。具体的には、divタグで囲って、そのdivタグのスタイルとして左側または右側を指定します。なお、imgタグの要素はテキストと同じに扱えるので、pタグで指定する方法もあります。
imgタグを囲むdivタグのHTMLの例
imgタグを囲むdivタグのスタイルの例
div.left {
text-align:left;
background-color: yellow;
}
中央に配置する
imgタグで表示する画像を中央に配置する場合は、その図形をブロック要素として扱い、中央に配置するスタイルで指定します。具体的には、「display:block;」でブロック要素とし、「margin: auto;」でマージンを自動設定とすることで、中央に配置します。
中央に配置するスタイルシートの例
img#midlle {
display: block;
margin: auto;
}
縦方向の位置を調整する
大きな枠の中に画像を配置する場合、高さの調整が必要となります。そのような場合は、imgタグの要素でインライン要素として扱い、まるでテキストのように、枠の上に配置したり、下に配置したりします。
テキストの上端に配置するスタイルの例
img#top_img {
vertical-align: text-top;
}
テキストの下端に配置するスタイルの例
img#top_img {
vertical-align: text-bottom;
}
imgで画像のサイズを指定する際の注意
Webページのデザインを基に画像を配置すれば、サイズ通りの画像が使えますが、後から画像を配置する場合は、サイズ調整が必要です。その点imgタグは、width属性やheight属性でサイズを指定できます。しかし、サイズだけ合わせれば良い、ということではありません。次から、imgタグでサイズを指定する際に気を付けたい点について解説します。
デザインに合わせたサイズで作るのがベスト
アイコンなど小さな画像データを拡大すると、ギザギザが目立つ粗い画像が表示されます。imgタグでwidth属性やheight属性を用いて画像を拡大すると、拡大する比率によってはWebページに粗い画像が表示されてしまいます。逆に、元の画像を縮小した場合、絵がつぶれてしまうこともあるでしょう。
そのため、Webページのデザインに合わせたサイズの画像を用意しましょう。また、拡大や縮小する場合も、HTMLのimgタグで調整するのはなく、画像編集ソフトを使って、丁寧にサイズに合わせて調整するのがベストな方法です。
imgタグでサイズを調整する場合
デザインに合わせたサイズに画像を編集するのが正しい作り方ですが、場合によってはimgタグで表示サイズを調整しなければならないケースもあるでしょう。その場合は、次の点に注意してください。
まず、縦横比は、Webページに用意した枠に合わせるのではなく、元の画像の縦横比を使います。imgタグでwodth属性とheight属性を指定すると、そのサイズに合わない画像は、自動で伸長または縮小されます。スタイルシートのautoを活用して、元の縦横比で表示させましょう。
縦横比を維持して表示するスタイルの例
画像のファイルサイズにも注意を
最新のスマートフォンで撮った画像は、解像度がかなり高く、Webサイトで公開するにはファイルサイズが大きすぎるケースもあります。そのような画像をimgタグで表示してしまうと、サーバーから転送する時間がかかり、Webページを開くまでに余計に時間がかかってしまいます。
ちょっと遅い程度と言ってもWebページ全体の読み込みに時間がかかると、検索エンジンによる評価が下がります。そのため、imgタグで使う画像は、無駄に解像度の大きな画像を使わずに、表示サイズに合わせた画像に調整して使いましょう。また、画質を落とさずにファイルサイズが少なくなる処理など活用してください。
まとめ
Webページのデザインに画像は欠かせません。そのため、Webページで画像を表示するimgタグは、HTMLを扱うITエンジニアが知っていて当然のタグと言えるでしょう。ただし、imgタグを的確に使うためには、スタイルシートの書き方も同時に理解しなければなりません。そのため、HTMLとCSSを合わせて理解することが重要です。
