Webサイトでは、テキスト以外にも、画像や動画などを掲載することができます。
特に画像はコンテンツの内容をひと目で説明することができ、テキストよりも情報量が多いので非常に良く使われています。
今回はimg要素について正しい使い方をご紹介いたします。もくじ
◆img要素とは
Webサイトに画像を掲載するには「img要素」というタグを使います。
<img src=”画像URL” alt="代替テキスト">
src属性で画像URLを指定します。
alt属性で代替テキストを指定します。
src属性とalt属性は必須項目ですので必ず記載しましょう。
◆img要素の属性
img要素のalt属性は、画像が表示されなかった場合にテキストで代替的に画像の内容を表示します。
近年では音声読み上げブラウザなどを利用するユーザーなども多いので適切な言葉を設定するようにしましょう。
キーワードをたくさん詰め込むとスパムと判断されてしまう可能性もありますので注意が必要です。
また、img要素では、width属性、height属性を指定することができます。
width属性、height属性を指定すると、画像を指定した大きさで表示することができます。
width属性、height属性を指定しない場合には、ブラウザが判断した大きさの画像サイズで表示されます。
◆画像フォーマット
img要素で表示出来る画像のフォーマットは数種類ありますが、ブラウザで表示ができる画像フォーマットは3種類になります。
・GIF
256色まで表現することができ、アニメーションGIFのような画像に適しています。
ファイルの拡張子は「gif」になります。
・JPEG
フルカラーに対応していて、圧縮率も高くファイルサイズが小さいという利点があります。
透過機能やアニメーション機能はなく、写真などを表示するのに最も適しています。
ファイルの拡張子は「jpg」または「jpeg」になります。
・PNG
フルカラー対応しており、透過機能があるのが特徴です。
JPEGに比べるとファイルサイズが大きくなることが多いです。
ファイルの拡張子は「png」になります。
◆まとめ
Webサイト制作において、ページに画像を掲載することは必須ともいえます。
一方で検索エンジンは、その画像が何を意味しているのか理解するのが苦手です。
img要素の正しい使い方を理解して検索エンジンにいち早く画像の意味を理解させるようにしましょう。 フォーザウィンはIT業界で働く仲間を募集しています！ 経験、未経験は問いません。是非当社の採用情報をご覧ください。 採用情報を見る ＞