インラインイメージとは

インライン画像は、視覚的な魅力を追加したり、情報を提供したり、ハイパーリンクを表すためにWebページに挿入されるグラフィック画像です。 インライン画像は通常、GIF、JPEG、またはPNG形式です。 それらは、データURIスキームを使用してWebページに組み込まれます。

データURIを使用すると、ブラウザですぐに取得できる小さなサイズのデータ​​を埋め込むことができます。 インライン画像は、HTMLとともにブラウザによって取得され、Webドキュメントの一部として表示されます。 ブラウザが時間と手間をかけずに画像を取得して表示できるようにするには、小さいサイズのインライン画像を使用することをお勧めします。

画像が大きいと読み込み時間が遅くなり、サイトが画面に表示されるまでに時間がかかります。 ほとんどのWeb訪問者は、それが起こるのを見るためにうろうろする忍耐を持っていません。 これは、サイトのトラフィックに悪影響を及ぼします。

HTMLインライン画像は、表示されるWebサイトのサーバーから取得されるか、他の外部サーバーから取り込まれます。 外部ソースからのインライン画像の使用は、許可なく実行できるため、競合の問題です。 imgタグは、Webページの段落と見出しにインライン画像を挿入するために使用されます。 imgタグは、フリーフローティングフォームでは使用できません。 別の要素で囲む必要があります。

imgタグの必須属性はsrc属性です。 src属性は、ブラウザが画像ファイルを取得できるWebアドレスまたはURLを指定します。 src属性とは別に、HTMLインライン画像は3つのオプション属性で定義できます。 これらはalt、align、ismapです。

alt属性は、インラインイメージテキストの代替を提供します。 そのため、ビューアのブラウザがグラフィックをサポートしていない場合、ビューアは画像の代わりにテキストを表示します。 alt属性の使用を強くお勧めします。

alt属性値は空の文字列にすることができます。 たとえば、装飾的な画像がある場合、代替テキストを提供する必要はありません。 したがって、alt属性値は空白のままにできます。

インライン画像スタイルは、align属性を使用して設定できます。 align属性は、Webページ上のテキストに対してインライン画像が表示される場所をブラウザに指示します。 インライン画像は、Webページ上の隣接するテキストの上部、中央、または下部に配置できます。

ismap属性を使用すると、インラインイメージをアクティブなイメージマップとしてマークできます。 これは、誰かが異なる部分をクリックするたびに、画像の異なる部分を作成して異なるアクションを生成できることを意味します。 たとえば、地球と土星を示すインライン画像がある場合、地球をクリックすると地球に関する情報が表示され、土星をクリックすると土星に関する情報が表示される場合があります。

altおよびalign属性とは異なり、ismap属性は、imgタグに含めるだけでは機能しません。 サーバーでいくつかの構成を行う必要があります。 ある程度のプログラミング知識も必要になる場合があります。