Grafik-Workshop: Grafiken und Fotos in Deine Homepage einbinden (HTML & WordPress)


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

Schaf auf einer Wiese
Schaf auf einer Wiese

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)

  1. Öffne Beitrag/Seite im Editor.
  2. Füge einen „Bild“-Block hinzu.
  3. Wähle „Hochladen“ oder „Mediathek“.
  4. 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:

Bequeme Generatoren:

Anbieter-Übersichten (alphabetisch sortiert)

Online-Tools zum Komprimieren/Optimieren

Link zum AnbieterBeschreibung des Angebots
https://squoosh.app/Browser-basiertes Optimierungs-Tool zum Vergleichen und Komprimieren (arbeitet lokal im Browser).
https://tinify.com/web/compressOnline-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 AnbieterBeschreibung 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 AnbieterBeschreibung 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 AnbieterBeschreibung 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.

Weiterführende Links

Du weißt jetzt, wie Du Grafiken und Fotos in Deine Homepage einbindest und für das Web optimierst. Wenn Du das Gelernte direkt ausprobieren möchtest, findest Du auf meine-erste-homepage.com weitere passende Anleitungen, Bildquellen und praktische Beispiele:

Fotos für Deine Homepage – kostenlose & professionelle Bildquellen

Du brauchst noch die passenden Bilder für Deine Webseite? In unserer Übersicht stellen wir verschiedene Fotoressourcen im Internet vor und zeigen Dir, wo Du kostenlose und professionelle Bilder für Dein Webprojekt finden kannst.

Zum Beitrag:
https://meine-erste-homepage.com/fotos-fuer-deine-homepage-die-besten-fotoressourcen-im-internet/

Kostenlose Silvesterbilder & Neujahrsgrafiken für Deine Webseite

Ein praktisches Beispiel für den Einsatz von Bildern, Grafiken und Animationen: Hier findest Du kostenlose Silvesterbilder, Neujahrsgrafiken und animierte GIFs sowie Tipps zur Einbindung in HTML und WordPress.

Zum Beitrag:
https://meine-erste-homepage.com/kostenlose-silvester-und-neujahrsgrafiken-fuer-deine-webseite/

Animiertes Feuerwerk für Deine Homepage

Grafiken müssen nicht immer statisch sein. In dieser Anleitung zeigen wir Dir, wie Du ein animiertes Feuerwerk mit modernen Webtechniken auf Deiner Homepage umsetzen kannst – inklusive Beispielen und fertigem Code.

Zum Beitrag:
https://meine-erste-homepage.com/ein-animiertes-feuerwerk-fuer-deine-homepage-effekte-beispiele/

Screenshot-Tools für Webmaster

Du möchtest Deine eigene Webseite oder Deine Webdesign-Projekte professionell präsentieren? Mit Screenshot-Tools kannst Du komplette Webseiten erfassen und teilweise direkt als ansprechende Mockups auf Desktop-PC, Notebook, Tablet oder Smartphone darstellen.

Zum Beitrag:
https://meine-erste-homepage.com/screenshot-tools/