Bilder richtig einsetzen: Der Guide für schnellere Websites

Die gute Nachricht: Du brauchst kein Studium in Bildbearbeitung, um deine Website deutlich schneller zu machen. In diesem Artikel erfährst du alles Wichtige über Bildformate, Kompression, Dimensionen und moderne Techniken wie Lazy Loading. Am Ende wartet eine praktische Checkliste, mit der du deine bestehende Website Schritt für Schritt optimieren kannst.

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 du komprimierst, 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ößer 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äßig (ab Version 5.8). Der einzige Haken: Sehr alte Browser (etwa Internet Explorer) können WebP nicht darstellen – weshalb du in manchen Fällen ein JPEG als Fallback bereitstellen solltest.

AVIF – die Zukunft

AVIF ist noch neuer als WebP und komprimiert nochmals besser. Die Dateigrößen 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öße 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 große Vorteil: Eine einzige SVG-Datei funktioniert auf jedem Display – vom kleinen Smartphone bis zum hochauflösenden 4K-Monitor.

Praktische Entscheidungshilfe

Praxis-Tipp: Teste, ob dein CMS WebP unterstützt, indem du ein WebP-Bild hochlädst. Bei WordPress funktioniert das ab Version 5.8 problemlos.

2. Kompression – der größte 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 sparst du Speicherplatz auf dem Server und vermeidest, dass dein 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 runterladen und auf deiner Website hochladen

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

Für Fortgeschrittene: Desktop-Tools

Wenn du regelmäßig viele Bilder optimierst, lohnen sich Desktop-Programme wie ImageOptim (Mac) oder FileOptimizer (Windows). Diese Tools komprimieren Bilder verlustfrei oder mit minimalen Qualitätseinbußen – 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 du WordPress nutzt, kannst du 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 deine 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ößere Mengen. ShortPixel und Imagify ermöglichen es außerdem, bereits hochgeladene Bilder nachträglich in der Mediathek zu optimieren – praktisch, wenn du eine bestehende Website überarbeiten willst.

Praxis-Test: Lade ein Foto auf deine Website hoch und prüfe die Dateigröße. Liegt sie deutlich über 500 KB, solltest du handeln. Ein durchschnittliches Produktfoto sollte zwischen 100 und 300 KB wiegen.

3. Die richtige Größe (Dimensionen)

Ein häufiges Missverständnis: Nur weil ein Bild auf deiner Website in einem 400 Pixel breiten Container dargestellt wird, heißt das nicht, dass es genau 400 Pixel groß sein muss. Es sollte aber auf keinen Fall 4.000 Pixel breit sein!

Das Problem mit zu großen Bildern

Viele Smartphones machen heute Fotos mit 4.000 x 3.000 Pixeln oder mehr. Wenn du diese Bilder unverändert hochlädst, werden sie zwar korrekt skaliert angezeigt – aber der Browser muss trotzdem die gesamte Datei runterladen. Das kostet unnötig Bandbreite und verlängert die Ladezeit erheblich.

Responsive Images: WordPress macht's automatisch

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

Allerdings: Wenn dein 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öße zu bringen.

Faustregeln für Bildgrößen

• 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: Geh zu Einstellungen → Medien und prüfe, welche Bildgrößen dein Theme automatisch generiert. Nicht genutzte Größen fressen nur Speicherplatz. Mit Plugins wie Regenerate Thumbnails kannst du alte Bilder nachträglich anpassen, wenn du deine Einstellungen änderst.

4. Lazy Loading – nur laden, was sichtbar ist

Stell dir einen langen Blogartikel mit 20 Bildern vor. Warum sollten alle 20 Bilder beim Seitenaufruf geladen werden, wenn du als Besucher zunächst nur die ersten drei siehst? 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. Du musst 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äßig aktiviert. Du musst 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 kannst du das steuern, indem du bei bestimmten Bildern das loading-Attribut manuell auf eager setzt oder ein Plugin nutzt, 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 deiner 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 deine 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) kannst du ein leeres Alt-Attribut verwenden (alt=""), damit Screenreader sie ignorieren.

KI kann helfen

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

6. Fortgeschrittene Tricks

Wenn du die bisherigen Punkte umgesetzt hast, ist deine 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 kannst du 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 du weißt, dass ein bestimmtes Bild sofort sichtbar sein muss (z.B. dein Logo oder das Hero-Image), kannst du dem Browser sagen, dass er es mit höchster Priorität laden soll:

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

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

7. Checkliste – so optimierst du deine bestehende Website

Du weißt jetzt, worauf es ankommt. Aber wie gehst du in der Praxis vor, wenn du eine bestehende Website optimieren willst? Hier eine Schritt-für-Schritt-Anleitung:

Schritt 1: Inventur machen

Verschaffe dir einen Überblick über den aktuellen Zustand deiner Website. Tools wie Google PageSpeed Insights, GTmetrix oder WebPageTest zeigen dir, welche Bilder am schwersten sind und wo der größte Optimierungsbedarf besteht.

Worauf achten:

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

Schritt 2: Quick-Wins umsetzen

Konzentriere dich zunächst auf die größten Bilder:

1. Identifiziere die 10 schwersten Bilder auf deiner Website
2. Komprimiere sie mit einem Tool wie TinyPNG oder Squoosh
3. Lade sie neu hoch und ersetze die alten Versionen

Allein diese Maßnahme kann deine Website um 30 bis 40 Prozent schneller machen.

Schritt 3: WordPress-spezifische Optimierungen

Wenn du WordPress nutzt:

• Installiere ein Optimierungs-Plugin wie ShortPixel oder Imagify
• Nutze die Bulk-Funktion, um alle bestehenden Bilder in der Mediathek zu optimieren
• Prüfe unter Einstellungen → Medien, welche Bildgrößen generiert werden, und deaktiviere unnötige

Schritt 4: Lazy Loading aktivieren

Falls deine WordPress-Version älter als 5.5 ist, aktualisiere sie. Ansonsten ist Lazy Loading bereits aktiv. Bei anderen CMS oder selbstprogrammierten Websites fügst du das loading="lazy"-Attribut zu deinen <img>-Tags hinzu.

Schritt 5: Alt-Texte überprüfen

Geh deine wichtigsten Seiten durch und prüfe, ob alle Bilder sinnvolle Alt-Texte haben. In WordPress siehst du das in der Mediathek oder direkt beim Bearbeiten einer Seite.

Schritt 6: Erfolg messen

Führe nach den Optimierungen erneut einen Test mit PageSpeed Insights durch. Achte 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 kannst du in ein bis zwei Stunden deine Website spürbar schneller machen. Die meisten Websites haben enormes Optimierungspotenzial – du musst es nur ausschöpfen.

Fazit: Kleine Änderungen, große Wirkung

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

Die 5 wichtigsten Takeaways:

1. Nutze WebP statt JPEG (mit JPEG als Fallback für alte Browser)
2. Komprimiere Bilder vor dem Upload mit Tools wie TinyPNG oder Squoosh
3. Lade Bilder nicht größer hoch als nötig – maximal 2.000 Pixel Breite für Hero-Images
4. Aktiviere Lazy Loading (in WordPress ab Version 5.5 standardmäßig aktiv)
5. Vergiss Alt-Texte nicht – sie helfen bei SEO und Barrierefreiheit

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

Bevor du größere Änderungen an deiner Website vornimmst, solltest du übrigens immer ein Backup erstellen. Sicher ist sicher...