画像とオブジェクトにHTML IMGタグを使用する
HTML IMGタグは、Webページ内の画像や他の静的なグラフィックオブジェクトの挿入を管理します。 この共通タグは、魅力的でイメージに焦点を当てたウェブサイトをデザインする能力に豊かさを加える必須属性とオプション属性をサポートしています。
完全に形成されたHTML IMGタグの例は、次のようになります。
必須のIMGタグ属性
SRC。 Webページに表示するイメージを取得するために必要な唯一の属性は、SRC属性です。 この属性は、表示されるイメージファイルの名前と場所を識別します。
ALT。 有効なXHTMLとHTML4を書き込むには、ALT属性も必要です。 この属性は、非ビジュアルブラウザにイメージを説明するテキストを提供するために使用されます。 ブラウザは代替テキストをさまざまな方法で表示します。 画像上にマウスを置くとポップアップとして表示されるものもあれば、画像を右クリックするとプロパティに表示されるものもあれば、まったく表示しないものもあります。
代替テキストを使用して、Webページのテキストに関連していないか、重要でないイメージに関する詳細を追加します。 しかし、スクリーンリーダーやその他のテキストのみのブラウザでは、テキストはページの残りのテキストとインラインで読み込まれることに注意してください。 混乱を避けるため、単に「ロゴ」ではなく「WebデザインとHTMLについて」などの説明文を使用してください。
HTML5では、キャプションを使用して説明を追加できるため、ALT属性は必ずしも必要ではありません。 属性ARIA-DESCRIBEDBYを使用して、完全な説明を含むIDを指定することもできます。
画像が純粋に装飾的なものであれば、ウェブページやアイコンの上部にあるグラフィックなどの代替テキストも必要ありません。 しかし、もしあなたが確信が持てないなら、場合によっては代替テキストも含めてください。
推奨されるIMG属性
幅と高さ。 WIDTHとHEIGHT属性を常に使用するという習慣に入るべきです。 また、実際のサイズを使用し、ブラウザでイメージのサイズを変更しないでください。
これらの属性はページのレンダリングを高速化します。これは、ブラウザが画像のデザインにスペースを割り当ててから、イメージ全体のダウンロードを待つのではなく、残りのコンテンツのダウンロードを続けることができるからです。
その他の有用なIMG属性
タイトル 。 この属性は、 HTML要素に適用できるグローバル属性です。 さらに、TITLE属性を使用すると、画像に関する余分な情報を追加することができます。
ほとんどのブラウザはTITLE属性をサポートしていますが、さまざまな方法で行います。 一部のユーザーはテキストをポップアップとして表示し、他のユーザーは画像を右クリックして情報スクリーンに表示します。 TITLE属性を使用してイメージに関する追加情報を書き込むことはできますが、この情報が隠されているか表示されているとは限りません。 検索エンジンのキーワードを非表示にするには、これを絶対に使用しないでください。 この慣習は、現在、ほとんどの検索エンジンで罰せられています。
USEMAPとISMAP 。 これらの2つの属性は、クライアント側（）およびサーバー側（ISMAP） イメージマップをイメージに設定します。
LONGDESC 。 この属性は、イメージのより長い説明へのURLをサポートします。 この機能により、画像にアクセスしやすくなります。
廃止され廃止されたIMG属性
HTML5ではいくつかの属性が廃止され、HTML4では非推奨となっています。 最良のHTMLを得るには、これらの属性を使用する代わりに、他の解決策を見つけるべきです。
BORDER 。 この属性は、画像の周囲の任意の境界のピクセル単位の幅を定義します。 HTML4ではCSSが好まれなくなり、HTML5では廃止されました。
ALIGN 。 この属性を使用すると、イメージをテキストの内側に配置し、テキストをその周囲にフローさせることができます。 画像を右または左に揃えることができます。 HTML4ではfloat CSSプロパティが使用されなくなり、HTML5では廃止されました。
HSPACEおよびVSPACE 。 HSPACE VSPACE属性は水平方向に空白（HSPACE）を、垂直方向に（VSPACE）を追加します。 空白はグラフィックスの両側（上下左右）に追加されるため、片面だけにスペースが必要な場合はCSSを使用する必要があります。 これらの属性は、HTML4ではマージンCSSプロパティの代わりに非難されており、HTML5では廃止されています。
LOWSRC 。 LOWSRC属性は、イメージソースが非常に大きく、ダウンロードが非常に遅い場合に代替イメージを提供します。 たとえば、Webページに表示する画像のサイズが500KBですが、500KBのダウンロードには時間がかかります。 つまり、白黒または極端に最適化されたイメージのコピーを作成し、それをLOWSRC属性に入れます。 小さい画像が最初にダウンロードされて表示され、大きな画像が表示されたときには、低いソースの画像が置き換えられます。
LOWSRC属性がNetscape Navigator 2.0にIMGタグに追加されました。 DOMレベル1に含まれていましたが、DOMレベル2から削除されました。多くのサイトで最新のブラウザーでサポートされていると主張していますが、ブラウザーのサポートはこの属性には不十分です。 HTML4では廃止予定ではなく、どちらの仕様の正式な部分でもないため、HTML5では廃止されました。
この属性の使用を避け、画像を最適化して素早く読み込むようにします。 ページの読み込み速度は良いWebデザインの重要な要素であり、LOWSRC属性を使用していても大きな画像ではページが大幅に遅くなります。