HTMLのimgタグで画像を挿入しよう!初心者向けに詳しく解説

HTMLのimgタグで画像を挿入しよう!初心者向けに詳しく解説
misa

こんにちは、ウェブデザインパレットのmisaです。

Webページに画像を挿入することは、文章だけでは伝えきれない情報を補足したり、ページ全体のデザインを華やかにしたりするのに役立ちます。
HTMLのimgタグを使えば、簡単に画像を挿入することができます。

今回はHTMLのimgタグについて、基本的な書き方からレイアウトのカスタマイズ、応用的な使い方まで詳しく解説します。

Contents

imgタグとは

imgタグは、Imageの略称で、Webページに画像を埋め込むためのタグです。画像ファイルの場所を指定することで、ブラウザに画像を表示させることができます。

imgタグの基本的な書き方

HTML
<img src="画像のURL">

src=""で、Webサイト上に表示する画像のパスを指定します。

  • 画像ファイルは、Webサーバー上に保存する必要があります
  • ファイル名やパス名は、半角英数字を使用しましょう
  • imgタグには終了タグは不要です

imgタグの属性

src属性

src 属性は必須で、画像ファイルのURLを指定します。絶対パスまたは相対パスを使用できます。

絶対パスと相対パスとは

HTMLにおいて、画像やCSSファイルなどの外部リソースへのリンクを記述する際、絶対パス相対パスの2つの方法があります。それぞれの特徴と使い分けについて説明します。

絶対パス

絶対パスは、Webサーバーのルートディレクトリから目的のファイルまでの完全な経路を記述する方法です。
具体的な書き方は、以下の通りです。

HTML
<img src="https://www.example.com/images/photo.jpg">

この例では、https://www.example.com/ がWebサーバーのドメイン名、images が画像ファイルのあるディレクトリ、photo.jpg が画像ファイル名となります。

絶対パスのメリット

  • ファイルの場所を明確に示せる
  • どのページからでも確実に同じリソースにアクセスできる

絶対パスのデメリット

  • 記述が長くなる
  • ファイルの階層構造が変化すると、パスを修正する必要がある
相対パス

相対パスは、現在表示されているHTMLファイルから目的のファイルまでの相対的な位置を記述する方法です。
具体的な書き方は、以下の通りです。

HTML
<img src="images/photo.jpg">

この例では、images/photo.jpg が現在表示されているHTMLファイルと同じディレクトリにある画像ファイルであることを示しています。

相対パスのメリット

  • 記述が簡潔になる
  • ファイルの階層構造が変化しても、パスを修正する必要がない

相対パスのデメリット

  • ファイルの場所を特定しにくい
  • ディレクトリ構造が変わるとリンクが機能しなくなることがある
使い分け

絶対パスと相対パスは、それぞれ適切な場面で使い分けることが重要です。

  • 絶対パスがおすすめ
    • 画像などのファイルを外部サイトから読み込む場合
    • ファイルの場所を明確に示したい場合
  • 相対パスがおすすめ
    • 同じWebサイト内のファイルを扱う場合
    • コードを簡潔に記述したい場合

alt属性

alt 属性は画像のテキストによる説明です。必須ではありませんが、記述した方が良いです。
スクリーンリーダーがこの説明を読み上げることで、ユーザーが画像の内容を理解できます。
また、ネットワークエラーやコンテンツのブロック、リンク切れなどで画像が表示されない場合に代替テキストが表示されます。

HTML
<img src="https://www.example.com/images/photo.jpg" alt="風景写真">

意味のある代替説明を書く
alt 属性の値は明確で簡潔に画像の内容を説明するものにしましょう。画像そのもの存在を説明するものであったり、画像のファイル名などは避けましょう。画像が言葉で説明できるものではなく、 alt 属性を意図的に省略する場合は、画像が伝えようとしていることの内容を他の方法で表すように考慮しましょう。

height属性 / width属性

画像固有の高さと幅をピクセル値で指定します。単位(pxなど)は書きません。

HTML
<img src="https://www.example.com/images/photo.jpg" alt="風景写真" height="400" width="600">

heightwidth を指定することで、ブラウザは画像を読み込む前にそのアスペクト比(縦横比)を計算できます。このアスペクト比は、画像を表示するためのスペースを確保するのに役立ちます。これにより、画像のダウンロードや表示時にレイアウトが崩れるのを防ぐことができます。レイアウトの崩れを最小限に抑えることは、ユーザー体験の向上とウェブパフォーマンスの重要な要素となります。

画像の形式

JPEG

Joint Photographic Expert Group image

拡張子: .jpg, .jpeg

  • 高い圧縮率でファイルサイズが小さくなる
  • フルカラー(16,777,216色)対応
  • 写真や複雑な画像に適しているが、圧縮による画質劣化がある

PNG

Portable Network Graphics

拡張子: .png

  • 圧縮しても画質が劣化しにくい
  • 透明度(アルファチャンネル)をサポート
  • ロゴやアイコン、イラストに適している

GIF

Graphics Interchange Format

拡張子: .gif

  • 256色までのカラーサポート
  • アニメーション画像が作成可能
  • 簡単なアニメーションや単色の画像に適している

SVG

Scalable Vector Graphics

拡張子: .svg

  • ベクター画像形式で、解像度に依存しない
  • テキストファイルとして編集可能
  • 高解像度ディスプレイやレスポンシブデザインに適している

WebP

Web Picture format

拡張子: .webp

  • 高圧縮率でありながら画質を維持
  • ロスレス(可逆圧縮)およびロッシー(非可逆圧縮)をサポート
  • 透明度やアニメーションもサポート

可逆圧縮と非可逆圧縮とは

可逆圧縮は、圧縮されたデータを元の状態に損失なく復元できる技術です。この方法では、元のデータの品質を保持しながら圧縮を行いますが、圧縮率は非可逆圧縮よりも低くなります。

一方、非可逆圧縮は、ある程度のデータ損失を許容しながら圧縮します。このため、元のデータを完全には復元できませんが、データサイズを大幅に削減でき、画質もほとんど劣化しません。

WebPは、この両方の圧縮方法に対応しており、従来の画像フォーマットよりも高い圧縮率を実現しています。Googleによると、可逆圧縮のWebP画像はPNG画像と比べてサイズが26%小さくなり、非可逆圧縮のWebP画像はJPEG画像と比べて25~34%小さくなります。WebPを使用することで、画像サイズを軽量化し、ウェブページの読み込み速度を向上させ、ユーザーエクスペリエンスを改善できます。

AVIF

AV1 Image File Format

拡張子: .avif

  • JPEGやPNGよりも圧縮率が高く、同じ画質でファイルサイズを大幅に小さくできる
  • ウェブサイトの読み込み速度が向上し、帯域幅の節約が可能
  • 軽量で高品質なアニメーション画像をサポート

AVIFはWebPに比べてさらに10%~30%程度もファイルサイズを小さくすることが可能となります。

画像の拡張子は場面に応じて使い分けましょう。

画像の読み込み

loading属性とは

imgタグのloading属性は、画像の読み込みタイミングを制御するための属性です。
2020年にHTMLに正式に導入され、近年、Webサイトのパフォーマンス向上やSEO対策に不可欠な要素として注目されています。

loading属性には、以下の2つの値を設定できます。

eager

loading="eager"は画像をすぐに読み込みます。従来のimgタグと同じ動作です。
ファーストビューに表示される画像などに設定します。

lazy

loading="lazy"は画像がブラウザの視覚ビューポート内に進入するまで読み込みを遅延します。具体的には、ユーザーがスクロールして画像が画面に表示される直前まで読み込まれません。

lazyを設定するメリット

  • ページの読み込み速度向上: 特に、画像が多いページや大きな画像ファイルを使用している場合に効果を発揮します。ユーザーが最初に閲覧する部分の読み込み速度が速くなるため、ページ全体の読み込み速度が向上します。
  • モバイル端末のデータ通信量節約: 画像の読み込みが遅延されるため、モバイル端末で閲覧する際のデータ通信量を節約できます。
  • SEO対策: 近年の検索エンジンは、ページの読み込み速度をランキングの指標の一つとしているため、loading属性を活用することでSEO対策にも効果が期待できます。

loading属性の使い方

HTML
<img src="https://www.example.com/images/photo.jpg" alt="風景写真" height="400" width="600" loading="lazy">

上記のように、imgタグにloading="lazy"を追加するだけで、画像の読み込みを遅延させることができます。

loading属性の注意点

ファーストビューの画像に使用するとパフォーマンスが低下する

loading="lazy"をファーストビューの画像に使用すると、その画像の表示が遅れるため、ページ全体の表示速度が低下します。したがって、ページの上部に配置される画像にはloading="eager"を指定するのが望ましいです。

ページ内リンクの位置がずれることがある

loading="lazy"を指定された画像は読み込まれるまで高さが0になるため、ページ内リンクで移動した位置が画像の読み込み前後で変わり、結果としてリンク先の位置がずれてしまいます。

画像にwidthheightを設定すると、読み込まれていない状態でも高さが保持されるため、遅延読み込みの前後でページの高さが変わらなくなります。設定するwidthheightの値は、可能な限り画像のオリジナルの大きさを指定すると良いでしょう。

HTML
<img src="https://www.example.com/images/photo.jpg" alt="風景写真" height="400" width="600" loading="lazy">

まとめ

今回はHTMLのimgタグについて、基本的な書き方からレイアウトのカスタマイズ、応用的な使い方まで解説しました。

imgタグは、Webページに画像を挿入するのに欠かせないタグです。
基本的な書き方をマスターすれば、様々なWebページで画像を活用することができます。

ぜひ、imgタグを使って、魅力的なWebページを作成してみてください!

では、また~✨

ABOUT ME

現役インハウスWebデザイナー。
35歳、2児の母。
今までの経験を活かし、コーディングやWebデザインについての情報を発信しています。

Contents