So fügst du in HTML ein Bild ein
Nimm das <img>-Element. src ist die Bilddatei, alt beschreibt sie, und width und height geben ihre Größe in Pixeln an. <img> ist ein Void-Element: Es hat kein schließendes Tag.
Das src ist hier ein kleines SVG, das direkt in die URL geschrieben ist (eine Data-URI), damit das Beispiel offline funktioniert. Auf einer echten Website ist src ein Pfad zu einer Datei:
src | Lädt |
|---|---|
photo.jpg | photo.jpg im selben Ordner wie die HTML-Datei |
images/photo.jpg | Aus dem Ordner images neben der HTML-Datei |
../photo.jpg | Aus dem Ordner eine Ebene höher |
/images/photo.jpg | Aus dem Ordner images im Wurzelverzeichnis der Website |
https://example.com/photo.jpg | Von einer anderen Website (kann umziehen oder verschwinden) |
Auf den meisten Webservern unterscheiden Pfade Groß- und Kleinschreibung: Photo.JPG und photo.jpg sind verschiedene Dateien.
alt-Text
Der alt-Text vertritt das Bild. Screenreader lesen ihn vor, und der Browser zeigt ihn an, wenn das Bild nicht laden kann. Beide Bilder hier zeigen auf Dateien, die es nicht gibt:
Das erste zeigt seinen alt-Text, „Coddy logo“, dort, wo das Bild sein sollte. Das zweite hat ein leeres alt, es gibt also keinen Text anzuzeigen, und Screenreader überspringen es. So schreibst du alt:
- Beschreib, was im Zusammenhang zählt. „Balkendiagramm: Umsatz hat sich von März bis Juni verdoppelt“ sagt mehr als „Diagramm“.
- Fang nicht mit „Bild von“ an. Screenreader sagen es bereits als Bild an.
- Nimm
alt=""für Dekoration (eine Trennlinie, eine Verzierung im Hintergrund), damit Screenreader es überspringen. - Lass
altnie weg. Ohne lesen manche Screenreader stattdessen den Dateinamen vor, etwa „IMG Unterstrich 4032 Punkt jpg“. - Bei einem Bild in einem Link beschreibst du das Ziel:
<a href="/"><img src="logo.svg" alt="Home"></a>.
Die Bildgröße festlegen
Die Attribute width und height sind in Pixeln angegeben, ohne Einheit. CSS-Größen überschreiben sie. Das nützlichste CSS für Bilder ist dieses Paar, mit dem ein Bild mit seinem Container schrumpft, aber nie über seine natürliche Breite hinaus gestreckt wird:
Das erste Bild behält seine 300 Pixel und ragt aus dem 180 Pixel breiten Kasten heraus. Das zweite skaliert auf 180 mal 120 herunter und behält seine Form von 3:2. height: auto ist wichtig: Ohne würde das Attribut height="200" das Bild bei 200 Pixeln Höhe halten und es stauchen.
Schreib width und height immer ins HTML, auch bei responsiven Bildern. Der Browser reserviert damit den richtigen Platz, bevor die Datei ankommt, und der Text darunter springt nicht nach unten, wenn das Bild lädt.
Zuschneiden mit object-fit
Wenn ein Bild einen Kasten mit anderer Form füllen muss (ein quadratischer Avatar aus einem breiten Foto, Karten mit gleicher Höhe), entscheidet object-fit, was mit dem Überschuss passiert:
Die Quelle ist ein Bild im Format 2:1 mit einem Kreis, angezeigt in quadratischen Kästen:
fill(der Standard) streckt das Bild auf den Kasten, der Kreis wird also zum Oval.containpasst das ganze Bild hinein und lässt leere Streifen.coverfüllt den Kasten und schneidet den Überschuss ab, der Kreis bleibt rund. Das ist die übliche Wahl für Vorschaubilder und Avatare.
object-position wählt aus, welcher Teil beim Zuschneiden sichtbar bleibt, zum Beispiel object-position: top bei Porträts.
Bildunterschriften mit figure und figcaption
Eine Bildunterschrift, die zu einem Bild gehört, kommt in <figcaption>, und beides kommt in <figure>. Das verbindet sie für Screenreader, und die figure lässt sich als Einheit stylen:
Die Bildunterschrift ersetzt alt nicht. alt sagt, was das Bild zeigt; die Bildunterschrift ergänzt, was auch ein sehender Leser braucht.
Die Lücke unter einem Bild
Ein Bild sitzt wie ein Buchstabe auf der Grundlinie des Textes, deshalb lässt sein Container darunter Platz für die Unterlängen von Buchstaben wie g und y. Ein Rahmen macht die Lücke sichtbar:
Im ersten Rahmen ist unter dem blauen Bild ein weißer Streifen. display: block am Bild (zweiter Kasten) entfernt ihn; vertical-align: middle tut das auch, wenn das Bild inline bleiben muss.
Lazy Loading und responsive Quellen
Bei Bildern weiter unten auf einer langen Seite verzögert loading="lazy" den Download, bis der Leser in ihre Nähe scrollt:
<img src="gallery-7.jpg" alt="Harbor at dusk" width="800" height="533" loading="lazy">
Lade das Hauptbild oben auf der Seite nicht lazy; das verzögert genau den Teil der Seite, den Leser zuerst sehen.
Um kleinen Bildschirmen kleinere Dateien zu schicken, listest du in srcset mehrere Größen auf und sagst dem Browser mit sizes, wie breit das Bild angezeigt wird. Der Browser wählt die Datei aus:
<img
src="photo-800.jpg"
srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1600.jpg 1600w"
sizes="(max-width: 600px) 100vw, 600px"
alt="Harbor at dusk" width="800" height="533">
<picture> geht noch weiter und bietet verschiedene Formate an, mit dem <img> als Fallback, das auch das alt trägt:
<picture>
<source srcset="photo.avif" type="image/avif">
<source srcset="photo.webp" type="image/webp">
<img src="photo.jpg" alt="Harbor at dusk" width="800" height="533">
</picture>
Bildformate
| Format | Gut für |
|---|---|
| JPEG | Fotos |
| PNG | Screenshots, Bilder mit scharfen Kanten oder Transparenz |
| WebP | Fotos und Grafiken, kleiner als JPEG und PNG, mit Transparenz |
| AVIF | Fotos, meist kleiner als WebP |
| SVG | Logos, Icons und Diagramme; skaliert auf jede Größe, ohne unscharf zu werden |
| GIF | Kurze Animationen, wobei ein stummgeschaltetes <video> in Schleife viel kleiner ist |
Häufige Fehler
- Ein Pfad von deinem eigenen Computer, etwa
src="C:\Users\me\photo.jpg". Er funktioniert nur auf deinem Rechner. Leg die Datei neben dein HTML und nimm einen relativen Pfad. - Fehlendes
alt. Jedes<img>braucht eines, bei Dekoration leer. widthundheightbeide im CSS setzen, mit Werten in einer anderen Form. Das Bild wird verzerrt. Setz eine Abmessung und lass die andere aufauto, oder nimmobject-fit.- Keine Attribute
widthundheight, sodass die Seite springt, während Bilder laden. - Riesige Dateien, die per CSS verkleinert werden. Ein Foto mit 4000 Pixeln, das mit 400 Pixeln angezeigt wird, wird trotzdem vollständig heruntergeladen. Verkleinere es oder nimm
srcset. - Ein schließendes
</img>-Tag.<img>ist ein Void-Element; es gibt nichts zu schließen.
Die Bilder in den Beispielen oben sind kleine Inline-SVGs. Um denselben Code mit deinen eigenen Fotos auszuprobieren, füg ihn in den HTML Playground ein.
Häufig gestellte Fragen
Wie füge ich in HTML ein Bild ein?
Mit dem <img>-Tag, der Datei in src und einer Beschreibung in alt: <img src="photo.jpg" alt="A red bicycle" width="600" height="400">. <img> hat kein schließendes Tag.
Wie ändere ich die Größe eines Bildes in HTML?
Setz die Attribute width und height in Pixeln oder nimm CSS wie img { width: 300px; height: auto; }. Wenn du nur eine Abmessung setzt und die andere auf auto lässt, bleiben die Proportionen erhalten.
Warum wird mein Bild in HTML nicht angezeigt?
Meistens stimmt der Pfad in src nicht: Er ist relativ zur HTML-Datei, Dateinamen unterscheiden auf den meisten Servern Groß- und Kleinschreibung, und ein Pfad wie C:\photos\cat.jpg existiert nur auf deinem Computer. Öffne die Bild-URL direkt im Browser, um sie zu prüfen.
Was ist alt-Text in HTML?
Das Attribut alt ist ein Textersatz für das Bild. Screenreader lesen ihn vor, und Browser zeigen ihn an, wenn das Bild nicht lädt. Beschreib, was das Bild zeigt oder bewirkt; für rein dekorative Bilder nimm alt="".
Wie mache ich ein Bild responsiv?
Gib ihm im CSS max-width: 100%; height: auto;. Das Bild schrumpft dann, um in einen schmalen Container zu passen, und wird nie größer als seine natürliche Breite.
Warum ist unter meinem Bild eine Lücke?
Bilder sind standardmäßig inline und sitzen auf der Grundlinie des Textes, was darunter Platz für die Unterlängen von Buchstaben lässt. Setz display: block oder vertical-align: middle am Bild, um die Lücke zu entfernen.
