HTMLに画像を追加する方法

現在、インターネットの発展に伴い、Web デザインは重要なスキルとなっています。 Web デザインでは、多くの場合、写真は非常に重要な要素です。したがって、HTML に画像を追加する方法は、すべての Web デザイナーが習得する必要がある基本的な知識です。この記事では、HTML の基本的な画像タグ、画像属性、一般的な画像形式、および画像の最適化と引用の方法を紹介します。

1. 基本的な画像タグと属性

HTML では、 タグを通じて画像を挿入できます。以下は、 タグの最も基本的な構文です:

<img src="图片的url" alt="图片的描述">

このうち、src 属性は必須であり、画像ファイルの URL、つまり、画像上のアドレスを指定します。サーバ。 alt 属性はオプションで、画像を読み込めない場合に表示される代替テキストを定義します。例:

<img src="https://example.com/image.jpg" alt="这是一张图片">

画像ファイルと HTML ファイルが同じディレクトリにある場合は、相対 URL を使用できます:

<img src="image.jpg" alt="这是一张图片">

相対パスを使用してサブディレクトリを指定することもできます。画像の場所:

<img src="images/image.jpg" alt="这是一张图片">

src 属性と alt 属性に加えて、画像の外観と動作を制御するために使用できる一般的に使用される属性もいくつかあります。

#幅属性と高さ属性: 画像の幅と高さをそれぞれ指定します。単位はピクセル (px) またはパーセンテージ (%) です。

• border 属性: 画像の境界線の幅を指定します。単位はピクセル (px) です。
• align 属性: 画像の水平方向の配置を指定します。値は左、右、中央のいずれかです。
• title 属性: ユーザーが画像上にマウスを置いたときに表示されるプロンプト テキストを指定します。
• たとえば、次のコードは画像を中央に配置し、同時に幅、高さ、境界線を指定できます。

<img src="image.jpg" alt="这是一张图片" width="200" height="150" border="1" align="center">

2. 一般的な画像形式

Web デザインでは、JPEG、PNG、GIF という 3 つの一般的な画像形式が使用されます。

JPEG (JPG とも呼ばれる) は、写真やその他の現実の画像を保存するために一般的に使用される非可逆圧縮形式です。 JPEGの圧縮品質は圧縮率を調整することで制御でき、圧縮率が高いほど画質は劣化し、ファイルサイズは小さくなります。

PNG (Portable Network Graphics) は、透明性とより高い色深度を表示できる可逆圧縮形式で、ピクセル レベルのグラフィックスやアイコンの保存に適しています。通常、PNG は JPEG よりもファイル サイズが大きくなりますが、品質は高くなります。

GIF (Graphics Interchange Format) は、アニメーションと透明度をサポートするビットマップベースのグラフィック形式であり、複数の画像を 1 つのファイルに圧縮できます。 GIF は通常、絵文字や小さなアニメーションなどの小さな動的な画像を保存するために使用されます。

画像形式を選択するときは、画像の種類と目的に基づいて使用する形式を決定する必要があります。たとえば、画像のカラー グラデーションや詳細を保存する必要がある場合は JPEG 形式を使用でき、透明性と高品質を保存する必要がある場合は PNG 形式を使用できます。

3. 画像の最適化と引用

Web デザインでは、画像の最適化と引用も非常に重要です。画像を最適化すると、ファイル サイズが削減され、ページの読み込みが速くなります。一般的な最適化方法は次のとおりです。

画像の圧縮: 画質に影響を与えずにファイル サイズを削減します。

• 画像をトリミング: 画像の必要な部分のみを保持し、ファイル サイズを削減します。
• 画像のキャッシュ: ブラウザーのキャッシュを使用して、同じ画像を繰り返しダウンロードすることを避けます。
• CSS スプライトを使用する: 複数の小さな画像を 1 つの大きな画像に結合し、CSS の背景の位置を使用して必要な部分を表示し、HTTP リクエストの数を減らします。
• 画像を引用するときは、次の点に注意する必要があります。

画像ファイルのパスは正しい必要があります。パスが間違っていると、画像を引用することができません。ロードされています。

• 写真は Web ページのテーマと一致している必要があります。不適切な写真を使用すると、Web ページが乱雑に見える可能性があります。
• 画像のサイズを大きくしすぎないでください。画像が大きすぎると、ページの読み込み時間が長くなります。
• 画像を参照するには、相対 URL と絶対 URL を使用したり、ベース タグを使用してベース URL を指定したりするなど、さまざまな方法があります。以下にサンプル コードを示します。

相対 URL を使用する:

<img src="../images/image.jpg" alt="这是一张图片">

絶対 URL を使用する:

<img src="https://example.com/image.jpg" alt="这是一张图片">

基本タグを使用する:

  


  <img src="images/image.jpg" alt="这是一张图片">

summary

Web デザインにおいて、写真は非常に重要な要素です。画像を正しく参照して最適化するには、HTML の基本的な画像タグと属性を理解し、正しい画像形式と最適化方法を選択する必要があります。この知識を習得することによってのみ、美しく効率的な Web ページをデザインすることができます。

以上がHTMLに画像を追加する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。