Grafiken & Fotos einbinden: HTML & WordPress Guide

Bilder machen Deine Webseite lebendig – sie können aber auch Ladezeit, Nutzererlebnis und SEO spürbar beeinflussen. In diesem Workshop lernst Du, welche Bildformate wann sinnvoll sind, wie Du Bilder korrekt einbindest (klassisch mit HTML oder bequem über WordPress) und wie Du typische Fehler vermeidest.

Grundregeln für Web-Grafiken und Fotos (modern & praxisnah)

1) Wähle das passende Dateiformat

Fotos: nutze bevorzugt WebP oder AVIF (kleinere Dateien), alternativ JPG.
Grafiken/Logos/Icons:
- SVG (optimal für Logos/Icons, skalierbar, sehr klein)
- PNG (wenn Transparenz nötig ist und kein SVG möglich)
Animationen:
- GIF ist möglich, aber oft groß und ineffizient.
- Wenn möglich: kurze Animationen eher als Video (MP4/WebM) umsetzen (meist deutlich kleiner).

2) Dateigröße und Abmessungen: beides zählt

Dateigröße: als grobe Orientierung sollten Bilder meist deutlich unter 500 KB bleiben (bei großen Hero-Bildern ggf. mehr – aber gezielt optimiert).
Abmessungen: lade Bilder nicht in 4000px Breite hoch, wenn sie auf der Seite nur 1200px angezeigt werden.

3) Vermeide „Blinke“-Animationen

Zu viele/zu aggressive Animationen wirken schnell unseriös, lenken ab und können Besucher (und Barrierefreiheit) negativ beeinflussen.

4) Hotlinking vermeiden (Bilder “von fremden Webseiten ziehen”)

Binde Bilder anderer Seiten nicht direkt per URL ein, wenn Du keine ausdrückliche Erlaubnis hast. Das kann rechtlich und technisch problematisch sein (und das Bild kann jederzeit verschwinden).

So bindest Du ein Bild in HTML ein

Minimalbeispiel (korrekt mit Alternativtext)

<img src="bilder/schaf.webp" width="120" height="120" alt="Schaf auf einer Wiese">

Wichtig:

alt ist Pflicht (Accessibility + SEO + Kontext, wenn Bild nicht lädt).
width und height helfen, Layout-Sprünge zu vermeiden (CLS).

Klickbares Bild (Link auf eine Webseite)

<a href="https://www.meine-erste-homepage.com" target="_blank" rel="noopener">
  <img src="bilder/schaf.webp" width="120" height="120" alt="Schaf auf einer Wiese">
</a>

Hinweis: rel="noopener" ist eine sinnvolle Sicherheits-Ergänzung bei target="_blank".

Responsive Images (empfohlen)

Damit mobile Geräte kleinere Dateien laden, nutzt Du srcset und sizes:

<img
  src="bilder/schaf-800.webp"
  srcset="bilder/schaf-400.webp 400w, bilder/schaf-800.webp 800w, bilder/schaf-1200.webp 1200w"
  sizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px"
  width="800"
  height="800"
  alt="Schaf auf einer Wiese"
  loading="lazy">

loading="lazy" lädt Bilder erst dann, wenn sie nahezu im sichtbaren Bereich sind.

Häufige Fehlerquelle: lokale Dateipfade

Wenn Du Bilder so referenzierst, funktionieren sie nur bei Dir lokal, aber nicht im Web:

Falsch (lokaler Pfad):

<img src="file:///C:/Eigene Dateien/Meine Bilder/bild1.jpg" alt="...">

Richtig (relativ zur Webseite):

<img src="bilder/bild1.jpg" alt="...">

Praxis-Tipp: Lege auf dem Webspace einen Ordner wie bilder/ oder images/ an und halte die Struktur konsistent.

So machst Du es in WordPress (Block-Editor & Mediathek)

Bild einfügen (Standardweg)

Öffne Beitrag/Seite im Editor.
Füge einen „Bild“-Block hinzu.
Wähle „Hochladen“ oder „Mediathek“.
Vergib im rechten Panel unbedingt:
- Alternativtext (Alt-Text)
- optional: Bildunterschrift

WordPress-SEO für Bilder (konkret)

Dateiname sprechend: schaf-auf-wiese.webp statt IMG_1234.webp
Alt-Text beschreibt den Inhalt (nicht Keyword-Stuffing)
Nutze ein Bild-Optimierungs-Plugin (siehe Tabellen unten)

WordPress erzeugt in der Regel automatisch verschiedene Bildgrößen und setzt responsive Auslieferung. Das ist ein großer Vorteil gegenüber „reinem HTML“, wenn Du es manuell nicht umsetzen möchtest.

Alt-Texte: so schreibst Du sie richtig (SEO & Barrierefreiheit)

Alt-Texte sollten:

kurz und konkret beschreiben, was zu sehen ist
Kontext berücksichtigen (warum ist das Bild da?)
keine Keyword-Liste sein

Beispiele:

Gut: „Schaf auf einer grünen Wiese vor den Alpen“
Schlecht: „Schaf Schafe Wiese Schafbild Farm Tiere“

Data-URL (Base64): wann sinnvoll – und wann nicht

Eine Data-URL bettet ein Bild direkt in HTML/CSS ein. Das kann bei sehr kleinen Icons sinnvoll sein, ist aber bei normalen Bildern oft nachteilig (HTML wird riesig, Caching wird schlechter, Wartung leidet).

Hintergrundinfos:

https://de.wikipedia.org/wiki/Data-URL

Bequeme Generatoren:

Anbieter-Übersichten (alphabetisch sortiert)

Online-Tools zum Komprimieren/Optimieren

Link zum Anbieter	Beschreibung des Angebots
https://squoosh.app/	Browser-basiertes Optimierungs-Tool zum Vergleichen und Komprimieren (arbeitet lokal im Browser).
https://tinify.com/web/compress	Online-Kompressor von Tinify (AVIF/WebP/JPEG/PNG), geeignet für schnelle Optimierung.
https://tinypng.com/	TinyPNG Kompressor (unterstützt u. a. WebP/AVIF/JPEG/PNG).
https://tinyjpg.com/	Speziell für JPEG-Komprimierung (Tinify/TinyJPG).

WordPress-Plugins für Bildoptimierung

Link zum Anbieter	Beschreibung des Angebots
https://de.wordpress.org/plugins/ewww-image-optimizer/	Bildoptimierung direkt in WordPress, kann Uploads automatisiert optimieren.
https://wordpress.org/plugins/shortpixel-image-optimiser/	ShortPixel Image Optimizer: Komprimierung + Next-Gen-Formate (WebP/AVIF), “install-and-forget”.
https://wordpress.org/plugins/wp-smushit/	Smush: Optimieren/Resizing, Lazy Loading, Konvertierung zu WebP/AVIF.

Bild-CDN / Image Delivery (Performance bei vielen Bildern)

Link zum Anbieter	Beschreibung des Angebots
https://imagekit.io/	Image CDN mit URL-basierten Transformationen (Resize/Optimierung) und Asset-Management.
https://www.cloudflare.com/developer-platform/products/cloudflare-images/	Image-Pipeline zum Speichern/Optimieren/Ausliefern über globales CDN.

Kostenlose Stockfoto-Quellen (Lizenzbedingungen trotzdem prüfen)

Link zum Anbieter	Beschreibung des Angebots
https://pixabay.com/	Große Auswahl an lizenzfreien Bildern/Videos; Nutzungsbedingungen vor Einsatz prüfen.
https://www.pexels.com/	Kostenlose Stockfotos & Videos; Lizenz/Regeln auf der Seite beachten.
https://unsplash.com/	Hochwertige kostenlose Fotos; Unsplash-Lizenz beachten.