Um ein Bild auf eine Webseite hinzuzufügen, verwenden wir das Tag <img>. Das ist ein Leertag, das bedeutet, dass es kein Endtag hat und nur Attribute enthält.
Das Tag <img> unterstützt eine Reihe von erforderlichen und optionalen Attributen, die zusätzliche Information darüber liefern.
Erforderliche Bildattribute
Das Attribut src (source) gibt den Namen oder die Position des anzuzeigenden Bildes an. Der Wert des Attributs src muss den Namen der Bilddatei oder deren URL enthalten.
<img src="example.jpg" />
oder
<img src="https://www.example.com/images/example.jpg" />Das Attribut alt ist für das Image-Tag auch notwendig. Es wird verwendet, um Browsern einen alternativen Text zur Verfügung zu stellen, wenn das Bild nicht angezeigt werden kann (bei langsamer Verbindung, wenn ein Bildschirmleser verwendet wird usw.). Die Browser zeigen oft den alternativen Text des Bildes als Popup an, wenn Sie mit der Maus drauf führen.
Syntax des Image-Tags mit den erforderlichen Attributen src und alt sieht so aus:
<img src="https://www.w3docs.com/learn-html/" alt="HTML tutorial" />Um Suchmaschinen eine schlüsselwortreiche Beschreibung zur Verfügung zu stellen und das Ranking Ihrer Webseiten zu verbessern, verwenden Sie das Attribut alt für alle Ihre Bilder.
Empfohlene Bildattribute
Es wird empfohlen, die Attribute width und height mit dem Tag <img> zu verwenden. Wenn diese Attribute verwendet werden, reserviert der Browser Platz für das Bild beim Laden des Inhalts, was das Rendering der Seite beschleunigt.
<img src="https://www.w3docs.com/learn-html" alt="HTML tutorial" width=”200” height=”120” />Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
</head>
<body>
<h1>Der Platz für die Kopfzeile </h1>
<p>Das ist Aleqs Foto</p>
<img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185"/>
</body>
</html>Ergebnis
Bild Floating
Im vorigen Beispiel steht der Text über dem Bild. Die Position von Bild und Text kann jedoch leicht geändert werden. Mit der CSS Eigenschaft float können Sie festlegen, wie das Bild floaten soll, oder wie der Text umgebrochen werden soll.
Wenn Sie das Bild auf der linken Seite und den Text auf der rechten Seite anzeigen möchten, fügen Sie einfach style="float:left" zum Tag <img> hinzu.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
</head>
<body>
<h1>Ihre Kopfzeile</h1>
<img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185" style="float:left"/>
<p>Aleqs Foto</p>
</body>
</html>Ergebnis
Wenn Sie das Attribut style="float:right" zum Tag <img> hinzufügen, ändert sich die Position des Textes nach links und des Bildes nach rechts.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
</head>
<body>
<h1>Der Platz für die Kopfzeile</h1>
<img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185" style="float:right"/>
<p>Aleqs Foto</p>
</body>
</html>Ergebnis
Wie kann man einen Hyperlink zum Bild hinzufügen
Da das Tag <a> für das Einfügen von Hyperlinks verwendet wird, müssen Sie das Bild nur ins Tag <a> einfügen, um Ihr Bild anklickbar zu machen.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
</head>
<body>
<a href="https://de.w3docs.com" aria-label="w3docs homepage">
<img src="/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" width="190" height="45" alt="logo"/>
</a>
</body>
</html>Ergebnis
Um das Ergebnis zu sehen, klicken Sie auf das Bild unten (es leitet Sie auf unsere Homepage weiter).
Welches Bildformat muss man für das Web wählen?
Es gibt drei Haupttypen von Bildformaten, die von Browsern unterstützt werden:
- GIF (Graphics Interchange Format)
- JPG / JPEG (Joint Photographic Experts Group)
- PNG (Portable Network Graphics)
GIF hat nur 256 einzigartige Farben, und sie machen einfache, schnelle Ladegrafiken. Sie können GIF für kleine Zeichnungen, Diagramme, Charts, Buttons und andere einfache Grafiken verwenden, die das schnelle Laden Ihrer Seite nicht verhindern.
JPEG hat ein 16-Bit-Format, es kann rotes, blaues und grünes Licht mischen, um Millionen von Farben anzuzeigen, daher wird es hauptsächlich für Fotos verwendet. Mit diesem Format können Sie flexibel wählen, wie stark Ihr Bild komprimiert werden soll: von 0% (starke Kompression) bis 100% (keine Kompression). Sie können dieses Format wählen, wenn es Ihnen nichts ausmacht, für eine Verkleinerung auf Qualität zu verzichten. Vermeiden Sie die Verwendung von JPEG für Bilder mit Text, Formen oder großen Farbblöcken, da bei der Kompression der Datei die Linien verschwimmen und die Farben sich verschieben.
PNG vereint alle Vorteile der beiden Formate JPEG und GIF, es hat Millionen von Farben und erlaubt, die Datei ohne Qualitätsverlust zu kompressieren. Sie können PNG für Webgrafiken, die Transparenz für komplexe, farbintensive Grafiken oder Fotos erfordern, verwenden.
Moderne Bildformate
Heute gibt es moderne Bildformate, die für das Web verwendet werden, um kleinere, reichhaltigere und schnellere Bilder zu laden.
WebP designed by Google bietet verlustfreie und verlustbehaftete Kompression für Bilder im Web. Sein Hauptziel ist, das primäre Format für Fotos im Internet zu werden und JPEG zu ersetzen.
Ein weiteres Format, das das JPEG-Format ersetzen soll, ist BPG (Better Portable Graphics), das ebenfalls eine hohe Kompressionsrate aufweist (Dateien sind kleiner als JPEG bei gleicher Qualität)
HEIC ist ein neues Bildformat, das Apple anstelle von JPEG in iOS 11 verwendet. Dieses Format verwendet moderne Kompressionsmethoden, die eine höhere Bildqualität in kleineren Dateien ermöglichen.
Übe dein Wissen
