HTMLを使用してWebページに画像を追加する方法

このチュートリアルでは、HTMLを使用してWebサイトに画像を追加する方法を学習します。また、スクリーンリーダーを使用するサイト訪問者のアクセシビリティを向上させるために、画像に代替テキストを追加する方法についても学習します。

HTMLで画像を追加する

<img>要素を使用して、画像がHTMLドキュメントに追加されます。 <img>要素には、画像が保存されるファイルの場所を設定できる属性srcが必要です。画像要素は次のように記述されます。

<img src="Image_Location">

<img>要素はではなく終了</img>タグを使用することに注意してください。 <img>要素を使用するには、サメのサメの画像をダウンロードして、プロジェクトディレクトリhtml-practice.に配置してください。

注：サメのサメの画像をダウンロードするには、リンクとCTRL + Left Click（Macの場合）またはRight Click（Windowsの場合）にアクセスしてください。画像を選択し、[名前を付けて画像を保存]を選択して、small-profile.jpegとしてプロジェクトディレクトリに保存します。

次に、index.htmlファイルの内容を消去し、<img src="Image_Location">をファイルに貼り付けます。（チュートリアルシリーズに従わなかった場合は、チュートリアルHTMLプロジェクトのセットアップでindex.htmlファイルのセットアップ手順を確認できます。

次に、画像のファイルパスをコピーし、Image_Locationを保存した画像の場所に置き換えます。 Visual Studio Codeテキストエディターを使用している場合は、イメージファイルsmall-profile.jpegでCTRL + Left Click（Macの場合）またはRight Click（Windowsの場合）を使用してファイルパスをコピーできます。左側のパネルで[パスのコピー]を選択します。プロセスの説明については、以下のgifを参照してください。

注：イメージの絶対またはフルファイルパスではなく、イメージの相対またはプロジェクトファイルパスをコピーしてください。相対パスは、現在の作業ディレクトリを基準にしたファイルの場所を指します（ルートディレクトリを基準にしたファイルの場所を指す abstract パスとは対照的です）。この場合、両方のパスが機能しますが、 Webサイトをオンラインで公開することにした場合、相対パスのみが機能します。最終目標は公開可能なWebサイトを作成することなので、ドキュメントに<img>要素を追加するときに、相対パスの使用を開始します。

index.htmlファイルを保存し、ブラウザにリロードします。次のようなものを受け取るはずです。

技術的には、オンラインでホストされている画像へのリンクをファイルパスとして使用することもできます。これがどのように機能するかを理解するには、画像の場所を次のようにサメのサメの画像へのリンクに置き換えてみてください。

<img src="https://html.sammy-codes.com/images/small-profile.jpeg">

ファイルを保存して、ブラウザにリロードします。画像は引き続きWebドキュメントに読み込まれますが、今回は画像がローカルプロジェクトディレクトリではなくオンラインの場所から取得されています。 <img>タグのsrc属性として位置リンクを使用して、他のオンライン画像を追加してみることができます。

ただし、Webサイトを構築するときは、サイトの持続可能性を確保するために、プロジェクトディレクトリで画像をホストすることをお勧めします。画像がホストによって削除された場合、またはアドレスが変更された場合、画像はサイトに表示されなくなります。

アクセシビリティの代替テキスト

画像を追加するときは、alt属性を使用してそのコンテンツを説明する代替テキストを常に含める必要があります。このテキストは通常、Webページには表示されませんが、視覚障害のあるサイト訪問者にコンテンツを伝達するためにスクリーンリーダーによって使用されます。

<img src="https://html.sammy-codes.com/images/small-profile.jpeg" alt="Digital Ocean’s mascot, a blue smiling shark." >

代替テキストを追加するときは、次のベストプラクティスに留意してください。

有益な画像の場合、代替テキストは、画像自体を参照せずに、画像の主題を明確かつ簡潔に説明する必要があります。たとえば、「DigitalOceanのマスコットであるSammy the Sharkの画像」ではなく、「DigitalOceanのマスコットであるSammytheShark」と記述します。
装飾画像の場合は、alt属性を引き続き使用する必要がありますが、スクリーンリーダーのエクスペリエンスが向上するため、値はnullになります：<img src="images/decorative_image.jpeg" alt="">。
画像が有益であるか装飾的であるかを判断するための便利なガイドについては、https://www.w3.org/WAI/tutorials/images/decision-tree/にアクセスしてください。

これで、HTMLドキュメントに画像を追加する方法と、アクセシビリティを支援するための代替テキストを追加する方法に精通しているはずです。画像のサイズとスタイルを変更する方法については、このシリーズの後半のチュートリアルWebページにプロファイル画像を追加する方法で学習します。次のチュートリアルでは、HTMLドキュメントにリンクを追加する方法を学習します。