今日オンラインでウェブページを見ると、彼らは共通のものを共有していることに気付くでしょう。これらの共通特性の1つは画像です。正しいイメージは、ウェブサイトのプレゼンテーションにあまりにも多くのものを加えます。これらの画像の一部は、会社のロゴのように、サイトのブランド化に役立ち、そのデジタルエンティティを物理的な会社に接続するのに役立ちます。
イメージ、アイコン、またはグラフィックをWebページに追加するには、そのページのHTMLコードでタグを使用する必要があります。あなたは IMG タグをHTML内のどこに表示するかを指定します。ページを表示しているWebブラウザは、ページが表示されたら、このタグを適切なグラフィックに置き換えます。会社のロゴの例に戻ると、画像をサイトに追加する方法は次のとおりです。
イメージの属性
上のHTMLコードを見ると、要素に2つの属性が含まれていることがわかります。それぞれは画像に必要です。
最初の属性は "src"です。これは文字どおり、ページに表示したい画像ファイルです。この例では、 "logo.png"というファイルを使用しています。これは、Webブラウザがサイトをレンダリングしたときに表示されるグラフィックです。
また、このファイル名の前に "/ images /"という追加情報が追加されています。これがファイルパスです。最初のスラッシュは、サーバーにディレクトリのルートを調べるように指示します。次に、 "images"というフォルダと "logo.png"というファイルが検索されます。 「画像」というフォルダを使用してサイトのすべてのグラフィックスを保存するのはかなり一般的ですが、ファイルパスはサイトに関連するものに変更されます。
2番目の必須属性は「alt」テキストです。画像が何らかの理由で読み込まれなかった場合に表示される「代替テキスト」です。この例では、画像が読み込まれなかった場合、「Company Logo」というテキストが表示されます。なぜそれが起こるだろうか？さまざまな理由：
- 不正なファイルパス
- 不適切なファイル名またはスペルミス
- 伝送エラー
- ファイルがサーバーから削除されました
これらは、指定された画像が欠落している理由のほんの一部に過ぎません。このような場合、代替テキストが代わりに表示されます。
Altテキストは、視覚障害のあるビジターに画像を「読み込む」ために、スクリーンリーダーソフトウェアによっても使用されます。彼らは私たちのようにイメージを見ることができないので、このテキストはイメージ自体に何があるかを知らせます。これはaltテキストが必要な理由と、イメージが何であるかを明確に述べなければならない理由です。
altテキストの一般的な誤解は、検索エンジンの目的であることです。本当じゃない。 Googleや他の検索エンジンは、このテキストを読んでイメージが何であるかを知っていますが（覚えていてもイメージを見ることはできません）、代替テキストを書いて検索エンジンだけに訴えるべきではありません。著者のための明確なaltテキストは人間のためのものです。検索エンジンに魅力的なタグにいくつかのキーワードを追加することもできますが、それは大丈夫ですが、グラフィックスファイルを見ることができない人のために何がイメージされているのかを常に確認してください。
その他の属性
ザ IMG タグには、Webページにグラフィックを置くときに使用する2つの属性（幅と高さ）があります。たとえば、DreamweaverのようなWYSIWYGエディタを使用すると、自動的にこの情報が追加されます。ここに例があります：
ザ 幅 そして 高さ 属性はブラウザにイメージのサイズを通知します。次に、ブラウザは、レイアウト内のどのくらいのスペースを割り当てようとしているのかを正確に知っており、イメージがダウンロードされている間、ページ上の次の要素に移動できます。この情報をHTMLで使用する際の問題は、イメージが常に正確なサイズで表示されるとは限りません。たとえば、訪問者の画面とデバイスのサイズに基づいてサイジングが変更されるレスポンシブウェブサイトがある場合は、イメージを柔軟にすることもできます。固定サイズがHTMLに記述されている場合は、レスポンシブCSSメディアクエリでオーバーライドするのが非常に難しいでしょう。このため、スタイル（CSS）と構造（HTML）の分離を維持するために、HTMLコードに幅と高さの属性を追加しないことをお勧めします。
1つの注意：これらのサイジング指示をオフのままにしてCSSでサイズを指定しないと、ブラウザはデフォルトのネイティブサイズでイメージを表示します。
ジェレミージラール編集
