LINEで現役エンジニアに直接質問してみよう!登録無料

HTML imgタグとは?画像を表示方法や適切なサイズや解像度の書き方・仕方の基本

この記事では、HTMLページに画像を表示する方法を紹介します。

imgタグとは?

imgタグは、HTMLページで画像を表示するタグの1つです。

画像を表示するのに必要なのはsrc属性のみです。検索エンジンのためにalt属性も設定したほうがいいですが、無くても画像の表示は出来ます。

imgタグの使い方

ここでは、<img>タグの使い方を一通り解説します。

imgタグ書き方基本

imgタグに必要な属性が2つあります。

  1. src属性: 画像の場所をパスかURLで指定する(推奨)
  2. alt属性: 画像をに書いてあることを表す説明文

src属性: 画像の場所をパスかURLで指定する

src属性は画像の場所をパスかURLで指定します。パスは絶対パス、相対パスのどちらでも可能です。また、URLでも設定出来ます。http:// https:// //のどれかを選ぶと、それはURL指定とブラウザに認識されます。

alt属性: 画像をに書いてあることを表す説明文

画像は検索エンジンから見ると、どのような内容がかかれているか判断することは出来ません。なので、書いてある内容をalt属性を使って表し、検索エンジンにどんな内容が書かれているのか伝える役割があります。

もし、画像が表示されなかった時、その文章で画像の内容がわかるように意識して書くのがベストです。

しかし、何でもかんでも頑張ってテキストで入力する必要はありません。例えば、背景や画像や読み込まれるまでの一時的に使うような画像にalt属性は書いても意味が無いので、書く必要はありません。

MEMO

imgタグを使う時の注意点2つ

imgタグを使う時の注意点2つあるので解説します。

注意1: imgタグには「終了タグ」がない(記述してはいけない)

imgタグはただ画像を表示するためのタグで、中身を持つことが出来ません。終了タグを書くと、ブラウザによってはバグを起こすこともあるので、絶対に書かないでください。

画像に関する説明を書きたい場合、alt属性を使ったり、<p>タグで画像の下部説明を付けたりして表現してください。

注意2: インライン要素だが、margin、padding、width、heightを指定できる

imgタグは他の要素とは異なり、インライン要素であ理ながらmargin、padding、width、heightを指定することが出来ます。画像の大きさを変えたかったり、画像周りの余白を調節したいときに、活用するといいでしょう。

場合によっては、この仕様がややこしく、不都合に感じる場合もあります。その時は下記CSSでimgをブロック要素にしてからデザインすると、やりやすいかもしれません。

imgタグをWebサイトで実際にどのように使うかいくつか例を紹介

imgタグをWebサイトで実際にどのように使うかいくつか例を紹介します。

imgタグは、文章中にも何回でも登場させて良い

imgタグは文章中で何回でも登場させて大丈夫です。途中で画像を挿入することで、ユーザーにとって読みやすい記事になります。

srcset属性を使って、ブラウザごとに最適なサイズの画像を表示する

img属性には、「secret属性」があります。この属性を使うと、ブラウザの画面幅に応じて、表示する画像を変えることが出来ます。

imgタグで使う画像の小さくして表示速度をアップさせる

今のWebページでは沢山の画像が使いますが、画像は容量が大きいので、Webページをすべて表示するまでに時間がかかってしまいます。

そこで、ここで紹介するようなWebサービスを利用して画像ファイルを小さくすると、ページ表示までを高速化できます。

特に、ページの表示までに3秒以上かかる場合は、取り組んだほうがいいです。ページの表示速度とユーザー閲覧者数の関係については、下記サイトが参考になります。

参考 サイトのページ表示速度を測定して改善しようSEOラボ

画像ファイルを小さくする方法には、2種類の方法があります。

  1. 画像の縦横のサイズ(ピクセル数)を縮小(リサイズ)する
  2. 最適化ソフトにかけて品質を少し下げて圧縮する

それぞれ、順番に解説していきます。

画像の縦横のサイズ(ピクセル数)を縮小(リサイズ)する

参考 Bulk Resize Photos

画像のサイズをリサイズする方法で一番オススメなのか、「Bulk Resize Photos」 加工したいファイルをドラッグアンドドロップして、どのようにリサイズするのか条件をボタンをポチポチして指定するだけで、一括でリサイズしてくれます。






このように、多彩な設定ができるので、自分のサイトにあったリサイズが出来て、とても便利です。

変換した後は、自動的にダウンロードが始まり.zipで変換後の画像を手に入れられます。

最適化ソフトにかけて品質を少し下げて圧縮する

画像は「圧縮」という処理をすると、ファイルサイズを小さくすることが出来ます。圧縮は、画像内で似た色を1色にまとめて、画質を少し下げる代わりにファイル容量を小さくする処理です。

圧縮方法には様々あり、Webサービスによって仕組みが異なるため、仕上がりも異なります。

できれば、圧縮率も高くて画質の良い方法がいいですよね?そこでオススメなのが、「TinyPNG」という圧縮Webサービスです。

参考 TinyPNG

ファイルをドラッグアンドドロップして、ファイルを追加すると自動的に圧縮されたファイルが出てきます。

この記事を書いた人

自身がプログラミングを独学で勉強し始めて躓いた経験を元に、これから勉強をする人に向けに「イラスト多めでわかりやすい記事」にこだわって情報を発信しています。

現在はフルスタックエンジニアとしてサービス開発などのお仕事をしています。