Bilder auf der Website optimieren: So verbesserst du Geschwindigkeit und SEO

1. Alt-Text: Gib Google Kontext

Der sogenannte Alt-Text (Alternativtext) beschreibt den Inhalt eines Bildes. Er wird angezeigt, wenn das Bild nicht geladen werden kann – und vor allem: Er hilft Suchmaschinen, den Inhalt des Bildes zu verstehen.

Warum das wichtig ist:
Google kann keine Bilder „sehen“. Es braucht Texte, um den Bildinhalt einzuordnen – und zu entscheiden, ob das Bild zu einer Suchanfrage passt.

Beispiel für guten Alt-Text:
❌ image1.jpg → kein Mehrwert
✅ „Coaching-Sitzung im hellen Büro mit Klientin am Tisch“ → konkret, beschreibend

Tipp:
Verwende 1–2 relevante Keywords im Alt-Text – aber übertreibe es nicht. Bleib menschlich und beschreibend.

2. Dateigrösse & Format: Ladezeiten killen Rankings

Je grösser deine Bilder, desto länger lädt deine Website – besonders mobil.
Google straft langsame Seiten ab. Deshalb: Optimiere deine Bilddateien.

So geht’s einfach:
🔧 Tools wie TinyPNG oder ImageOptim komprimieren Bilder ohne sichtbaren Qualitätsverlust.
📁 Formate:
– JPEG für Fotos
– PNG für Grafiken mit Transparenz
– WebP (neu): moderne Alternative mit Top-Komprimierung & Qualität

Ziel:
– Einzelne Bilder: unter 250 KB
– Große Hero-Images: maximal 500 KB (wenn nötig in 2x Auflösung)

3. Dateiname: Sag, was du zeigst

Der Dateiname eines Bildes ist ein Ranking-Signal. Heisst dein Bild „IMG_83947.jpg“, versteht niemand etwas – auch Google nicht.

So machst du es besser:
Benenne deine Dateien beschreibend und keyword-orientiert, z. B.:
✅ webdesign-agentur-st-gallen.jpg
✅ coaching-raum-naturlicht-schweiz.jpg

Tipp:
– keine Umlaute oder Sonderzeichen
– trenne Wörter mit Bindestrichen
– keine unnötigen Zahlen oder Kürzel

4. Lazy Loading: Lade nur, was sichtbar ist

Mit Lazy Loading werden Bilder erst dann geladen, wenn sie im sichtbaren Bereich erscheinen. Das spart Daten, verbessert die User Experience – und vor allem die PageSpeed, ein Rankingfaktor für Google.

So setzt du Lazy Loading um:
– Bei modernen Baukästen wie Framer, WordPress oder Webflow oft schon integriert
– Im Code: <img loading="lazy" ... >
– Für WordPress: Plugins wie WP Rocket oder Smush aktivieren Lazy Loading automatisch

5. Bildergrösse in der richtigen Auflösung bereitstellen

Viele Websites laden riesige Bilder, die am Ende nur in 300 px Breite angezeigt werden. Das kostet Performance – ohne Nutzen.

Tipp:
Passe die Dimensionen des Bildes an die tatsächliche Anzeigegrösse an – oder nutze responsive Bildformate (srcset) für verschiedene Displaygrössen.

6. Strukturierte Daten für Bilder (Bonus für Fortgeschrittene)

Wenn du z. B. Produktbilder zeigst, kannst du mit Schema.org-Markup Google noch mehr Kontext geben.
Das erhöht die Chance, in den Google-Bild-Suchergebnissen prominent angezeigt zu werden.

Beispiel:
Für ein Produktbild eines Coaching-Pakets könntest du strukturierte Daten wie Preis, Titel und Beschreibung einbinden.

Fazit: Bilder-SEO ist kein Nice-to-have – es ist ein Ranking-Booster

Eine Website mit unoptimierten Bildern ist wie ein Ferrari mit platten Reifen: Sie sieht gut aus, bringt dich aber nicht weit.
Wenn du deine Bilder richtig behandelst, bekommst du:
✅ schnellere Ladezeiten
✅ bessere Rankings
✅ höhere Sichtbarkeit
✅ bessere Conversion

Quick-Checkliste zum Mitnehmen:
🔲 Alt-Text für jedes Bild
🔲 Komprimierte Dateien (< 250 KB)
🔲 Aussagekräftige Dateinamen
🔲 Lazy Loading aktiviert
🔲 Richtige Auflösung & Format
🔲 (Optional) Strukturierte Daten bei Produktbildern

👉 Du willst deine Website schneller, besser und Google-freundlicher machen?
Ich helfe dir gerne – von der SEO-Strategie bis zum kompletten Webdesign mit optimierten Bildern.
Hier Kontakt aufnehmen →