ウェブサイトのビジュアル要素は、ユーザーエクスペリエンスにおいて重要な役割を果たします。その中でも、画像は情報を効果的に伝える手段として欠かせない存在です。この記事では、imgタグに焦点を当て、適切な使い方や遅延読み込み、アクセシビリティの考慮などについて詳しく解説します。
はじめに
この記事の対象者
- ウェブ制作を基礎からしっかり学びたい方
- 代替テキストがあまりピンとこない方
- ウェブページの高速化に興味のある方
この記事の目標
- アクセシビリティを考慮して代替テキストを決められる
- レイアウトシフトへの対策を行える
- 画像の遅延読み込みとメリットについて理解する
- 高解像度ディスプレイへの対策を行える
この記事と関連性のあるHTMLタグ
- <img>
src属性と絶対パス、相対パスについて
src属性はimg要素にとって重要な属性であり、画像ファイルの場所を指定する役割を果たします。絶対バスと相対パスの2通りの指定方法があり、パス指定が間違っていると画像は表示されません。imgタグを使用する際の必須知識なので、これらについて解説します。
絶対パス
絶対パスは画像の完全なURLを含みます。例えば「https://example.com/images/picture.jpg」のような記述になります。CDN（コンテンツデリバリーネットワーク）から提供される画像など、外部サーバーや別のドメインにある画像を表示する際に使用されます。
相対パス
相対パスは現在のウェブページからの相対的な位置を示します。現在のページと画像が同じディレクトリにある場合はファイル名だけで画像を表示することができますが、画像ファイルは一般的に一つあるいは複数のディレクトリにまとめられることが多いので、「ディレクトリ名/ファイル名」のような記述になります。相対パスは同じウェブサイト内の画像を表示する際に使用されます。
パス指定の注意点として、画像の配置場所やディレクトリ構造の変更時にはパスの更新を行う必要があります。ウェブサイトの規模や進捗状況によっては手間のかかる作業になるので、このようなリスクを避けるためにも、どのようなディレクトリ構造で開発を行うかは事前に決定しておくことが大切です。
alt属性とアクセシビリティについて
ウェブサイトは視覚障害を持っている方に対しても適切に情報を提供する役目があります。また、通信環境などの影響で画像の読み込みが失敗した場合でも、コンテンツの内容が理解できるものでなければなりません。
そのために使用されるのがalt属性です。alt属性を使用することで、画像が読み込まれない場合などに画像の代わりとなるテキストを定義することができ、アクセシビリティに対しての対策を行うことができます。
alt属性のよくある間違いと適切な使い方
alt属性は画像の代わりとなるテキストを定義するためのものですが、使い方には注意が必要です。
画像の代わりとなるテキストが必要ないケースはよくあります。こういった画像に無理やり代替テキストを定義することは望ましくありません。スクリーンリーダーはこれらのテキストを読み上げ、ユーザーに対してコンテンツとは関係のない不要な情報を与えることになります。
よく見かける誤った使い方として、装飾目的の画像に対し、画像のキャプションのような「画像がどのようなものかを説明したテキスト」をalt属性に記述している場合があります。
画像のキャプションはfigureで画像とテキストをグルーピングしたうえでfigcaptionで定義することが適切であり、これはデザインを無視してコーディング時にあえて追加するような要素ではありません。
また、代替テキストが必要ないからといってalt属性を省略することは推奨されません。スクリーンリーダーの種類によって挙動に違いがあるようですが、少なからずalt属性が省略されたimg要素に対して何らかの対応を行います。
例えば、Windowsに標準で搭載されている「ナレーター」というスクリーンリーダーでは、alt属性の記述がないimg要素は「ラベルがない画像」と読み上げます。他にも、画像のパスを読み上げてしまうといった挙動をとるスクリーンリーダーもあります。
代替テキストの必要が無ければ「alt=””」とすればその画像はスクリーンリーダーから無視されるので、img要素には必ずalt属性を記述するようにしましょう。
代替テキストが必要な画像
以下のような画像には代替テキストを定義することが必要です。
- 文章では伝えづらい内容を表している画像
- 画像リンク
- ボタンやラベル、アイコン画像
グラフのように具体的に何かを説明するような画像は、コンテンツの内容をユーザーに理解してもらいやすくするために使用されます。このような画像には代替テキストを用意することが適切です。画像が表示されなくても意味が伝わるように配慮する必要があります。
また、画像のみのリンクにも代替テキストを記述します。例えば、ブログサイトの記事リンクを画像のみで表現している場合、画像が表示されていればサムネイル画像のタイトルからリンク先の記事の内容を把握できますが、代替テキストが無いとウェブブラウザではクラッシュした画像のアイコンが表示されるだけになってしまいます。代替テキストでリンク先の記事タイトル等を記述しておくことで、画像が表示されない環境のユーザーに対しても適切に情報を伝えることができます。
ボタンやラベル、アイコン等をimgタグのみで表現している場合もこれと同じです。これらの要素はユーザビリティに大きく関わり、ウェブサイト上で重要な要素であることが多いので、特に注意を払う必要があります。
このように、代替テキストがないとコンテンツの内容が伝わらない場合や、リンク先の情報が分からない場合などにalt属性の内容を定義することが適切です。
レイアウトシフトについて
ウェブブラウザは、サーバーとのデータのやり取りと並行してウェブページの描画を行います。この過程でウェブブラウザはHTMLやCSS、画像等の情報から、要素をどの位置に描画するかといったレイアウトの計算を行います。
レイアウトの計算後に画像が読み込まれた場合、ウェブブラウザは再度レイアウトの計算を行い、その画像の表示領域を確保します。
ウェブブラウザはサーバーからの情報が全て揃わなくてもページの描画を進めるため、サーバーからの応答が遅い場合や画像が重い場合などに画像の取得が遅れ、レイアウトの再計算により、途中まで表示されていたテキストなどの情報に割り込むかたちで画像が表示されることがあります。
この現象をレイアウトシフトといい、この対策を行わないとユーザーエクスペリエンスに悪影響を与えかねません。
レイアウトシフトの影響
レイアウトシフトが発生することで、以下のような影響を与えます。
- 読み込み中の違和感
- クリックミス
- コンテンツの見落とし
画像の読み込みが意図せずに遅れている場合、ユーザーはレイアウトの崩れたウェブページを目にすることになります。これはユーザーに違和感を与えることになり、ウェブサイトへの信頼を損なう可能性が生まれます。
また、何らかのリンクをクリックしようとした際、突然レイアウトが変わるとクリックミスを招く可能性や、コンテンツの表示位置が変わることでユーザーが重要な情報を見落としてしまうことも考えられます。
レイアウトシフトの対策方法
レイアウトシフトの対策は、img要素にwidthとheight属性を指定することが一般的です。これらを指定することでウェブブラウザに画像のアスペクト比とサイズを伝えることができ、レイアウトの計算が画像の読み込み前に行われた場合でも事前に画像の表示領域を確保することができます。
<img src="image.jpg" alt="" width="300" height="200">注意点として、上記の例では幅が300pxで高さが200pxの画像であることを表していますが、width, height属性に「px」は記述しません。
レイアウトシフトへの対策を行うことでウェブサイトの品質を高めることができるので、基本的なimg要素の記述方法として覚えておくと良いでしょう。
画像の遅延読み込みについて
ウェブページを高速化するための手法の一つとして、画像の遅延読み込みがあります。HTMLの解析は上から順番に行われますが、ファーストビューに表示されるもの以外の画像の読み込みを遅らせることで、ファーストビューが表示されるまでの時間を短縮し、ユーザーエクスペリエンスを向上させることができます。
遅延読み込みの利点
画像の遅延読み込みを行うことで、以下のような利点があります。
- ページ表示の高速化
- サーバーへの負荷軽減
画像はテキストデータに比べてファイルサイズが大きいため、ウェブページを表示する際に全ての画像を要求するとページが表示されるまでの時間に影響を与えてしまう可能性があります。遅延読み込みを行うことでページを表示するまでに必要な情報量が少なくなり、パフォーマンスの向上とサーバーの負荷軽減が期待できます。
遅延読み込みの実装方法
HTML5から導入されたloading属性を使用することで遅延読み込みを実現することができます。具体的には、imgタグに「loading=”lazy”」を追加するだけです。
<img src="image.jpg" alt="An image" loading="lazy">JavaScriptのAPIやライブラリを使用することでも実現できます。遅延読み込みを実装するためのライブラリとしてlazysizes.jsなどが有名ですが、img要素以外も遅延読み込みできるなど、より高度な実装もできたりします。これらの使用を検討するのも良い選択だと思います。
遅延読み込みの注意点
画像の遅延読み込みを実装する際、以下の点について注意する必要があります。
- メインビジュアルには実装しない
- レイアウトシフト対策を行う
通常、画像ファイルはHTMLの解析と同時進行で取得されます。しかし、loading=”lazy”を指定したimg要素はHTMLの解析後まで画像の取得を行いません。
ファーストビューで表示されるようなメインビジュアルの画像に遅延読み込みを実装すると、HTML解析後に画像を取得する流れになるため、ファーストビューの表示が遅れてしまいます。ファーストビューの画像の取得はHTMLの解析と同時進行で行った方が良いので、これらの画像には遅延読み込みを実装しないようにしましょう。
また、遅延読み込みを実装することで結果的にテキストやリンクなどの描画が優先されるため、レイアウトシフトを引き起こす可能性が高くなってしまいます。width,height属性を記述するなど、レイアウトシフト対策は必ず行うようにしましょう。
<img src="image.jpg" alt="An image" loading="lazy" width="300" height="200">Retinaディスプレイについて
MacPCなど高解像のディスプレイでウェブサイトを閲覧する際、画像の表示がぼやけたように見えてしまうことがあります。これに対して対策を行うことで、ウェブサイトの品質をより高めることができます。
デバイスの解像度に合わせて画像を変更する
高解像度のディスプレイで画像がぼやけて見える現象は、通常の解像度のディスプレイと同じサイズの画像を使用していることが原因で発生します。解決策として、高解像度ディスプレイの環境でウェブ閲覧をしているユーザーには、それに適した2倍のサイズの画像を用意することが一般的です。
img要素にsrcset属性を記述することで、デバイスの解像度に合わせて画像を表示させることができます。
<img src="image.jpg"
srcset="image.jpg 1x,
image-2x.jpg 2x"
alt=""
>このように記述することで、解像度が2倍の環境には「image-2x.jpg」の画像を表示させることができます。
注意点として、2倍のサイズの画像を表示させるということはウェブページの表示速度に影響を与える可能性があります。装飾的な画像に対してどこまで対応するかは意見の分かれるところですが、デザインとして重要な画像や、代替テキストが定義されている画像などは情報としての役割が強いので対策を行った方が良いでしょう。
最後に
imgタグの実践的な使い方として、alt属性のアクセシビリティへの影響、レイアウトシフトや高解像度モニターへの対策、画像の遅延読み込みの方法とメリットについて解説しました。
画像はウェブデザインの重要な要素であり、その適切な管理と使用はユーザーエクスペリエンスとウェブサイトのパフォーマンスに直接影響を与えます。この記事を通じて、imgタグの使い方とアクセシビリティ、実践的なテクニックについて理解し、ウェブ制作のスキルを向上させる手助けができれば幸いです。