imgタグで画像を表示する
Updated
2021/8/8 9:49
Author
Jumpei Ikegamiorder
5
imgタグはHTMLタグの中でも「画像を表示する」という固有の役割をもった重要なタグです。その主な使い方について説明します。
imgタグの基本的な使い方
imgタグのsrc属性（sourceの略）に画像URLを指定することで、画像を表示することができます。タグの中身は空で使います。HTML
世の中の
imgタグを見ると、alt属性（alternativeの略）が設定されていることがあります。alt属性に画像を説明するテキストを入れておくと、画像が読み込めなかった場合にそのテキストを表示してくれます。HTML
画像URLをどのようにして取得するか？
すでにURLがわかっている画像であれば問題ありませんが、手元のPCに入っている画像をimgタグで他の人のブラウザからでも見られるようにするには、画像をどこかのサーバーにアップロードしてURLを生成する必要があります。一般的にWebサイトを構築するためのCMSやドキュメント管理ツールなどには画像アップロード機能があるので問題ありませんが、独自にツールを作っている場合などは自分で画像アップロード手段を確保しなければなりません。これは言い換えれば「誰でもアクセス可能なサーバーを用意する」ということなので、結構ハードルが高いです。
Flickrで画像を拡大表示した状態でHTMLからURLを無理やり取得
もちろん、これはあまり行儀のいい方法ではありません。
ちゃんと運用するのであれば、Amazon S3などのストレージサービスを使うべきです。S3に画像をアップロードし、パブリックアクセスが可能な設定にすることで、誰でもアクセスできる画像URLを取得することができます。
画像サイズを指定する
imgタグで画像を表示するとき、デフォルトでは元画像と同じサイズで表示されます。画像が大きすぎるとき、画像をリサイズしてアップロードしなおせば表示される画像を小さくすることができます。しかし、全ての画像をリサイズするのは面倒ですし、1つの画像を複数のサイズで表示したいというケースもあるかもしれません。画像のサイズを指定するには、
width属性に数値を指定します。指定した数値の単位はピクセルです。HTML
高さを
height属性で指定することもできます。widthまたはheightだけを指定した場合、縦横比を維持した状態でもう一方の属性が自動で設定されるので、基本的にはwidthだけ設定すれば問題ありません。もちろん、他のHTML要素と同様にCSSで
widthやheightを指定することもできます。HTML
CSS
ちなみに、
width属性で画像サイズを小さく変更した場合であっても、ブラウザは元の画像ファイルを読み込んでから縮小表示しています。あまりにも容量の大きい画像をimgタグのsrcに指定してしまうと、通信量が多くなり画像の読み込みに時間がかかってしまいます。そこまで神経質になる必要はありませんが、理想的には全ての画像は最低限の大きさでアップロードされることが望ましいです。