Bilder richtig einsetzen: Der Guide für schnellere Websites

Die gute Nachricht: Sie brauchen kein Studium in Bildbearbeitung, um Ihre Website deutlich schneller zu machen. In diesem Artikel erfahren Sie alles Wichtige über Bildformate, Kompression, Dimensionen und moderne Techniken wie Lazy Loading. Am Ende wartet eine praktische Checkliste, mit der Sie Ihre bestehende Website Schritt für Schritt optimieren können.

1. Die Bildformate verstanden

Der erste Schritt zur Optimierung ist die Wahl des richtigen Formats. Nicht jedes Bildformat eignet sich für jeden Zweck – und die Unterschiede können enorm sein.

JPEG – der Klassiker für Fotos

JPEG ist das am weitesten verbreitete Format für Fotos und Bilder mit vielen Farben. Es komprimiert verlustbehaftet, was bedeutet: Je stärker Sie komprimieren, desto mehr Details gehen verloren. Für die meisten Produktfotos, Landschaftsbilder oder Portraits ist JPEG aber nach wie vor eine gute Wahl – vor allem, weil es von allen Browsern und Geräten unterstützt wird.

PNG – für Grafiken und Transparenz

PNG eignet sich besonders für Grafiken, Screenshots, Logos oder Bilder, die transparente Bereiche haben. Im Gegensatz zu JPEG ist PNG verlustfrei, weshalb Texte und scharfe Kanten perfekt dargestellt werden. Der Nachteil: PNG-Dateien sind oft deutlich grösser als JPEGs, vor allem bei Fotos.

WebP – der moderne Standard

WebP wurde von Google entwickelt und bietet bessere Kompression als JPEG bei gleichzeitig besserer Qualität. Viele moderne CMS wie WordPress unterstützen WebP mittlerweile standardmässig (ab Version 5.8). Der einzige Haken: Sehr alte Browser (etwa Internet Explorer) können WebP nicht darstellen – weshalb Sie in manchen Fällen ein JPEG als Fallback bereitstellen sollten.

AVIF – die Zukunft

AVIF ist noch neuer als WebP und komprimiert nochmals besser. Die Dateigrössen sind beeindruckend klein, die Bildqualität bleibt hoch. Allerdings wird AVIF noch nicht von allen Browsern unterstützt. Für die meisten Websites ist WebP aktuell der beste Kompromiss aus Qualität, Dateigrösse und Kompatibilität.

SVG – für Logos und Icons

SVG (Scalable Vector Graphics) ist ein Vektorformat, das sich beliebig skalieren lässt, ohne an Qualität zu verlieren. Perfekt für Logos, Icons oder einfache Grafiken. Der grosse Vorteil: Eine einzige SVG-Datei funktioniert auf jedem Display – vom kleinen Smartphone bis zum hochauflösenden 4K-Monitor.

Praktische Entscheidungshilfe

Praxis-Tipp: Testen Sie, ob Ihr CMS WebP unterstützt, indem Sie ein WebP-Bild hochladen. Bei WordPress funktioniert das ab Version 5.8 problemlos.

2. Kompression – der grösste Hebel

Die Wahl des richtigen Formats ist wichtig – aber die Kompression ist der eigentliche Game-Changer. Ein Beispiel: Ein Original-Foto vom iPhone wiegt oft 3 bis 4 MB. Nach dem Upload in WordPress wird es auf etwa 1 bis 2 MB reduziert, je nach Einstellungen. Richtig optimiert bringt dasselbe Bild nur noch 150 bis 300 KB auf die Waage. Das ist Faktor 10 bis 20 weniger Datenvolumen!

A) Vor dem Upload komprimieren (empfohlen)

Die effektivste Methode ist, Bilder bereits vor dem Upload zu optimieren. So sparen Sie Speicherplatz auf dem Server und vermeiden, dass Ihr CMS die Optimierung übernimmt – was oft weniger effizient ist.

Für Einsteiger: Online-Tools

Tools wie TinyPNG oder Squoosh.app sind kostenlos und kinderleicht zu bedienen:

1. Bild hochladen
2. Automatisch komprimieren lassen
3. Optimiertes Bild herunterladen und auf Ihrer Website hochladen

Squoosh.app bietet zusätzlich die Möglichkeit, verschiedene Formate (JPEG, WebP, AVIF) direkt zu vergleichen und die Qualität manuell anzupassen. Sie sehen in Echtzeit, wie sich die Dateigrösse verändert und wie das Bild dabei aussieht.

Für Fortgeschrittene: Desktop-Tools

Wenn Sie regelmässig viele Bilder optimieren, lohnen sich Desktop-Programme wie ImageOptim (Mac) oder FileOptimizer (Windows). Diese Tools komprimieren Bilder verlustfrei oder mit minimalen Qualitätseinbussen – und das oft in Sekundenschnelle.

Für Profis: Batch-Verarbeitung

Wer hunderte Bilder auf einmal optimieren muss, kann auf Kommandozeilen-Tools wie ImageMagick zurückgreifen. Damit lassen sich ganze Ordner automatisiert verarbeiten.

B) Automatisch beim Upload: WordPress-Plugins

Wenn Sie WordPress nutzen, können Sie die Optimierung auch automatisieren. Plugins wie ShortPixel, Imagify oder Smush komprimieren Bilder direkt nach dem Upload. Das ist bequem, hat aber zwei Nachteile:

1. Plugins benötigen Server-Ressourcen und können Ihre Website ausbremsen.
2. Die Qualität der automatischen Kompression variiert – manchmal lohnt sich die manuelle Optimierung trotzdem.

Die meisten Plugins bieten kostenlose Kontingente (z.B. 100 Bilder pro Monat) und kostenpflichtige Upgrades für grössere Mengen. ShortPixel und Imagify ermöglichen es ausserdem, bereits hochgeladene Bilder nachträglich in der Mediathek zu optimieren – praktisch, wenn Sie eine bestehende Website überarbeiten wollen.

Praxis-Test: Laden Sie ein Foto auf Ihre Website hoch und prüfen Sie die Dateigrösse. Liegt sie deutlich über 500 KB, sollten Sie handeln. Ein durchschnittliches Produktfoto sollte zwischen 100 und 300 KB wiegen.

3. Die richtige Grösse (Dimensionen)

Ein häufiges Missverständnis: Nur weil ein Bild auf Ihrer Website in einem 400 Pixel breiten Container dargestellt wird, heisst das nicht, dass es genau 400 Pixel gross sein muss. Es sollte aber auf keinen Fall 4'000 Pixel breit sein!

Das Problem mit zu grossen Bildern

Viele Smartphones machen heute Fotos mit 4'000 x 3'000 Pixeln oder mehr. Wenn Sie diese Bilder unverändert hochladen, werden sie zwar korrekt skaliert angezeigt – aber der Browser muss trotzdem die gesamte Datei herunterladen. Das kostet unnötig Bandbreite und verlängert die Ladezeit erheblich.

Responsive Images: WordPress macht's automatisch

WordPress erstellt beim Upload automatisch mehrere Versionen Ihres Bildes in verschiedenen Grössen (Thumbnail, Medium, Large). Das ist praktisch, weil so jedes Gerät die passende Bildgrösse lädt: Ein Smartphone bekommt die kleine Version, ein Desktop-Monitor die grosse.

Allerdings: Wenn Ihr Original-Upload 5'000 Pixel breit ist, wird WordPress trotzdem alle Versionen davon erstellen – und das kostet Speicherplatz. Besser ist es, das Original bereits vor dem Upload auf eine sinnvolle Grösse zu bringen.

Faustregeln für Bildgrössen

• Hero-Images / Slider: Maximal 2'000 Pixel Breite (für hochauflösende Retina-Displays)
• Content-Bilder im Text: Maximal 1'200 Pixel Breite
• Thumbnails / Vorschaubilder: 300 bis 600 Pixel Breite
• Hintergrundbilder: Je nach Design, aber oft reichen 1'920 Pixel

Praxis-Tipp für WordPress: Gehen Sie zu Einstellungen → Medien und prüfen Sie, welche Bildgrössen Ihr Theme automatisch generiert. Nicht genutzte Grössen fressen nur Speicherplatz. Mit Plugins wie Regenerate Thumbnails können Sie alte Bilder nachträglich anpassen, wenn Sie Ihre Einstellungen ändern.

4. Lazy Loading – nur laden, was sichtbar ist

Stellen Sie sich einen langen Blogartikel mit 20 Bildern vor. Warum sollten alle 20 Bilder beim Seitenaufruf geladen werden, wenn Sie als Besucher zunächst nur die ersten drei sehen? Genau hier setzt Lazy Loading an: Bilder werden erst geladen, wenn sie im sichtbaren Bereich des Browsers auftauchen.

Browser-Native Lazy Loading (einfachste Lösung)

Moderne Browser unterstützen Lazy Loading nativ. Sie müssen lediglich das loading="lazy"-Attribut zum <img>-Tag hinzufügen:

<img src="bild.jpg" loading="lazy" alt="Beschreibung des Bildes">

Für WordPress-Nutzer: Ab WordPress 5.5 ist Lazy Loading standardmässig aktiviert. Sie müssen also nichts weiter tun – WordPress fügt das loading="lazy"-Attribut automatisch hinzu.

Wichtige Ausnahme: Above-the-Fold-Bilder

Bilder, die sofort beim Seitenaufruf sichtbar sind (z.B. das Hero-Image ganz oben), sollten nicht lazy geladen werden. Warum? Weil der Browser sie sofort darstellen soll – Lazy Loading würde hier die Ladezeit künstlich verlängern.

In WordPress können Sie das steuern, indem Sie bei bestimmten Bildern das loading-Attribut manuell auf eager setzen oder ein Plugin nutzen, das dies automatisch regelt.

Messbarer Effekt

Bei Artikeln mit vielen Bildern kann Lazy Loading die initiale Ladezeit um 30 bis 50 Prozent reduzieren. Vor allem auf mobilen Geräten mit langsamer Internetverbindung ist der Unterschied spürbar.

5. Alt-Texte & SEO – oft vergessen, enorm wichtig

Alt-Texte sind kurze Beschreibungen Ihrer Bilder, die im HTML-Code hinterlegt werden. Sie werden oft vernachlässigt – dabei erfüllen sie gleich drei wichtige Funktionen:

1. Barrierefreiheit

Menschen, die Screenreader verwenden (z.B. sehbehinderte Personen), bekommen Alt-Texte vorgelesen. So wissen sie, was auf dem Bild zu sehen ist.

2. SEO

Suchmaschinen wie Google können Bilder nicht "sehen" – sie verlassen sich auf Alt-Texte, um zu verstehen, was auf einem Bild dargestellt ist. Gut formulierte Alt-Texte verbessern Ihre Chancen, in der Google-Bildersuche gefunden zu werden.

3. Fallback

Wenn ein Bild aus irgendeinem Grund nicht geladen werden kann (z.B. bei Verbindungsproblemen), wird der Alt-Text angezeigt.

Richtig formulieren

Ein guter Alt-Text ist präzise und beschreibend, aber nicht überladen.

❌ Schlecht:

• bild123.jpg
• Bild
• Leeres Alt-Attribut bei inhaltlich relevanten Bildern

✅ Gut:

• Rotes Elektroauto lädt an Ladestation vor modernem Bürogebäude
• Screenshot der WordPress-Mediathek mit markiertem Upload-Button
• Balkendiagramm zeigt Umsatzentwicklung 2020–2025

Praxis-Tipp: Bei rein dekorativen Bildern (z.B. Trennlinien, Hintergrundmuster) können Sie ein leeres Alt-Attribut verwenden (alt=""), damit Screenreader sie ignorieren.

KI kann helfen

Moderne KI-Tools wie ChatGPT können Ihnen helfen, Alt-Texte zu formulieren. Laden Sie einfach ein Bild hoch und bitten Sie das Tool, eine Beschreibung zu erstellen. Prüfen Sie die Vorschläge aber immer selbst – manchmal erkennen KIs den Kontext nicht korrekt.

6. Fortgeschrittene Tricks

Wenn Sie die bisherigen Punkte umgesetzt haben, ist Ihre Website bereits deutlich schneller. Für alle, die noch einen Schritt weitergehen wollen, gibt es ein paar fortgeschrittene Techniken.

A) Responsive Images im Code: Das <picture>-Element

Mit dem <picture>-Element können Sie mehrere Bildformate bereitstellen – der Browser wählt automatisch das beste aus:

<picture>
  <source srcset="bild.avif" type="image/avif">
  <source srcset="bild.webp" type="image/webp">
  <img src="bild.jpg" alt="Beschreibung">
</picture>

Moderne Browser laden das AVIF-Bild, ältere greifen auf WebP zurück, und ganz alte Browser bekommen das JPEG. WordPress nutzt ähnliche Techniken teilweise automatisch – wer seine Website selbst programmiert, kann das <picture>-Element gezielt einsetzen.

B) Kritische Ressourcen preloaden

Wenn Sie wissen, dass ein bestimmtes Bild sofort sichtbar sein muss (z.B. Ihr Logo oder das Hero-Image), können Sie dem Browser sagen, dass er es mit höchster Priorität laden soll:

<link rel="preload" as="image" href="hero.webp">

Das sollten Sie aber sparsam einsetzen – zu viele Preload-Anweisungen können den gegenteiligen Effekt haben und die Seite ausbremsen.

7. Checkliste – so optimieren Sie Ihre bestehende Website

Sie wissen jetzt, worauf es ankommt. Aber wie gehen Sie in der Praxis vor, wenn Sie eine bestehende Website optimieren wollen? Hier eine Schritt-für-Schritt-Anleitung:

Schritt 1: Inventur machen

Verschaffen Sie sich einen Überblick über den aktuellen Zustand Ihrer Website. Tools wie Google PageSpeed Insights, GTmetrix oder WebPageTest zeigen Ihnen, welche Bilder am schwersten sind und wo der grösste Optimierungsbedarf besteht.

Worauf achten:

• Bilder über 500 KB sollten alarmieren
• Der Wert "Largest Contentful Paint" (LCP) zeigt, wie lange es dauert, bis das grösste sichtbare Element (oft ein Bild) geladen ist

Schritt 2: Quick-Wins umsetzen

Konzentrieren Sie sich zunächst auf die grössten Bilder:

1. Identifizieren Sie die 10 schwersten Bilder auf Ihrer Website
2. Komprimieren Sie sie mit einem Tool wie TinyPNG oder Squoosh
3. Laden Sie sie neu hoch und ersetzen Sie die alten Versionen

Allein diese Massnahme kann Ihre Website um 30 bis 40 Prozent schneller machen.

Schritt 3: WordPress-spezifische Optimierungen

Wenn Sie WordPress nutzen:

• Installieren Sie ein Optimierungs-Plugin wie ShortPixel oder Imagify
• Nutzen Sie die Bulk-Funktion, um alle bestehenden Bilder in der Mediathek zu optimieren
• Prüfen Sie unter Einstellungen → Medien, welche Bildgrössen generiert werden, und deaktivieren Sie unnötige

Schritt 4: Lazy Loading aktivieren

Falls Ihre WordPress-Version älter als 5.5 ist, aktualisieren Sie sie. Ansonsten ist Lazy Loading bereits aktiv. Bei anderen CMS oder selbstprogrammierten Websites fügen Sie das loading="lazy"-Attribut zu Ihren <img>-Tags hinzu.

Schritt 5: Alt-Texte überprüfen

Gehen Sie Ihre wichtigsten Seiten durch und prüfen Sie, ob alle Bilder sinnvolle Alt-Texte haben. In WordPress sehen Sie das in der Mediathek oder direkt beim Bearbeiten einer Seite.

Schritt 6: Erfolg messen

Führen Sie nach den Optimierungen erneut einen Test mit PageSpeed Insights durch. Achten Sie besonders auf:

• Largest Contentful Paint (LCP): Sollte unter 2,5 Sekunden liegen
• Total Blocking Time (TBT): Sollte unter 200 ms liegen
• First Contentful Paint (FCP): Sollte unter 1,8 Sekunden liegen

Realistisches Ziel: Selbst ohne Profi-Kenntnisse können Sie in ein bis zwei Stunden Ihre Website spürbar schneller machen. Die meisten Websites haben enormes Optimierungspotenzial – Sie müssen es nur ausschöpfen.

Fazit: Kleine Änderungen, grosse Wirkung

Bilder gehören zu den grössten Performance-Killern im Web – aber auch zu den am einfachsten zu optimierenden Elementen. Mit den richtigen Bildformaten, gezielter Kompression, sinnvollen Dimensionen und Lazy Loading schaffen Sie es, Ihre Website deutlich schneller zu machen, ohne auf visuelle Qualität zu verzichten.

Die 5 wichtigsten Takeaways:

1. Nutzen Sie WebP statt JPEG (mit JPEG als Fallback für alte Browser)
2. Komprimieren Sie Bilder vor dem Upload mit Tools wie TinyPNG oder Squoosh
3. Laden Sie Bilder nicht grösser hoch als nötig – maximal 2'000 Pixel Breite für Hero-Images
4. Aktivieren Sie Lazy Loading (in WordPress ab Version 5.5 standardmässig aktiv)
5. Vergessen Sie Alt-Texte nicht – sie helfen bei SEO und Barrierefreiheit

Eine schnellere Website verbessert nicht nur das Nutzererlebnis, sondern auch Ihr Ranking in Suchmaschinen. Google bewertet die Ladezeit mittlerweile als wichtigen Ranking-Faktor – vor allem auf mobilen Geräten.