So fügen Sie Bilder zu HTML hinzu

Heutzutage, mit der Entwicklung des Internets, ist Webdesign zu einer wichtigen Fähigkeit geworden. Im Webdesign sind Bilder oft sehr wichtige Elemente. Daher ist das Hinzufügen von Bildern in HTML ein Grundwissen, das jeder Webdesigner beherrschen muss. In diesem Artikel werden die grundlegenden Bild-Tags, Bildattribute und gängigen Bildformate in HTML vorgestellt und erläutert, wie Bilder optimiert und zitiert werden.

1. Grundlegende Bild-Tags und -Attribute

In HTML können Bilder über das -Tag eingefügt werden. Das Folgende ist die grundlegendste Syntax des -Tags:

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

Darunter ist das src-Attribut erforderlich, das die URL der Bilddatei angibt, also die Adresse des Bildes auf dem Server. Das Alt-Attribut ist optional und definiert den Alternativtext, der angezeigt wird, wenn das Bild nicht geladen werden kann. Beispiel:

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

Wenn sich die Bilddatei im selben Verzeichnis wie die HTML-Datei befindet, können Sie eine relative URL verwenden:

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

Sie können auch einen relativen Pfad verwenden, um das Unterverzeichnis anzugeben, in dem sich das Bild befindet:

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

Zusätzlich zu den Attributen src und alt gibt es einige häufig verwendete Attribute, mit denen das Erscheinungsbild und Verhalten von Bildern gesteuert werden kann, z. B.:

• width- und height-Attribute: Geben Sie die Breite bzw. Höhe des Bildes an Die Einheit kann Pixel (px) oder Prozentsatz (%) sein.
• Rahmenattribut: Geben Sie die Rahmenbreite des Bildes an. Die Einheit kann Pixel (px) sein.
• align-Attribut: Gibt die horizontale Ausrichtung des Bildes an. Der Wert kann links, rechts oder zentriert sein.
• Titelattribut: Geben Sie den Eingabeaufforderungstext an, der angezeigt wird, wenn der Benutzer mit der Maus über das Bild fährt.

Der folgende Code kann beispielsweise ein Bild zentrieren und gleichzeitig Breite, Höhe und Rand festlegen:

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

2. Gängige Bildformate

Im Webdesign gibt es drei häufig verwendete Bildformate: JPEG, PNG und GIF.

JPEG (auch bekannt als JPG) ist ein verlustbehaftetes Komprimierungsformat, das häufig zum Speichern von Fotos und anderen realen Bildern verwendet wird. Die Komprimierungsqualität von JPEG kann durch Anpassen des Komprimierungsverhältnisses gesteuert werden. Je höher das Komprimierungsverhältnis, desto schlechter die Bildqualität und desto kleiner die Dateigröße.

PNG (Portable Network Graphics) ist ein verlustfreies Komprimierungsformat, das Transparenz und eine höhere Farbtiefe darstellen kann und sich zum Speichern von Grafiken und Symbolen auf Pixelebene eignet. PNGs haben im Allgemeinen größere Dateigrößen als JPEGs, bieten aber eine bessere Qualität.

GIF (Graphics Interchange Format) ist ein Bitmap-basiertes Grafikformat, das Animation und Transparenz unterstützt und mehrere Bilder in einer Datei komprimieren kann. GIF wird normalerweise zum Speichern kleiner dynamischer Bilder wie Emojis und kleiner Animationen verwendet.

Bei der Auswahl eines Bildformats müssen Sie basierend auf der Art und dem Zweck des Bildes entscheiden, welches Format Sie verwenden möchten. Wenn Sie beispielsweise Farbverläufe und reichhaltige Details im Bild speichern müssen, können Sie das JPEG-Format verwenden, und wenn Sie Transparenz und höhere Qualität benötigen, können Sie das PNG-Format verwenden.

3. Bilder optimieren und zitieren

Auch im Webdesign ist das Optimieren und Zitieren von Bildern sehr wichtig. Durch die Optimierung von Bildern kann die Dateigröße reduziert und das Laden von Seiten beschleunigt werden. Hier sind einige gängige Optimierungsmethoden:

• Bilder komprimieren: Reduzieren Sie die Dateigröße, ohne die Bildqualität zu beeinträchtigen.
• Bild zuschneiden: Behalten Sie nur den erforderlichen Teil des Bildes bei und reduzieren Sie die Dateigröße.
• Bilder zwischenspeichern: Verwenden Sie den Browser-Cache, um zu vermeiden, dass dieselben Bilder wiederholt heruntergeladen werden.
• Verwenden Sie CSS-Sprites: Führen Sie mehrere kleine Bilder zu einem großen Bild zusammen, verwenden Sie die Hintergrundpositionierung in CSS, um die erforderlichen Teile anzuzeigen, und reduzieren Sie die Anzahl der HTTP-Anfragen.

Beim Zitieren von Bildern müssen Sie auf folgende Punkte achten:

• Der Pfad der Bilddatei muss korrekt sein: Wenn der Pfad falsch ist, kann das Bild nicht geladen werden.
• Bilder sollten zum Thema der Webseite passen: Unangemessene Bilder können dazu führen, dass die Webseite überladen wirkt.
• Übergroße Bilder nicht: Zu große Bilder verlängern die Ladezeit der Seite.

Es gibt viele Möglichkeiten, Bilder zu referenzieren. Sie können beispielsweise relative URLs und absolute URLs verwenden oder das Basis-Tag verwenden, um die Basis-URL anzugeben. Hier ist ein Beispielcode:

Relative URL verwenden:

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

Absolute URL verwenden:

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

Basis-Tag verwenden:

  


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

Zusammenfassung

Bilder sind im Webdesign sehr wichtige Elemente. Um Bilder korrekt zu referenzieren und zu optimieren, müssen wir die grundlegenden Bild-Tags und -Attribute in HTML verstehen sowie das richtige Bildformat und die richtige Optimierungsmethode auswählen. Nur wenn wir dieses Wissen beherrschen, können wir schöne und effiziente Webseiten entwerfen.

Das obige ist der detaillierte Inhalt vonSo fügen Sie Bilder zu HTML hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!