画像とメディア
Webページの多くはテキストで構成されていますが、すべてがそうではありません。写真、図、イラスト、ビデオクリップ、サウンドもコンテンツであり、HTMLにはそれぞれの要素があります。この章は、ページにメディアを配置するマークアップについてです。画像ファイルへの参照方法、見ることができない人のための説明方法、そして誰のデータも無駄にすることなく正しいスクリーンに正しいファイルを配信する方法です。
画像要素
ページに画像を配置するには、画像要素（<img>と書きます）を使います。コンテンツはなく、閉じタグもありません。代わりに、属性を通じて2つのことを指定します。表示するファイルと、画像が何であるかです。
<img src="golden-retriever.jpg" alt="草むらに座っているゴールデンレトリバー">srcはソース（source）です。画像ファイルのパスまたはWebアドレスです。altは代替テキスト（alternative text）です。画像の説明を言葉で表したものです。画像が読み込めない場合、または誰かが見る代わりにスクリーンリーダーでページを聴いている場合、altテキストが提供されるものです。だから、友人に電話で画像を説明するかのように書きましょう。
src（表示するファイル）とalt（画像を言葉で説明するもの）です。altを電話で誰かに写真の中身を説明しているかのように書いてください。最もスキップされる部分であり、最も重要な部分です。 レスポンシブ画像
ノートパソコンでは鮮明に見える写真は、スマートフォンが必要とするサイズより大きい場合があります。そのフルサイズファイルを小さいスクリーンに送ると、訪問者のデータが無駄になり、ページが遅くなります。HTMLでは、同じ画像の複数のバージョンを提供し、ブラウザに合ったものを選ばせることができます。
開始している間、すべての画像にこれが必要なわけではありません。合理的なファイルを含む単一の<img>で十分です。しかし、この考えが存在することを知ることは役に立ちます。同じ写真は複数のサイズで提供でき、ブラウザが選択します。
<img src="beach-800.jpg" alt="夕暮れ時に海岸に転がる波"><img>で十分です。ページがモバイルで重くなり始めたときのオプションがあります。 ビデオとオーディオ
HTMLは、プラグインなしでビデオとサウンドを再生できます。クリップの場合、<video>要素を使用します。サウンドの場合、<audio>です。controls属性を追加すると、ブラウザは再生ボタン、タイムライン、ボリュームコントロールを無料で提供します。
<video src="tutorial.mp4" controls></video>
<audio src="podcast-episode.mp3" controls></audio>画像とは異なり、これらには閉じタグがあります。なぜなら、開いているタグと閉じるタグの間にフォールバックテキストまたは追加の設定を入れることができるからです。最初に覚えておくべき最も重要なことは常にcontrolsを含めることです。そうしないと、訪問者は再生を押す方法がありません。
<video>はクリップを再生し、<audio>はサウンドを再生します。プラグインは必要ありません。controlsを追加してください。そうしないと再生ボタンはなく、訪問者が立ち往生しています。両方に閉じたタグがあります。画像とは異なり、設定とフォールバックテキストを内側に入れることができるからです。 サイズ設定、遅延読み込み、パフォーマンス
画像が読み込まれると、ページの残りの部分を押しのけることができます。段落を読んでいる場合、その上の写真が読み込みを完了し、突然テキストが下に移動します。その跳躍は迷惑です。防ぐことができます。widthとheightで事前に画像のサイズをブラウザに伝えます。
<img src="team-lunch.jpg" alt="オフィスのバルコニーでランチを共有しているチーム"
width="800" height="600">これらの数字を使用して、ブラウザは画像が到着する前に正しい量のスペースを予約するため、到着したときには何も跳ねません。ファイルの実ピクセル寸法を指定し、CSSはそれでもスクリーン上でリサイズできます。
widthとheightを指定すると、写真が読み込まれるときにページが飛び回りを停止します。ファイルの実ピクセルサイズを使用してください。CSSはまだスクリーン上でそれを縮小できます。この1つの習慣は、最も迷惑な読み込み不具合を修正します。