【画像要素の最適化】imgタグの適切な書き方

はじめに

Webページの表示速度はユーザー体験に直結し、SEO（検索エンジン最適化）にも影響を与えます。その中でも、画像要素は特に大きな役割を果たします。画像はページの視覚的な魅力を向上させる一方で、読み込み時間を遅くする可能性があるため、最適な指定が重要です。

この記事では、初心者から上級者までが活用できる、HTMLの画像要素に関するベストプラクティスを紹介します。画像の読み込み速度を向上させる方法や、アクセシビリティを確保するためのalt属性の設定など、具体的な実装例を交えて解説します。

img要素の最適化実践

loading＆decodingとfetchpriority属性

画像の読み込みタイミングをコントロールするために、HTMLにはloading、decoding、そしてfetchpriority属性があります。これらを適切に使い分けることで、ページの表示速度を改善し、ユーザーにより快適なブラウジング体験を提供できます。

• loading=”lazy”: ブラウザーが、ユーザーのビューポート（画面内）に近づいたときに初めて画像を読み込むように指示します。これにより、ページの初期ロード時間が短縮されます。
• decoding=”async”: 画像を非同期でデコードし、他のコンテンツが表示されるのを遅らせないようにします。
• fetchpriority=”high”: 特に重要な画像（たとえば、ページの主要なビジュアルやコンテンツの大部分を占める画像）には、読み込みの優先順位を「高」に設定します。

これらを使った例は以下のようになります。

<img src="1.png" alt="サンプル" loading="lazy" decoding="async">
<img src="2.png" alt="サンプル" fetchpriority="high">

alt属性の正しい使い方

次に重要なのは、画像のalt属性です。alt属性は、画像が表示できない場合に代わりに表示されるテキストであり、視覚に障害を持つユーザーがスクリーンリーダーでコンテンツを理解するために使用されます。

• 意味のある画像: 画像が重要な情報を伝えるものであれば、適切な代替テキストを記述します。
• 装飾目的の画像: デザイン上の装飾で意味がない場合、alt=""（空）を指定します。これにより、スクリーンリーダーが無視するようになります。

代替テキストを書く際のポイント:

• ファイル名や「画像」などの単純な説明ではなく、その画像が何を伝えようとしているかを考えて記述します。
• 同じ画像でも、文脈によって代替テキストを変更することが重要です。

<!-- 意味のある画像：会社名を伝えるロゴ -->
<h1><img src="logo.png" alt="株式会社サンプル" loading="lazy" decoding="async"></h1>

<!-- 装飾目的の画像 -->
<p><img src="decorative.png" alt="" loading="lazy" decoding="async"></p>

<!-- 画像に関する具体的な説明が必要な場合 -->
<p><img src="logo.png" alt="ロゴ：白い背景、中央には青い月があり、内側には小さなオレンジ色の星がある" fetchpriority="high"></p>

まとめ

画像要素の最適化は、Webサイトのパフォーマンス向上やアクセシビリティ改善に直結します。loading、decoding、fetchpriorityといった属性を適切に使うことで、ページ表示速度を高速化し、ユーザーエクスペリエンスを向上させることができます。また、alt属性を正しく設定することは、すべてのユーザーがコンテンツにアクセスできるようにするために非常に重要です。

補足情報

LCP要素（Largest Contentful Paint）

LCPは、ページのメインコンテンツ（大きな画像や見出しなど）が表示されるまでの時間を指します。LCPが遅いと、ユーザーはページが遅いと感じてしまいます。fetchpriority=”high” を使うことで、重要な画像の読み込みを優先させ、LCPを改善します。

参考書籍・参考記事

参考書籍
Webアプリケーションアクセシビリティ 今日から始める現場からの改善 技術評論社

参考記事
良好URLを1%から99%に爆増させたパフォーマンス改善の話 (zenn.dev)
https://www.codegrid.net/articles/2023-alt-text-3/