HTMLイメージ

ながら、テキストのウェブサイトのコンテンツの大半を占めるが、ある画像は1000の言葉よりも多くの、または、サイトのデザインには、余分なスパイスを加えると言うことができます。ありがたいことに、非常にHTML形式で画像を実装するためには簡単だ。

イメージタグ

場合は、 イメージタグを使用することができるHTML文書に画像をロードするには<img src="..." width="" height="" alt="..." /> 。それは、自己ようにスペースを忘れていないし、最後にスラッシュタグを閉じてください。 のHTML href属性に似ている src属性(ソース)をイメージファイルへの絶対パスまたは相対アドレスを保持するリンク

オプションの高さをピクセル単位で画像のサイズを設定する属性を大きく、または小さい値にイメージソースかと正確に同じ値へのイメージのスケールを設定することができます。これらの属性は、常にそれらを使用するには、それ以外の場合はそこを中心にジャンプするにはコンテンツを引き起こす可能性が、ページの読み込み画像のサイズを計算する必要がありますは、Webブラウザをお試しください必要はありません。

alt属性(代替テキスト)とイメージの内容について説明します場合には、イメージをロードできない場合に表示されます。は、Altキーを注意してくださいすべてのイメージタグが必要となりますためのXHTML 1.0の厳密な有効にする。場合は、単に置くことができる代替テキストを提供する希望しないalt="" 。場合には障害者のイメージについて何か知っているスクリーンリーダーやGoogleなどの検索エンジンを使って人々に役立つ、いつでも画像の説明を提供する必要があろう。

HTMLイメージ

<img src="/files/media/logo_text.png" alt="Web design tutorials" />

出力

また画像へのリンク 、またはその両方を組み合わせて使用することができますテキストリンクの横に。

HTMLの画像リンク

<a href="/"><img src="/files/media/logo_text.png" alt="Web design tutorials" /></a><br />
<a href="/">This link starts here <img src="/files/media/logo_text.png" alt="Web design tutorials" /> and ends here.</a>

出力

画像フォーマット

これはより詳細には、Webグラフィックチュートリアル用に適している、それは常にイメージフォーマットを使用することができるさまざまな種類のを知って良いことだ。ほとんどのブラウザは、以下の3つのイメージタイプのサポート:

のGIF

GIFは最大256(また、カラーパレット)の色のコンピュータを表示することができますすべての百万人のうちと呼ばれる色を含めることができます。彼らは最高の以外に使用して、ボタン図面ロゴなどのリアルなグラフィック。

限られた色を持つこれらのイメージは比較的ファイルのサイズは、常に良いことだ、小さなファイルになります。また、 透明なピクセルを指定する、という意味の色は何の代わりにを使用して背景を表示させる描画される可能性があります。

また、フレームのGIF、複数の格納およびシーケンスとして再生することで、 アニメーションをサポートします。それは広く、もうしかし、今ではFlashはかなり主流には使用しません。

JPEGの

JPEGをサポートして1,670万色 、したがって現実的な撮影に適しています。画質素晴らしい非常に圧縮の設定に応じて貧しい人々に範囲で指定できます。大きなファイルをファイルとして記録サイズと画質の間でバランスをとってみてください徐々にロードするためにウェブサイトの原因となります。

PNG形式

PNGをWebデザイン風景の中にはやや新しい形式であり、GIFを置き換える(存在する場合も、パレットのPNGは常に、そののGIF対応するよりもファイルのサイズは小さくする必要があります)圧縮されたと考えられる。彼らは、JPEGファイルだと違って、PNGをは、元の画像品質の100%を保有可逆圧縮を使用するGIFをJPEGのようなだけでなく、1670万色のようなカラーパレットをサポートします。

おそらく最も興味深い機能は、 アルファ透明度のためにサポートされます。各ピクセル)は独自の透明性を0から100パーセントGIFが(とは異なり、ピクセルのいずれかの透明または不透明)対策など、面白い効果を可能に任意の背景色に対して(滑らかな境界線エイリアシング至ることができます。これはすべてのモダンなブラウザではサポートのブラウザ(Firefox、オペラ、サファリは、IE7)。しかし、いくつかの受け入れ策が存在する残念ながら、IE6のネイティブには、アルファの透明性を認識していません。