Inhalt / Bilder
Bilder in FWT
Bilder sind mehr als nur max-width: 100%. Gute Bildklassen helfen,
Inhalte hochwertiger, verständlicher und sauberer darzustellen.
FWT bietet deshalb responsive Bilder, feste Bildformate, Bildrahmen, Bildkarten, Overlays, Avatare und einfache Galerien.
Wichtig: Inhaltliche Bilder brauchen einen sinnvollen
alt-Text.
Dekorative Bilder bekommen alt="".
Responsive
Responsive Bilder
Die Grundklasse sorgt dafür, dass Bilder nicht aus ihrem Container laufen.
Live-Beispiel
HTML-Code anzeigen
<img class="fwt-img-fluid" src="data:image/svg+xml;utf8,%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221200%22%20height%3D%22760%22%20viewBox%3D%220%200%201200%20760%22%3E%0A%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%221%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%2306b6d4%22%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20offset%3D%2245%25%22%20stop-color%3D%22%233b82f6%22%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%2310b981%22%2F%3E%0A%20%20%20%20%20%20%20%20%3C%2FlinearGradient%3E%0A%20%20%20%20%3C%2Fdefs%3E%0A%20%20%20%20%3Crect%20width%3D%221200%22%20height%3D%22760%22%20fill%3D%22url%28%23g%29%22%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D%22930%22%20cy%3D%22170%22%20r%3D%2295%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.28%29%22%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D%22170%22%20cy%3D%22580%22%20r%3D%22150%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.16%29%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M130%20560%20L385%20305%20L560%20470%20L690%20350%20L1050%20640%20L130%20640%20Z%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.30%29%22%2F%3E%0A%20%20%20%20%3Ctext%20x%3D%2280%22%20y%3D%22120%22%20font-family%3D%22Arial%2C%20sans-serif%22%20font-size%3D%2254%22%20font-weight%3D%22700%22%20fill%3D%22white%22%3EFWT%20Bildbeispiel%3C%2Ftext%3E%0A%20%20%20%20%3Ctext%20x%3D%2282%22%20y%3D%22175%22%20font-family%3D%22Arial%2C%20sans-serif%22%20font-size%3D%2228%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.88%29%22%3EDemo-Grafik%20f%C3%BCr%20Bildklassen%3C%2Ftext%3E%0A%3C%2Fsvg%3E%0A" alt="Abstrakte FWT-Demografik mit Farbverlauf">Formate
Bildformate und Seitenverhältnisse
Ratio-Klassen halten ein festes Format. Das ist wichtig für Karten, Galerien, Hero-Bilder und gleichmäßige Bildflächen.
Live-Beispiel
HTML-Code anzeigen
<div class="fwt-ratio fwt-ratio-16x9 fwt-img-rounded fwt-img-shadow">
<img class="fwt-img-cover" src="data:image/svg+xml;utf8,%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221200%22%20height%3D%22760%22%20viewBox%3D%220%200%201200%20760%22%3E%0A%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%221%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%2306b6d4%22%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20offset%3D%2245%25%22%20stop-color%3D%22%233b82f6%22%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%2310b981%22%2F%3E%0A%20%20%20%20%20%20%20%20%3C%2FlinearGradient%3E%0A%20%20%20%20%3C%2Fdefs%3E%0A%20%20%20%20%3Crect%20width%3D%221200%22%20height%3D%22760%22%20fill%3D%22url%28%23g%29%22%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D%22930%22%20cy%3D%22170%22%20r%3D%2295%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.28%29%22%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D%22170%22%20cy%3D%22580%22%20r%3D%22150%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.16%29%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M130%20560%20L385%20305%20L560%20470%20L690%20350%20L1050%20640%20L130%20640%20Z%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.30%29%22%2F%3E%0A%20%20%20%20%3Ctext%20x%3D%2280%22%20y%3D%22120%22%20font-family%3D%22Arial%2C%20sans-serif%22%20font-size%3D%2254%22%20font-weight%3D%22700%22%20fill%3D%22white%22%3EFWT%20Bildbeispiel%3C%2Ftext%3E%0A%20%20%20%20%3Ctext%20x%3D%2282%22%20y%3D%22175%22%20font-family%3D%22Arial%2C%20sans-serif%22%20font-size%3D%2228%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.88%29%22%3EDemo-Grafik%20f%C3%BCr%20Bildklassen%3C%2Ftext%3E%0A%3C%2Fsvg%3E%0A" alt="Abstrakte FWT-Demografik im Format 16 zu 9">
</div>fwt-ratio-1x1 für quadratische Bilder.fwt-ratio-4x3 für klassische Bildflächen.fwt-ratio-16x9 für breite Medienflächen.fwt-ratio-21x9 für sehr breite Hero-Bilder.Rahmen
Rahmen, Schatten und Polaroid-Stil
Bildrahmen geben Bildern eine hochwertige Fläche und trennen sie sauber vom Hintergrund.
Live-Beispiel
HTML-Code anzeigen
<div class="fwt-grid fwt-grid-3">
<div class="fwt-img-frame">
<img src="data:image/svg+xml;utf8,%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221200%22%20height%3D%22760%22%20viewBox%3D%220%200%201200%20760%22%3E%0A%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%221%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%2306b6d4%22%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20offset%3D%2245%25%22%20stop-color%3D%22%233b82f6%22%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%2310b981%22%2F%3E%0A%20%20%20%20%20%20%20%20%3C%2FlinearGradient%3E%0A%20%20%20%20%3C%2Fdefs%3E%0A%20%20%20%20%3Crect%20width%3D%221200%22%20height%3D%22760%22%20fill%3D%22url%28%23g%29%22%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D%22930%22%20cy%3D%22170%22%20r%3D%2295%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.28%29%22%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D%22170%22%20cy%3D%22580%22%20r%3D%22150%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.16%29%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M130%20560%20L385%20305%20L560%20470%20L690%20350%20L1050%20640%20L130%20640%20Z%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.30%29%22%2F%3E%0A%20%20%20%20%3Ctext%20x%3D%2280%22%20y%3D%22120%22%20font-family%3D%22Arial%2C%20sans-serif%22%20font-size%3D%2254%22%20font-weight%3D%22700%22%20fill%3D%22white%22%3EFWT%20Bildbeispiel%3C%2Ftext%3E%0A%20%20%20%20%3Ctext%20x%3D%2282%22%20y%3D%22175%22%20font-family%3D%22Arial%2C%20sans-serif%22%20font-size%3D%2228%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.88%29%22%3EDemo-Grafik%20f%C3%BCr%20Bildklassen%3C%2Ftext%3E%0A%3C%2Fsvg%3E%0A" alt="Bild mit neutralem Rahmen">
</div>
<div class="fwt-img-frame fwt-img-frame-soft">
<img src="data:image/svg+xml;utf8,%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221200%22%20height%3D%22760%22%20viewBox%3D%220%200%201200%20760%22%3E%0A%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%221%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%2306b6d4%22%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20offset%3D%2245%25%22%20stop-color%3D%22%233b82f6%22%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%2310b981%22%2F%3E%0A%20%20%20%20%20%20%20%20%3C%2FlinearGradient%3E%0A%20%20%20%20%3C%2Fdefs%3E%0A%20%20%20%20%3Crect%20width%3D%221200%22%20height%3D%22760%22%20fill%3D%22url%28%23g%29%22%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D%22930%22%20cy%3D%22170%22%20r%3D%2295%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.28%29%22%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D%22170%22%20cy%3D%22580%22%20r%3D%22150%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.16%29%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M130%20560%20L385%20305%20L560%20470%20L690%20350%20L1050%20640%20L130%20640%20Z%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.30%29%22%2F%3E%0A%20%20%20%20%3Ctext%20x%3D%2280%22%20y%3D%22120%22%20font-family%3D%22Arial%2C%20sans-serif%22%20font-size%3D%2254%22%20font-weight%3D%22700%22%20fill%3D%22white%22%3EFWT%20Bildbeispiel%3C%2Ftext%3E%0A%20%20%20%20%3Ctext%20x%3D%2282%22%20y%3D%22175%22%20font-family%3D%22Arial%2C%20sans-serif%22%20font-size%3D%2228%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.88%29%22%3EDemo-Grafik%20f%C3%BCr%20Bildklassen%3C%2Ftext%3E%0A%3C%2Fsvg%3E%0A" alt="Bild mit weichem Rahmen">
</div>
<div class="fwt-img-polaroid">
<img src="data:image/svg+xml;utf8,%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221200%22%20height%3D%22760%22%20viewBox%3D%220%200%201200%20760%22%3E%0A%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%221%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%2306b6d4%22%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20offset%3D%2245%25%22%20stop-color%3D%22%233b82f6%22%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%2310b981%22%2F%3E%0A%20%20%20%20%20%20%20%20%3C%2FlinearGradient%3E%0A%20%20%20%20%3C%2Fdefs%3E%0A%20%20%20%20%3Crect%20width%3D%221200%22%20height%3D%22760%22%20fill%3D%22url%28%23g%29%22%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D%22930%22%20cy%3D%22170%22%20r%3D%2295%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.28%29%22%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D%22170%22%20cy%3D%22580%22%20r%3D%22150%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.16%29%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M130%20560%20L385%20305%20L560%20470%20L690%20350%20L1050%20640%20L130%20640%20Z%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.30%29%22%2F%3E%0A%20%20%20%20%3Ctext%20x%3D%2280%22%20y%3D%22120%22%20font-family%3D%22Arial%2C%20sans-serif%22%20font-size%3D%2254%22%20font-weight%3D%22700%22%20fill%3D%22white%22%3EFWT%20Bildbeispiel%3C%2Ftext%3E%0A%20%20%20%20%3Ctext%20x%3D%2282%22%20y%3D%22175%22%20font-family%3D%22Arial%2C%20sans-serif%22%20font-size%3D%2228%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.88%29%22%3EDemo-Grafik%20f%C3%BCr%20Bildklassen%3C%2Ftext%3E%0A%3C%2Fsvg%3E%0A" alt="Bild im Polaroid-Stil">
</div>
</div>Figure
Bild mit Caption
Für Bilder mit erklärender Unterschrift ist figure mit
figcaption die saubere HTML-Struktur.
Live-Beispiel
HTML-Code anzeigen
<figure class="fwt-figure fwt-img-frame">
<img class="fwt-figure-img" src="data:image/svg+xml;utf8,%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221200%22%20height%3D%22760%22%20viewBox%3D%220%200%201200%20760%22%3E%0A%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%221%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%2306b6d4%22%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20offset%3D%2245%25%22%20stop-color%3D%22%233b82f6%22%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%2310b981%22%2F%3E%0A%20%20%20%20%20%20%20%20%3C%2FlinearGradient%3E%0A%20%20%20%20%3C%2Fdefs%3E%0A%20%20%20%20%3Crect%20width%3D%221200%22%20height%3D%22760%22%20fill%3D%22url%28%23g%29%22%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D%22930%22%20cy%3D%22170%22%20r%3D%2295%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.28%29%22%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D%22170%22%20cy%3D%22580%22%20r%3D%22150%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.16%29%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M130%20560%20L385%20305%20L560%20470%20L690%20350%20L1050%20640%20L130%20640%20Z%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.30%29%22%2F%3E%0A%20%20%20%20%3Ctext%20x%3D%2280%22%20y%3D%22120%22%20font-family%3D%22Arial%2C%20sans-serif%22%20font-size%3D%2254%22%20font-weight%3D%22700%22%20fill%3D%22white%22%3EFWT%20Bildbeispiel%3C%2Ftext%3E%0A%20%20%20%20%3Ctext%20x%3D%2282%22%20y%3D%22175%22%20font-family%3D%22Arial%2C%20sans-serif%22%20font-size%3D%2228%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.88%29%22%3EDemo-Grafik%20f%C3%BCr%20Bildklassen%3C%2Ftext%3E%0A%3C%2Fsvg%3E%0A" alt="Abstrakte FWT-Demografik mit Farbverlauf">
<figcaption class="fwt-figure-caption">
Bildunterschriften erklären, was auf einem Bild wichtig ist.
</figcaption>
</figure>Bildkarte
Bildkarten
Bildkarten eignen sich für Blogbeiträge, News, Produkte, Projekte, Portfolioeinträge oder Tool-Vorschauen.
Live-Beispiel
Bildkarte
Gut für News, Blogbeiträge, Produkte, Projekte oder Tool-Vorschauen.
HTML-Code anzeigen
<article class="fwt-image-card">
<div class="fwt-image-card-media">
<div class="fwt-ratio fwt-ratio-16x9">
<img class="fwt-img-cover" src="data:image/svg+xml;utf8,%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221200%22%20height%3D%22760%22%20viewBox%3D%220%200%201200%20760%22%3E%0A%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%221%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%2306b6d4%22%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20offset%3D%2245%25%22%20stop-color%3D%22%233b82f6%22%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%2310b981%22%2F%3E%0A%20%20%20%20%20%20%20%20%3C%2FlinearGradient%3E%0A%20%20%20%20%3C%2Fdefs%3E%0A%20%20%20%20%3Crect%20width%3D%221200%22%20height%3D%22760%22%20fill%3D%22url%28%23g%29%22%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D%22930%22%20cy%3D%22170%22%20r%3D%2295%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.28%29%22%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D%22170%22%20cy%3D%22580%22%20r%3D%22150%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.16%29%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M130%20560%20L385%20305%20L560%20470%20L690%20350%20L1050%20640%20L130%20640%20Z%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.30%29%22%2F%3E%0A%20%20%20%20%3Ctext%20x%3D%2280%22%20y%3D%22120%22%20font-family%3D%22Arial%2C%20sans-serif%22%20font-size%3D%2254%22%20font-weight%3D%22700%22%20fill%3D%22white%22%3EFWT%20Bildbeispiel%3C%2Ftext%3E%0A%20%20%20%20%3Ctext%20x%3D%2282%22%20y%3D%22175%22%20font-family%3D%22Arial%2C%20sans-serif%22%20font-size%3D%2228%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.88%29%22%3EDemo-Grafik%20f%C3%BCr%20Bildklassen%3C%2Ftext%3E%0A%3C%2Fsvg%3E%0A" alt="Abstrakte FWT-Demografik als Kartenbild">
</div>
</div>
<div class="fwt-image-card-body">
<h3 class="fwt-image-card-title">Bildkarte</h3>
<p class="fwt-image-card-text">
Gut für News, Blogbeiträge, Produkte, Projekte oder Tool-Vorschauen.
</p>
</div>
</article>Overlay
Bild mit Overlay
Overlays wirken stark, können aber schnell unlesbar werden. FWT nutzt deshalb einen Verlauf, damit Text auf dem Bild besser lesbar bleibt.
Live-Beispiel
HTML-Code anzeigen
<div class="fwt-image-overlay">
<div class="fwt-ratio fwt-ratio-16x9">
<img class="fwt-img-cover" src="data:image/svg+xml;utf8,%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221200%22%20height%3D%22760%22%20viewBox%3D%220%200%201200%20760%22%3E%0A%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%221%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%2306b6d4%22%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20offset%3D%2245%25%22%20stop-color%3D%22%233b82f6%22%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%2310b981%22%2F%3E%0A%20%20%20%20%20%20%20%20%3C%2FlinearGradient%3E%0A%20%20%20%20%3C%2Fdefs%3E%0A%20%20%20%20%3Crect%20width%3D%221200%22%20height%3D%22760%22%20fill%3D%22url%28%23g%29%22%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D%22930%22%20cy%3D%22170%22%20r%3D%2295%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.28%29%22%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D%22170%22%20cy%3D%22580%22%20r%3D%22150%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.16%29%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M130%20560%20L385%20305%20L560%20470%20L690%20350%20L1050%20640%20L130%20640%20Z%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.30%29%22%2F%3E%0A%20%20%20%20%3Ctext%20x%3D%2280%22%20y%3D%22120%22%20font-family%3D%22Arial%2C%20sans-serif%22%20font-size%3D%2254%22%20font-weight%3D%22700%22%20fill%3D%22white%22%3EFWT%20Bildbeispiel%3C%2Ftext%3E%0A%20%20%20%20%3Ctext%20x%3D%2282%22%20y%3D%22175%22%20font-family%3D%22Arial%2C%20sans-serif%22%20font-size%3D%2228%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.88%29%22%3EDemo-Grafik%20f%C3%BCr%20Bildklassen%3C%2Ftext%3E%0A%3C%2Fsvg%3E%0A" alt="Abstrakte FWT-Demografik mit Textoverlay">
</div>
<div class="fwt-image-overlay-content">
<h3 class="fwt-image-overlay-title">Overlay-Bild</h3>
<p class="fwt-image-overlay-text">
Text über Bildern braucht immer ausreichend Kontrast.
</p>
</div>
</div>
Overlay-Texte müssen immer auf Kontrast geprüft werden.
Avatar / Logo
Avatare und Logos
Avatare, Profilbilder und Logos brauchen eigene Größenregeln, damit sie nicht zufällig wirken.
Live-Beispiel
HTML-Code anzeigen
<div class="fwt-grid fwt-grid-3">
<div class="fwt-frame">
<img class="fwt-avatar" src="data:image/svg+xml;utf8,%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221200%22%20height%3D%22760%22%20viewBox%3D%220%200%201200%20760%22%3E%0A%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%221%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%2306b6d4%22%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20offset%3D%2245%25%22%20stop-color%3D%22%233b82f6%22%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%2310b981%22%2F%3E%0A%20%20%20%20%20%20%20%20%3C%2FlinearGradient%3E%0A%20%20%20%20%3C%2Fdefs%3E%0A%20%20%20%20%3Crect%20width%3D%221200%22%20height%3D%22760%22%20fill%3D%22url%28%23g%29%22%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D%22930%22%20cy%3D%22170%22%20r%3D%2295%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.28%29%22%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D%22170%22%20cy%3D%22580%22%20r%3D%22150%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.16%29%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M130%20560%20L385%20305%20L560%20470%20L690%20350%20L1050%20640%20L130%20640%20Z%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.30%29%22%2F%3E%0A%20%20%20%20%3Ctext%20x%3D%2280%22%20y%3D%22120%22%20font-family%3D%22Arial%2C%20sans-serif%22%20font-size%3D%2254%22%20font-weight%3D%22700%22%20fill%3D%22white%22%3EFWT%20Bildbeispiel%3C%2Ftext%3E%0A%20%20%20%20%3Ctext%20x%3D%2282%22%20y%3D%22175%22%20font-family%3D%22Arial%2C%20sans-serif%22%20font-size%3D%2228%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.88%29%22%3EDemo-Grafik%20f%C3%BCr%20Bildklassen%3C%2Ftext%3E%0A%3C%2Fsvg%3E%0A" alt="Demo-Avatar">
<p class="fwt-text-meta">Avatar normal</p>
</div>
<div class="fwt-frame">
<img class="fwt-avatar fwt-avatar-lg" src="data:image/svg+xml;utf8,%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221200%22%20height%3D%22760%22%20viewBox%3D%220%200%201200%20760%22%3E%0A%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%221%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%2306b6d4%22%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20offset%3D%2245%25%22%20stop-color%3D%22%233b82f6%22%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%2310b981%22%2F%3E%0A%20%20%20%20%20%20%20%20%3C%2FlinearGradient%3E%0A%20%20%20%20%3C%2Fdefs%3E%0A%20%20%20%20%3Crect%20width%3D%221200%22%20height%3D%22760%22%20fill%3D%22url%28%23g%29%22%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D%22930%22%20cy%3D%22170%22%20r%3D%2295%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.28%29%22%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D%22170%22%20cy%3D%22580%22%20r%3D%22150%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.16%29%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M130%20560%20L385%20305%20L560%20470%20L690%20350%20L1050%20640%20L130%20640%20Z%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.30%29%22%2F%3E%0A%20%20%20%20%3Ctext%20x%3D%2280%22%20y%3D%22120%22%20font-family%3D%22Arial%2C%20sans-serif%22%20font-size%3D%2254%22%20font-weight%3D%22700%22%20fill%3D%22white%22%3EFWT%20Bildbeispiel%3C%2Ftext%3E%0A%20%20%20%20%3Ctext%20x%3D%2282%22%20y%3D%22175%22%20font-family%3D%22Arial%2C%20sans-serif%22%20font-size%3D%2228%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.88%29%22%3EDemo-Grafik%20f%C3%BCr%20Bildklassen%3C%2Ftext%3E%0A%3C%2Fsvg%3E%0A" alt="Großer Demo-Avatar">
<p class="fwt-text-meta">Avatar groß</p>
</div>
<div class="fwt-frame">
<img class="fwt-logo-img fwt-logo-img-md" src="data:image/svg+xml;utf8,%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221200%22%20height%3D%22760%22%20viewBox%3D%220%200%201200%20760%22%3E%0A%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%221%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%2306b6d4%22%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20offset%3D%2245%25%22%20stop-color%3D%22%233b82f6%22%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%2310b981%22%2F%3E%0A%20%20%20%20%20%20%20%20%3C%2FlinearGradient%3E%0A%20%20%20%20%3C%2Fdefs%3E%0A%20%20%20%20%3Crect%20width%3D%221200%22%20height%3D%22760%22%20fill%3D%22url%28%23g%29%22%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D%22930%22%20cy%3D%22170%22%20r%3D%2295%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.28%29%22%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D%22170%22%20cy%3D%22580%22%20r%3D%22150%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.16%29%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M130%20560%20L385%20305%20L560%20470%20L690%20350%20L1050%20640%20L130%20640%20Z%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.30%29%22%2F%3E%0A%20%20%20%20%3Ctext%20x%3D%2280%22%20y%3D%22120%22%20font-family%3D%22Arial%2C%20sans-serif%22%20font-size%3D%2254%22%20font-weight%3D%22700%22%20fill%3D%22white%22%3EFWT%20Bildbeispiel%3C%2Ftext%3E%0A%20%20%20%20%3Ctext%20x%3D%2282%22%20y%3D%22175%22%20font-family%3D%22Arial%2C%20sans-serif%22%20font-size%3D%2228%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.88%29%22%3EDemo-Grafik%20f%C3%BCr%20Bildklassen%3C%2Ftext%3E%0A%3C%2Fsvg%3E%0A" alt="Demo-Logo">
<p class="fwt-text-meta">Logo-Bild</p>
</div>
</div>Galerie
Einfache Bildergalerie
Galerien sollen ohne viel Zusatzarbeit gleichmäßig wirken und responsiv umbrechen.
Live-Beispiel
HTML-Code anzeigen
<div class="fwt-gallery fwt-gallery-3">
<div class="fwt-gallery-item">
<div class="fwt-ratio fwt-ratio-4x3">
<img src="data:image/svg+xml;utf8,%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221200%22%20height%3D%22760%22%20viewBox%3D%220%200%201200%20760%22%3E%0A%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%221%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%2306b6d4%22%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20offset%3D%2245%25%22%20stop-color%3D%22%233b82f6%22%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%2310b981%22%2F%3E%0A%20%20%20%20%20%20%20%20%3C%2FlinearGradient%3E%0A%20%20%20%20%3C%2Fdefs%3E%0A%20%20%20%20%3Crect%20width%3D%221200%22%20height%3D%22760%22%20fill%3D%22url%28%23g%29%22%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D%22930%22%20cy%3D%22170%22%20r%3D%2295%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.28%29%22%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D%22170%22%20cy%3D%22580%22%20r%3D%22150%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.16%29%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M130%20560%20L385%20305%20L560%20470%20L690%20350%20L1050%20640%20L130%20640%20Z%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.30%29%22%2F%3E%0A%20%20%20%20%3Ctext%20x%3D%2280%22%20y%3D%22120%22%20font-family%3D%22Arial%2C%20sans-serif%22%20font-size%3D%2254%22%20font-weight%3D%22700%22%20fill%3D%22white%22%3EFWT%20Bildbeispiel%3C%2Ftext%3E%0A%20%20%20%20%3Ctext%20x%3D%2282%22%20y%3D%22175%22%20font-family%3D%22Arial%2C%20sans-serif%22%20font-size%3D%2228%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.88%29%22%3EDemo-Grafik%20f%C3%BCr%20Bildklassen%3C%2Ftext%3E%0A%3C%2Fsvg%3E%0A" alt="Galeriebild 1">
</div>
</div>
<div class="fwt-gallery-item">
<div class="fwt-ratio fwt-ratio-4x3">
<img src="data:image/svg+xml;utf8,%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221200%22%20height%3D%22760%22%20viewBox%3D%220%200%201200%20760%22%3E%0A%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%221%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%2306b6d4%22%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20offset%3D%2245%25%22%20stop-color%3D%22%233b82f6%22%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%2310b981%22%2F%3E%0A%20%20%20%20%20%20%20%20%3C%2FlinearGradient%3E%0A%20%20%20%20%3C%2Fdefs%3E%0A%20%20%20%20%3Crect%20width%3D%221200%22%20height%3D%22760%22%20fill%3D%22url%28%23g%29%22%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D%22930%22%20cy%3D%22170%22%20r%3D%2295%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.28%29%22%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D%22170%22%20cy%3D%22580%22%20r%3D%22150%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.16%29%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M130%20560%20L385%20305%20L560%20470%20L690%20350%20L1050%20640%20L130%20640%20Z%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.30%29%22%2F%3E%0A%20%20%20%20%3Ctext%20x%3D%2280%22%20y%3D%22120%22%20font-family%3D%22Arial%2C%20sans-serif%22%20font-size%3D%2254%22%20font-weight%3D%22700%22%20fill%3D%22white%22%3EFWT%20Bildbeispiel%3C%2Ftext%3E%0A%20%20%20%20%3Ctext%20x%3D%2282%22%20y%3D%22175%22%20font-family%3D%22Arial%2C%20sans-serif%22%20font-size%3D%2228%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.88%29%22%3EDemo-Grafik%20f%C3%BCr%20Bildklassen%3C%2Ftext%3E%0A%3C%2Fsvg%3E%0A" alt="Galeriebild 2">
</div>
</div>
<div class="fwt-gallery-item">
<div class="fwt-ratio fwt-ratio-4x3">
<img src="data:image/svg+xml;utf8,%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221200%22%20height%3D%22760%22%20viewBox%3D%220%200%201200%20760%22%3E%0A%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%221%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%2306b6d4%22%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20offset%3D%2245%25%22%20stop-color%3D%22%233b82f6%22%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%2310b981%22%2F%3E%0A%20%20%20%20%20%20%20%20%3C%2FlinearGradient%3E%0A%20%20%20%20%3C%2Fdefs%3E%0A%20%20%20%20%3Crect%20width%3D%221200%22%20height%3D%22760%22%20fill%3D%22url%28%23g%29%22%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D%22930%22%20cy%3D%22170%22%20r%3D%2295%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.28%29%22%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D%22170%22%20cy%3D%22580%22%20r%3D%22150%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.16%29%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M130%20560%20L385%20305%20L560%20470%20L690%20350%20L1050%20640%20L130%20640%20Z%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.30%29%22%2F%3E%0A%20%20%20%20%3Ctext%20x%3D%2280%22%20y%3D%22120%22%20font-family%3D%22Arial%2C%20sans-serif%22%20font-size%3D%2254%22%20font-weight%3D%22700%22%20fill%3D%22white%22%3EFWT%20Bildbeispiel%3C%2Ftext%3E%0A%20%20%20%20%3Ctext%20x%3D%2282%22%20y%3D%22175%22%20font-family%3D%22Arial%2C%20sans-serif%22%20font-size%3D%2228%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.88%29%22%3EDemo-Grafik%20f%C3%BCr%20Bildklassen%3C%2Ftext%3E%0A%3C%2Fsvg%3E%0A" alt="Galeriebild 3">
</div>
</div>
</div>Barrierefreiheit
Alt-Texte und typische Fehler
Inhaltliches Bild
Beschreibe kurz, was für den Inhalt wichtig ist.
<img src="bild.png" alt="Mitarbeiterin erklärt einem Kunden den Laptop">
Dekoratives Bild
Wenn ein Bild nur Schmuck ist, bleibt der Alt-Text leer.
<img src="deko.png" alt="">
Nicht so
Dateinamen oder Keyword-Spam helfen niemandem.
<img src="bild123.jpg" alt="bild123.jpg">