HTML Image/Bild Generator
Bildelement mit Pflichtattributen src und alt sowie Maßen für CLS-freundliches Laden.
Anwendung & Beispiele
Setze immer alt – auch leer (alt="") für rein dekorative Bilder. width/height reservieren Platz und vermeiden Layout-Sprünge (CLS).
FAQ
Wann sollte ich srcset und sizes verwenden?
Bei Responsive Images, wenn du verschiedene Auflösungen für verschiedene Bildschirme bereitstellen willst — der Browser wählt automatisch die passendste. Beispiel: srcset="bild-400.jpg 400w, bild-800.jpg 800w" sizes="(max-width: 600px) 100vw, 50vw".
Was bewirkt decoding="async"?
Erlaubt dem Browser, das Bild parallel zur Seitenanzeige zu dekodieren — verhindert kurzes "Einfrieren" beim Rendern großer Bilder.
Welche Bildformate sollte ich nutzen?
Für Fotos WebP oder AVIF (deutlich kleiner als JPEG). Mit <picture> und Fallback <source type="image/webp"> + <img src="…jpg"> deckst du alle Browser ab. Für Icons: SVG.
Was ist loading="lazy"?
Verzögert das Laden, bis das Bild kurz vor dem Viewport ist. Spart Bandbreite und beschleunigt First-Contentful-Paint. Für „above-the-fold"-Bilder besser eager oder weglassen.
Wofür sind ID, Class und Title?
id identifiziert ein Element eindeutig (für CSS, JS, Anker-Links). class erlaubt CSS-Styling, mehrere Klassen werden mit Leerzeichen getrennt. title erzeugt einen Tooltip beim Hover.
Funktioniert der Code in allen Browsern?
Alle hier erzeugten Elemente sind valides HTML5 und werden in allen modernen Browsern (Chrome, Firefox, Safari, Edge, Opera) unterstützt. Bei sehr alten Browsern (z.B. IE 11) kann es bei einzelnen Input-Typen wie color oder date Einschränkungen geben.