Das img-Element: src, alt, width und height
Binden Sie Bilder mit allen erforderlichen Attributen korrekt ein.
Das img-Element: src, alt, width und height ist eine kostenlose HTML Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des HTML Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.
Das img-Element
Das <img>-Element bindet ein Bild in die Seite ein:
<img src="photo.jpg" alt="A golden retriever playing fetch">
<!-- img is a void element — no closing tag needed -->
<!-- src: path to the image file -->
<!-- alt: text description for screen readers and broken images -->Das src-Attribut
Das src-Attribut gibt die Bildquelle an:
<!-- Relative path -->
<img src="images/logo.png" alt="Company logo">
<!-- Root-relative path -->
<img src="/assets/banner.jpg" alt="Sale banner">
<!-- Absolute URL (external) -->
<img src="https://cdn.example.com/photo.jpg" alt="Mountain view">
<!-- Data URI (inline) -->
<img src="data:image/png;base64,iVBOR..." alt="Icon">Das alt-Attribut
Das alt-Attribut stellt alternativen Text für Bilder bereit:
- Wird angezeigt, wenn das Bild nicht geladen werden kann
- Wird von Screenreadern vorgelesen
- Wird von Suchmaschinen indexiert
- Ist für Barrierefreiheit erforderlich (WCAG)
Guten alt-Text schreiben
So schreiben Sie effektiven alt-Text:
<!-- Informative image: describe the content -->
<img src="chart.png" alt="Bar chart showing 30% revenue growth Q1-Q4 2024">
<!-- Decorative image: empty alt -->
<img src="divider.png" alt="">
<!-- Empty alt tells screen readers to skip this image -->
<!-- Functional image (button/link): describe the action -->
<a href="/">
<img src="logo.png" alt="Go to homepage">
</a>Attribute für Breite und Höhe
Geben Sie bei Bildern immer width und height an:
<img src="photo.jpg" alt="Landscape" width="800" height="600">
<!-- Values are in pixels (no units needed) -->
<!-- Why? The browser can reserve space before the image loads
This prevents layout shift (CLS) — a Core Web Vital metric -->Seitenverhältnis und CSS
Wenn Sie width und height in HTML festlegen, kann CSS das Seitenverhältnis berechnen:
<!-- HTML sets intrinsic dimensions -->
<img src="photo.jpg" alt="Photo" width="1600" height="900">
<!-- CSS can make it responsive while preserving ratio -->
<!--
img {
width: 100%;
height: auto; /* auto preserves the aspect ratio -->
}
-->Bildformate im Web
Gängige Bildformate und ihre Einsatzgebiete:
- JPEG/JPG – Fotos und komplexe Bilder mit vielen Farben
- PNG – Bilder, die Transparenz benötigen
- WebP – modernes Format: kleiner als JPEG/PNG und mit Unterstützung für Transparenz
- AVIF – nächste Generation: noch bessere Komprimierung als WebP
- SVG – Symbole und Illustrationen (Vektorgrafik, beliebig skalierbar)
- GIF – einfache Animationen (größtenteils durch Video ersetzt)
Das loading-Attribut
Steuern Sie mit dem loading-Attribut, wann Bilder geladen werden:
<!-- Lazy load: only load when near viewport -->
<img src="photo.jpg" alt="" loading="lazy" width="800" height="600">
<!-- Eager load (default): load immediately -->
<img src="hero.jpg" alt="" loading="eager" width="1920" height="1080">
<!-- Always eager-load above-the-fold images -->
<!-- Lazy-load everything below the fold -->Das decoding-Attribut
Das decoding-Attribut steuert das Decodierungsverhalten von Bildern:
<img src="large.jpg" alt="" decoding="async" width="800" height="600">
<!-- async: decode in parallel with rendering (good for most images) -->
<!-- sync: decode before rendering (for critical above-fold images) -->
<!-- auto: browser decides (default) -->Das fetchpriority-Attribut
Das fetchpriority-Attribut gibt einen Hinweis auf die Ladepriorität eines Bildes:
<!-- Hero image: fetch with high priority -->
<img src="hero.jpg" alt="Hero" fetchpriority="high" width="1920" height="600">
<!-- Below-fold images: low priority -->
<img src="gallery-item.jpg" alt="" fetchpriority="low"
loading="lazy" width="400" height="300">Vollständiges img-Beispiel
Ein vollständig barrierefreies und für die Performance optimiertes Bild:
<img
src="/images/team-photo.jpg"
alt="The Coddy team gathered at a conference table in 2024"
width="1200"
height="800"
loading="lazy"
decoding="async"
>Kurze Überprüfung
Warum sollten Sie bei img-Elementen immer die Attribute width und height angeben?
Zusammenfassung: img-Element
Das Wichtigste zum Einbinden von Bildern:
src– Bild-URL (relativ oder absolut)alt– erforderliche Beschreibung; für dekorative Bilder leerwidthundheight– immer festlegen, um Layoutverschiebungen zu verhindernloading="lazy"für Bilder unterhalb des zunächst sichtbaren Seitenbereichs- Wählen Sie das passende Format: WebP/AVIF für Fotos, SVG für Symbole
Häufig gestellte Fragen
Ist die Lektion „Das img-Element: src, alt, width und height“ kostenlos?
Ja — der vollständige Text von „Das img-Element: src, alt, width und height“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des HTML Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Das img-Element: src, alt, width und height“?
Binden Sie Bilder mit allen erforderlichen Attributen korrekt ein. Du übst HTML Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um HTML Academy zu starten?
Keine Vorkenntnisse erforderlich. HTML Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.
Wie lange dauert die Lektion „Das img-Element: src, alt, width und height“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser HTML Academy-Lektion Code schreiben und ausführen?
Ja. Jede HTML Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Das img-Element: src, alt, width und height
- Responsive Bilder mit srcset und sizes
- Das picture-Element für Art Direction
- figure und figcaption