Modern HTML 1-6｜画像・メディア・レスポンシブHTML｜img・picture・audio・videoを使いこなす

この回で分かること

Modern HTML 1-5では、details・summary・dialog・popoverなどを使い、

JavaScriptを書く前にHTML標準でできることを確認する

というNative HTML Firstの考え方を学びました。

Modern HTML 1-6では、対象を画像・音声・動画へ広げます。

今回扱う主な内容は、

・img要素とaltの考え方
・width・heightによる表示領域の確保
・loading=”lazy”による遅延読み込み
・srcset・sizesによるレスポンシブ画像
・picture・sourceによる画像の切り替え
・画像形式の選び方
・audio・videoによるメディアの埋め込み
・sourceによる複数形式の指定
・trackによる字幕・キャプション
・HTML・CSS・JavaScriptの役割分担

です。

画像は、

「ページに表示できれば終わり」

ではありません。

意味、読み込み、レイアウト、画面幅、通信量、アクセシビリティまで考えてHTMLを組み立てることで、より扱いやすいWebページになります。

前回のミニチェック｜Modern HTML 1-5 回答・解説

Modern HTML 1-5では、HTMLだけで作れるインタラクションを学びました。

Q1｜FAQの回答を必要なときだけ開く場合は？

答えは、

details・summary

が候補です。

基本的な開閉だけであれば、ブラウザ標準の動作を利用できます。

FAQや補足説明のように、

「必要な人だけ開いて確認する」

内容と相性があります。

Q2｜重要な削除確認ならdialogとpopoverのどちら？

答えは、

dialog

が候補です。

「本当に削除しますか？」

のように、ユーザーへ明確な判断や対応を求める内容は対話UIとして扱うのが自然です。

一方、popoverはヒントや簡単なメニューなど、一時的な補足UIに向いています。

Q3｜APIの結果に応じて複数UIを連動させる場合もHTMLだけ？

答えは、

いいえ。必要ならJavaScriptを使います。

Native HTML Firstは、

「JavaScriptを使ってはいけない」

という考え方ではありません。

HTML標準で意味と基本動作を作り、

・APIとの通信
・複雑な状態管理
・複数UIの連動
・動的な生成や更新

などが必要になったところでJavaScriptを追加します。

まずHTML、それで不足する部分をJavaScriptで補う。

これがModern HTML 1-5で確認した考え方です。

img要素の基本と画像の伝え方

HTMLで画像を表示するときの基本となるのがimg要素です。

しかし、imgは単に画像ファイルを画面へ貼り付けるためだけの要素ではありません。

画像のURLだけでなく、

・画像が何を伝えるのか
・読み込み前にどれくらいの領域が必要なのか
・すぐ読み込む必要があるのか

といった情報もHTMLからブラウザへ伝えられます。

まずimg・alt・width・heightの基本形を確認します。

<img
  src="lake.webp"
  alt="湖の向こうに山並みが広がる風景"
  width="1200"
  height="800"
>

<img
  src="lake.webp"
  alt="湖の向こうに山並みが広がる風景"
  width="1200"
  height="800"
>

altはファイル名を書く場所ではない

altは、

画像が伝えている内容や役割をテキストで伝えるための属性

です。

例えば、

mountain-01.webp

というファイル名だからといって、

alt=”mountain-01.webp”

とするわけではありません。

記事の中で、

「湖の向こうに山が見える風景」

を読者へ伝える画像なら、その文脈に合った代替テキストを考えます。

重要なのは、

画像だけが見えなくても、その情報をどのように補えるか

です。

装飾だけの画像はaltを空にすることがある

すべての画像に説明文を書くわけでもありません。

背景的な飾りや、内容の理解に影響しない装飾画像では、

alt=””

を指定することがあります。

次の意味のある画像と装飾画像の例で確認します。

<img
  src="profile-photo.webp"
  alt="ToshiLabの記事制作画面"
  width="800"
  height="533"
>

<img
  src="background-decoration.webp"
  alt=""
  width="400"
  height="400"
>

<img
  src="profile-photo.webp"
  alt="ToshiLabの記事制作画面"
  width="800"
  height="533"
>

<img
  src="background-decoration.webp"
  alt=""
  width="400"
  height="400"
>

width・heightで画像読み込み前の領域を確保する

imgにはwidthとheightを指定できます。

これは単に、

「画像を600pxで表示する」

という見た目だけの話ではありません。

画像本来の縦横比をブラウザが早い段階で把握できるため、画像が読み込まれる前から必要な表示領域を確保しやすくなります。

その結果、

画像が後から読み込まれて文章が大きく動く

といったレイアウトのずれを抑えやすくなります。

img・alt・width・heightの基本でもwidthとheightを指定しています。

loading=”lazy”で画面外の画像を遅延読み込みする

長いページでは、最初からすべての画像を読み込む必要がない場合があります。

画面のかなり下にある画像なら、

loading=”lazy”

を指定することで、ブラウザへ遅延読み込みのヒントを伝えられます。

lazy loadingと重要画像の例で確認します。

<!-- ページ上部の重要な画像 -->
<img
  src="hero.webp"
  alt="Modern HTMLシリーズのメインビジュアル"
  width="1536"
  height="1024"
  fetchpriority="high"
>

<!-- 画面下部にある画像 -->
<img
  src="article-example.webp"
  alt="レスポンシブ画像の設定例"
  width="1536"
  height="1024"
  loading="lazy"
>

<!-- ページ上部の重要な画像 -->
<img
  src="hero.webp"
  alt="Modern HTMLシリーズのメインビジュアル"
  width="1536"
  height="1024"
  fetchpriority="high"
>

<!-- 画面下部にある画像 -->
<img
  src="article-example.webp"
  alt="レスポンシブ画像の設定例"
  width="1536"
  height="1024"
  loading="lazy"
>

ただし、

すべての画像へloading=”lazy”を付ければよい

というわけではありません。

ページを開いた直後に表示される重要な画像まで遅延させると、かえって表示が遅く感じられることがあります。

画面外の画像にはlazy loadingを検討し、

最初から必要な画像は通常どおり読み込む、

という使い分けが大切です。

発展｜fetchpriorityという選択肢

特に重要な画像については、

fetchpriority=”high”

で取得優先度のヒントをブラウザへ伝える方法もあります。

ただし、すべての画像をhighにすれば速くなるわけではありません。

優先度を上げすぎると他の重要なリソースと競合するため、

本当に重要な画像へ限定して検討する

機能です。

レスポンシブ画像をHTMLで設計する

CSSで画像を、

max-width: 100%;

のように縮めれば、画面からはみ出さない表示を作ることはできます。

しかし、

スマートフォンでもPC用の大きな画像ファイルを毎回ダウンロードしていたら、

見た目はレスポンシブでも、配信する画像までは最適化されていません。

そこでHTMLでは、

・srcset
・sizes
・picture
・source

を使って、

どの画像をブラウザへ届けるか

まで設計できます。

srcsetで画像候補を用意する

srcsetでは、

ブラウザが選択できる複数の画像候補を指定できます。

例えば、

・480px幅
・800px幅
・1200px幅

の画像を用意し、それぞれの実際の幅をw記述子で伝えます。

sizesで画像がどれくらいの幅で表示されるか伝える

srcsetに幅記述子を使う場合、sizesを組み合わせます。

sizesは、

現在のレイアウトでは、この画像がどれくらいの幅で表示される予定なのか

というヒントをブラウザへ伝えます。

srcset・sizesの例で確認します。

<img
  src="landscape-800.webp"
  srcset="
    landscape-480.webp 480w,
    landscape-800.webp 800w,
    landscape-1200.webp 1200w
  "
  sizes="
    (max-width: 600px) 100vw,
    (max-width: 1024px) 80vw,
    800px
  "
  alt="湖と山が広がる風景"
  width="1200"
  height="800"
>

<img
  src="landscape-800.webp"
  srcset="
    landscape-480.webp 480w,
    landscape-800.webp 800w,
    landscape-1200.webp 1200w
  "
  sizes="
    (max-width: 600px) 100vw,
    (max-width: 1024px) 80vw,
    800px
  "
  alt="湖と山が広がる風景"
  width="1200"
  height="800"
>

ブラウザは、

srcsetに用意された候補とsizesの情報などを使いながら、適切な画像を選びます。

そのため、

「スマートフォンなら必ず480w」

とHTML側が固定的に命令しているわけではありません。

候補と条件を伝え、最終的な選択をブラウザへ任せる

という考え方です。

picture・sourceで画像そのものを切り替える

srcset・sizesは、

同じ内容の画像について、適切な解像度を選ばせたい場合に向いています。

一方で、

スマートフォンでは人物を大きく見せたい、

PCでは背景まで含めた横長画像を見せたい、

というように構図そのものを変更したい場合があります。

このような考え方を、

アートディレクション

と呼びます。

pictureとsourceを使うことで、表示条件に合わせて異なる画像を候補として指定できます。

pictureによるアートディレクションの例で確認します。

<picture>
  <source
    media="(max-width: 600px)"
    srcset="hero-mobile.webp"
    width="600"
    height="800"
  >

  <source
    media="(max-width: 1024px)"
    srcset="hero-tablet.webp"
    width="1024"
    height="768"
  >

  <img
    src="hero-desktop.webp"
    alt="湖の向こうに山が広がる風景"
    width="1200"
    height="675"
  >
</picture>

<picture>
  <source
    media="(max-width: 600px)"
    srcset="hero-mobile.webp"
    width="600"
    height="800"
  >

  <source
    media="(max-width: 1024px)"
    srcset="hero-tablet.webp"
    width="1024"
    height="768"
  >

  <img
    src="hero-desktop.webp"
    alt="湖の向こうに山が広がる風景"
    width="1200"
    height="675"
  >
</picture>

pictureには最後にimgを置く

pictureを使う場合でも、最後にはimgを置きます。

picture内のsourceは、表示条件や画像形式に応じた画像候補を
ブラウザへ伝える役割を持ちます。

一方、実際の画像要素となるのはimgです。

sourceの条件に一致する候補がない場合には、imgのsrcがフォールバックとして使われます。

画像の代替テキストとなるaltも、基本的にはこのimgへ設定します。

picture・sourceは画像形式の切り替えにも使える

pictureは画面幅だけではなく、

ブラウザが対応している画像形式

によって候補を切り替える用途にも使えます。

例えば、

・AVIF
・WebP
・JPEG

の候補を用意し、対応形式から選択させる構成です。

画像形式を切り替える参考例で確認します。

<picture>
  <source
    srcset="hero.avif"
    type="image/avif"
  >

  <source
    srcset="hero.webp"
    type="image/webp"
  >

  <img
    src="hero.jpg"
    alt="湖と山が広がる風景"
    width="1200"
    height="800"
  >
</picture>

<picture>
  <source
    srcset="hero.avif"
    type="image/avif"
  >

  <source
    srcset="hero.webp"
    type="image/webp"
  >

  <img
    src="hero.jpg"
    alt="湖と山が広がる風景"
    width="1200"
    height="800"
  >
</picture>

画像形式は、

「写真だから絶対JPEG」

「透過だから絶対PNG」

と固定的に決めるのではなく、

・画質
・透過の必要性
・ファイルサイズ
・ブラウザ対応
・制作フロー
・元画像の特徴

などから判断します。

figure・figcaptionで画像と説明をひとまとまりにする

Modern HTML 1-3で学んだfigureとfigcaptionも、画像記事では重要です。

画像とそのキャプションを、

ひとつの自己完結したまとまりとして扱う意味がある場合

にはfigureが候補になります。

figure・figcaptionを使った例で確認します。

<figure>
  <img
    src="responsive-image-example.webp"
    alt="PC・タブレット・スマートフォンで異なる画像表示を比較した例"
    width="1200"
    height="800"
  >

  <figcaption>
    画面幅や表示条件に合わせて適切な画像を届ける例
  </figcaption>
</figure>

<figure>
  <img
    src="responsive-image-example.webp"
    alt="PC・タブレット・スマートフォンで異なる画像表示を比較した例"
    width="1200"
    height="800"
  >

  <figcaption>
    画面幅や表示条件に合わせて適切な画像を届ける例
  </figcaption>
</figure>

ただし、

画像があるから必ずfigureにする

というルールではありません。

本文の一部として普通に配置する画像ならimgだけで十分な場合もあります。

audio・videoで音声と動画を扱う

HTMLには、音声を扱うaudioと動画を扱うvideoがあります。

外部プレイヤーや独自JavaScriptを用意しなくても、

ブラウザ標準の再生UIを使って基本的な再生ができます。

さらにsourceを使えば複数形式を用意でき、trackを使えば字幕やキャプションなどの時間同期テキストも追加できます。

controlsでブラウザ標準の再生UIを使う

audioやvideoにcontrolsを指定すると、

ブラウザが再生・一時停止・音量・シークなどの基本操作UIを提供します。

まずaudio・controls・sourceを使った例で確認します。

<audio controls preload="metadata">
  <source
    src="voice.opus"
    type="audio/ogg; codecs=opus"
  >

  <source
    src="voice.mp3"
    type="audio/mpeg"
  >

	<p>
  	お使いのブラウザはaudio要素に対応していません。
  	<a href="voice.mp3">音声ファイルを開く</a>
	</p>
</audio>

<audio controls preload="metadata">
  <source
    src="voice.opus"
    type="audio/ogg; codecs=opus"
  >

  <source
    src="voice.mp3"
    type="audio/mpeg"
  >

	<p>
  	お使いのブラウザはaudio要素に対応していません。
  	<a href="voice.mp3">音声ファイルを開く</a>
	</p>
</audio>

sourceを複数用意すると、ブラウザは再生可能な候補を順番に確認できます。

typeでMIMEタイプを伝えておくと、ブラウザが再生できる形式か判断しやすくなります。

音声だけのコンテンツでは文字起こしも考える

audioで音声を再生できるようにするだけでは、音声を聞くことができないユーザーへ内容を伝えられない場合があります。

ポッドキャストや音声解説など、録音済みの音声だけで情報を提供する場合には、内容をテキストで確認できる文字起こし（transcript）も用意することを検討します。

HTMLのaudio要素で再生できることと、コンテンツ自体へアクセシブルにアクセスできることは別の問題です。

メディアを表示・再生できれば完成ではなく、その情報をどのように利用できるかまで考える

ことが大切です。

videoではposterやpreloadも使える

videoも基本的な考え方はaudioと同じです。

controlsとsourceを使って動画を提供できます。

さらに、

poster

で再生前に表示する画像を指定できます。

preloadでは、

ページ表示時にメディアをどの程度事前読み込みしてほしいかというヒントをブラウザへ伝えられます。

video・poster・preloadを使った例で確認します。

<video
  controls
  preload="metadata"
  poster="video-poster.webp"
  width="1280"
  height="720"
>
  <source
    src="movie.webm"
    type="video/webm"
  >

  <source
    src="movie.mp4"
    type="video/mp4"
  >

	<p>
  	お使いのブラウザはvideo要素に対応していません。
  	<a href="movie.mp4">動画ファイルを開く</a>
	</p>
</video>

<video
  controls
  preload="metadata"
  poster="video-poster.webp"
  width="1280"
  height="720"
>
  <source
    src="movie.webm"
    type="video/webm"
  >

  <source
    src="movie.mp4"
    type="video/mp4"
  >

	<p>
  	お使いのブラウザはvideo要素に対応していません。
  	<a href="movie.mp4">動画ファイルを開く</a>
	</p>
</video>

preloadはブラウザへのヒントです。

指定したからといって、必ずその通りの読み込みになるとは限りません。

trackで字幕・キャプションを追加する

動画は、

映像と音声が再生できれば完成

とは限りません。

会話内容を文字で確認したいユーザーや、音声を聞けない環境で閲覧しているユーザーもいます。

trackを使うと、WebVTT形式のファイルを関連付けて、

・字幕
・キャプション
・チャプター
・説明

などの時間同期テキストを提供できます。

trackでキャプションを提供する例を確認します。

<video
  controls
  preload="metadata"
  width="1280"
  height="720"
>
  <source
    src="lesson.mp4"
    type="video/mp4"
  >

  <track
    kind="captions"
    src="captions-ja.vtt"
    srclang="ja"
    label="日本語キャプション"
    default
  >
</video>

<video
  controls
  preload="metadata"
  width="1280"
  height="720"
>
  <source
    src="lesson.mp4"
    type="video/mp4"
  >

  <track
    kind="captions"
    src="captions-ja.vtt"
    srclang="ja"
    label="日本語キャプション"
    default
  >
</video>

subtitlesとcaptionsは同じではない

subtitlesは主に、

会話内容を別の言語などで文字として提供する

用途です。

captionsは、

会話だけでなく、

・効果音
・音楽
・話者
・重要な音声情報

など、音を聞かなくても内容を理解しやすくする情報を含めることがあります。

autoplayは慎重に使う

audioやvideoにはautoplayがあります。

しかし、

ページを開いた瞬間に突然音が鳴る

動作は、ユーザー体験を大きく損なう可能性があります。

また、現在のブラウザでは音声付きメディアの自動再生が制限される場合があります。

そのため、

自動再生できるから使う

のではなく、

本当に必要な場面なのかを考えます。

HTML・CSS・JavaScriptの役割を分ける

画像やメディアでも、

HTMLだけですべてを完成させる必要はありません。

HTMLでは、

・画像やメディアの意味
・画像候補
・表示条件
・再生可能なソース
・標準コントロール
・字幕やキャプション

などを指定します。

CSSでは、

・表示サイズ
・レイアウト
・余白
・object-fit
・レスポンシブな見た目

などを調整します。

JavaScriptは、

・独自プレイヤー
・高度な再生制御
・動的なソース変更
・状態連携
・解析や独自操作

などが必要になった場合に追加します。

実務ではどこで使う？

ブログや技術記事の画像

alt・width・heightを適切に設定し、画面外の画像ではloading=”lazy”を検討します。

ToshiLabの記事画像も、この考え方と直接つながります。

アイキャッチやヒーロー画像

ページ上部の重要な画像は、何でもlazy loadingにするのではなく、初期表示との関係を考えます。

必要に応じてsrcset・sizesや画像形式の最適化も検討します。

商品・作品・ポートフォリオ画像

画面幅に応じて適切な解像度を選ばせる場合はsrcset・sizesが候補になります。

スマートフォンだけ構図を変えたい画像

PCでは横長、スマートフォンでは被写体を大きく見せるなど、構図そのものを変える場合はpicture・sourceによるアートディレクションを検討できます。

音声コンテンツ

ナレーション、ポッドキャスト、音声サンプルなどではaudioが候補になります。

動画コンテンツ

操作説明、デモ、講座などではvideoを利用でき、trackによる字幕・キャプションも検討します。

今回できるようになったこと

・img要素の基本を理解できる
・画像の役割からaltを考えられる
・装飾画像でalt=””を使う理由を理解できる
・width・heightで表示領域を確保できる
・loading=”lazy”を使う場面を判断できる
・srcsetとsizesの役割を説明できる
・picture・sourceでアートディレクションができる
・画像形式を条件から選ぶ考え方を持てる
・figure・figcaptionを適切に使える
・audio・videoの基本を理解できる
・複数のsourceを用意できる
・trackで字幕・キャプションを提供できる
・autoplayを慎重に判断できる
・HTML・CSS・JavaScriptの役割を分けて考えられる

Modern HTML 1-6 ミニチェック

Q1

記事本文のかなり下にある説明画像があります。

ページを開いた瞬間には必要ありません。

この画像の初期読み込み負荷を抑えるため、img要素で検討できる属性は何でしょうか？

Q2

同じ写真について、

480px・800px・1200px幅の画像を用意しました。

ブラウザに複数の画像候補を伝え、レイアウト上の表示幅をヒントとして渡したい場合、主にどの2つの属性を組み合わせるでしょうか？

Q3

動画内の会話だけでなく、

効果音や話者などの音声情報も文字で伝えたいとします。

trackのkindでは、

subtitlesとcaptionsのどちらがより目的に合うでしょうか？

まとめ

Modern HTML 1-6では、

画像・レスポンシブ画像・音声・動画をHTMLで扱う方法を学びました。

今回の大きなポイントは、

メディアは「表示できたら完成」ではない

ということです。

画像では、

意味を伝えるalt、

レイアウトを安定させるwidth・height、

読み込みを調整するloading、

適切な画像を届けるsrcset・sizes・picture・source

があります。

音声・動画では、

audio・video、

controls、

source、

track

など、ブラウザ標準の仕組みを利用できます。

HTMLが用意している機能を理解したうえで、

CSSやJavaScriptを必要な部分へ追加する。

画像やメディアでも、

Native HTML First

の考え方は変わりません。

前回を確認する

Modern HTML 1-5では、

details・dialog・popoverを使ったHTML標準のインタラクション

について整理しました。

Modern HTML 1-5 | details・dialog・popoverを使ったHTML標準のインタラクション

Modern HTML 1-5｜HTMLだけで作れるインタラクション｜details・dialog・popoverを使う

次に読む

次回は、

Modern HTML 1-7｜HTMLとアクセシビリティ

へ進みます。

HTML要素が持っている意味やブラウザ標準の機能を、

キーボード操作・支援技術・ラベル・ランドマークなどの観点から整理します。

ミニチェックの回答は1-7で掲載

Modern HTML 1-7｜HTMLとアクセシビリティ｜セマンティクス・キーボード操作・ARIAの基本

toshi

フルスタックエンジニア

XFacebookInstagramContact

C型肝炎や感染症の闘病を経て現在通院中
フリーランスとして今日を生きる、それがすべて。
静かな光の中で、歩みを止めずに生きていく。
実験大好きなので色々とやっていきます。