imgタグで画像を表示する

Updated
2021/8/8 9:49
Author
Jumpei IkegamiJumpei Ikegami
order
5
imgタグはHTMLタグの中でも「画像を表示する」という固有の役割をもった重要なタグです。その主な使い方について説明します。
なお、実際の表示を試したい場合は次のチュートリアルで紹介したCodePenにソースコードを貼って試してみましょう。
簡単なHTMLとJavaScriptで自分だけのテキスト変換ツールをつくろう2021/6/20 5:402021/6/20 8:09

imgタグの基本的な使い方

imgタグのsrc属性(sourceの略)に画像URLを指定することで、画像を表示することができます。タグの中身は空で使います。
HTML
notion image
世の中のimgタグを見ると、alt属性(alternativeの略)が設定されていることがあります。alt属性に画像を説明するテキストを入れておくと、画像が読み込めなかった場合にそのテキストを表示してくれます。
HTML
notion image

画像URLをどのようにして取得するか?

すでにURLがわかっている画像であれば問題ありませんが、手元のPCに入っている画像をimgタグで他の人のブラウザからでも見られるようにするには、画像をどこかのサーバーにアップロードしてURLを生成する必要があります。一般的にWebサイトを構築するためのCMSやドキュメント管理ツールなどには画像アップロード機能があるので問題ありませんが、独自にツールを作っている場合などは自分で画像アップロード手段を確保しなければなりません。これは言い換えれば「誰でもアクセス可能なサーバーを用意する」ということなので、結構ハードルが高いです。
社内ツール用の画像で点数も多くなく最悪消えても問題ないということであれば、Flickrなどの写真共有サービスにアップロードした画像のURLを無理やり取得するという方法もあります。
notion image
Flickrで画像を拡大表示した状態でHTMLからURLを無理やり取得
もちろん、これはあまり行儀のいい方法ではありません。
ちゃんと運用するのであれば、Amazon S3などのストレージサービスを使うべきです。S3に画像をアップロードし、パブリックアクセスが可能な設定にすることで、誰でもアクセスできる画像URLを取得することができます。

画像サイズを指定する

imgタグで画像を表示するとき、デフォルトでは元画像と同じサイズで表示されます。画像が大きすぎるとき、画像をリサイズしてアップロードしなおせば表示される画像を小さくすることができます。しかし、全ての画像をリサイズするのは面倒ですし、1つの画像を複数のサイズで表示したいというケースもあるかもしれません。
画像のサイズを指定するには、width属性に数値を指定します。指定した数値の単位はピクセルです。
HTML
高さをheight属性で指定することもできます。widthまたはheightだけを指定した場合、縦横比を維持した状態でもう一方の属性が自動で設定されるので、基本的にはwidthだけ設定すれば問題ありません。
もちろん、他のHTML要素と同様にCSSでwidthheightを指定することもできます。
HTML
CSS
ちなみに、width属性で画像サイズを小さく変更した場合であっても、ブラウザは元の画像ファイルを読み込んでから縮小表示しています。あまりにも容量の大きい画像をimgタグのsrcに指定してしまうと、通信量が多くなり画像の読み込みに時間がかかってしまいます。そこまで神経質になる必要はありませんが、理想的には全ての画像は最低限の大きさでアップロードされることが望ましいです。

もっと詳しく知りたい方へ