Bilder richtig einsetzen: So wird deine Website schneller

Die gute Nachricht: Du brauchst keine Vorkenntnisse, um deine Website deutlich schneller zu machen. In diesem Artikel zeigen wir dir Schritt für Schritt, wie du Bilder richtig einsetzt. Am Ende wartet eine praktische Checkliste, mit der du deine Website ganz einfach optimieren kannst.

1. Welches Bildformat wofür?

Es gibt verschiedene Bildformate – und jedes hat seine Stärken. Hier ein Überblick:

JPEG – für Fotos

JPEG ist das klassische Format für Fotos. Es funktioniert auf allen Geräten und Browsern. Perfekt für Produktfotos, Landschaftsbilder oder Portraits.

PNG – für Grafiken und Logos

PNG eignet sich für Grafiken, Screenshots oder Logos – besonders wenn sie transparente Bereiche haben. Texte und scharfe Kanten werden perfekt dargestellt. Nachteil: PNG-Dateien sind oft größer als JPEGs.

WebP – das moderne Format

WebP ist neuer als JPEG und macht Bilder kleiner bei gleicher Qualität. Viele moderne Websites nutzen WebP bereits. WordPress unterstützt es ab Version 5.8 automatisch. Ältere Browser können WebP nicht darstellen – deshalb solltest du ein JPEG als Reserve bereithalten.

SVG – für Logos und Icons

SVG ist perfekt für Logos und Icons. Der Vorteil: Du kannst sie beliebig groß oder klein machen, ohne dass sie unscharf werden. Eine SVG-Datei funktioniert auf jedem Bildschirm – egal ob Handy oder großer Monitor.

Welches Format sollst du wann nehmen?

Tipp: Probiere einfach aus, ob dein System WebP unterstützt. Bei WordPress (ab Version 5.8) funktioniert das ohne Probleme.

2. Bilder komprimieren – der wichtigste Schritt

Hier kannst du am meisten rausholen: Ein Foto vom Handy wiegt oft 3 bis 4 MB. Richtig optimiert sind es nur noch 150 bis 300 KB. Das ist 10- bis 20-mal weniger!

Vor dem Upload komprimieren (am besten)

Am einfachsten ist es, Bilder schon vor dem Hochladen zu verkleinern. So sparst du Speicherplatz und deine Website lädt schneller.

Online-Tools – kostenlos und einfach

Tools wie TinyPNG oder Squoosh.app sind perfekt für Einsteiger:

1. Bild hochladen
2. Automatisch verkleinern lassen
3. Fertiges Bild runterladen und auf deiner Website hochladen

Mit Squoosh.app kannst du auch verschiedene Formate ausprobieren und direkt sehen, wie groß die Datei wird.

Desktop-Programme – für viele Bilder

Wenn du öfter Bilder optimierst, sind Programme wie ImageOptim (Mac) oder FileOptimizer (Windows) praktisch. Die verkleinern Bilder automatisch, ohne dass sie schlechter aussehen.

WordPress-Plugins – automatisch optimieren

Wenn du WordPress nutzt, können Plugins die Arbeit für dich übernehmen. ShortPixel, Imagify oder Smush komprimieren Bilder automatisch beim Hochladen.

Wichtig zu wissen:

• Die meisten Plugins sind bis zu einer bestimmten Anzahl kostenlos (z.B. 100 Bilder pro Monat)
• Sie können deine Website etwas langsamer machen
• Die manuelle Optimierung ist oft besser

Probier's aus: Lade ein Foto auf deine Website und schau dir die Größe an. Ist es größer als 500 KB? Dann solltest du es verkleinern. Ein normales Foto sollte zwischen 100 und 300 KB wiegen.

3. Die richtige Bildgröße

Viele Handys machen Fotos mit 4.000 x 3.000 Pixeln. Das ist viel zu groß für eine Website! Wenn du so ein Bild hochlädst, wird es zwar kleiner angezeigt – aber der Browser muss trotzdem die riesige Datei laden.

Wie groß sollten Bilder sein?

• Große Bilder (oben auf der Startseite): Maximal 2.000 Pixel breit
• Normale Bilder im Text: Maximal 1.200 Pixel breit
• Kleine Vorschaubilder: 300 bis 600 Pixel breit

WordPress macht's automatisch: WordPress erstellt beim Hochladen mehrere Versionen deines Bildes in verschiedenen Größen. Handys bekommen die kleine Version, Computer die große. Trotzdem solltest du das Original nicht riesig hochladen, weil das Speicherplatz kostet.

Tipp für WordPress: Geh zu Einstellungen → Medien und schau, welche Bildgrößen erstellt werden. Wenn Größen dabei sind, die du nicht brauchst, schalte sie aus.

4. Lazy Loading – Bilder erst laden, wenn sie sichtbar sind

Stell dir vor, du hast einen langen Artikel mit 20 Bildern. Warum sollten alle 20 Bilder sofort geladen werden, wenn du am Anfang nur die ersten drei siehst?

Lazy Loading lädt Bilder erst, wenn du zu ihnen scrollst. Das macht deine Website beim ersten Aufruf viel schneller.

So funktioniert's in WordPress

Gute Nachricht: Ab WordPress 5.5 ist Lazy Loading automatisch aktiviert. Du musst nichts tun!

Eine wichtige Ausnahme

Das allererste Bild (z.B. ganz oben auf deiner Startseite) sollte sofort geladen werden. Nur bei den Bildern weiter unten macht Lazy Loading Sinn.

Der Effekt: Bei Seiten mit vielen Bildern kann Lazy Loading die Ladezeit um 30 bis 50 Prozent reduzieren.

5. Alt-Texte nicht vergessen

Alt-Texte sind kurze Beschreibungen deiner Bilder. Sie sind wichtig – auch wenn man sie meist nicht sieht.

Warum sind Alt-Texte wichtig?

1. Barrierefreiheit: Menschen mit Sehbehinderung lassen sich Alt-Texte vorlesen
2. Google: Google kann Bilder nicht sehen, sondern liest den Alt-Text
3. Wenn Bilder nicht laden: Der Alt-Text wird angezeigt

So schreibst du gute Alt-Texte

❌ Nicht gut:

• bild123.jpg
• Bild

✅ Gut:

• Rotes Elektroauto lädt an Ladestation
• Screenshot vom WordPress-Upload-Bereich

Tipp: KI-Tools wie ChatGPT können dir helfen, Alt-Texte zu schreiben. Prüf die Vorschläge aber immer selbst.

6. Für Fortgeschrittene: Noch mehr rausholen

Wenn du die bisherigen Schritte gemacht hast, ist deine Website schon viel schneller. Hier noch zwei Profi-Tricks:

Mehrere Formate anbieten

Mit dem sogenannten <picture>-Element kannst du moderne und alte Bildformate gleichzeitig anbieten. Der Browser wählt dann automatisch das beste aus. WordPress macht das zum Teil schon von selbst.

Wichtige Bilder vorher laden

Dein Logo oder das große Bild ganz oben kannst du dem Browser als besonders wichtig markieren. Dann lädt er es zuerst. Das funktioniert mit einem kleinen Code-Schnipsel – aber das ist optional und nur für Fortgeschrittene interessant.

7. So optimierst du deine bestehende Website

Du weißt jetzt, worauf es ankommt. Aber wie setzt du das konkret um? Hier eine einfache Anleitung:

Schritt 1: Schau dir den Ist-Zustand an

Tools wie Google PageSpeed Insights oder GTmetrix zeigen dir, wie schnell deine Website ist und welche Bilder zu groß sind.

Worauf achten:

• Bilder über 500 KB sind zu groß
• Der Wert „Largest Contentful Paint" sollte unter 2,5 Sekunden liegen

Schritt 2: Die größten Bilder zuerst

1. Such die 10 größten Bilder auf deiner Website
2. Verkleinere sie mit TinyPNG oder Squoosh
3. Lade sie neu hoch

Das allein kann deine Website schon um 30 bis 40 Prozent schneller machen!

Schritt 3: WordPress optimieren

Wenn du WordPress nutzt:

• Installiere ein Plugin wie ShortPixel oder Imagify
• Lass alle bisherigen Bilder optimieren (Bulk-Funktion)
• Prüf die Einstellungen unter Einstellungen → Medien

Schritt 4: Lazy Loading aktivieren

Bei WordPress ab Version 5.5 läuft das automatisch. Sonst: Update machen!

Schritt 5: Alt-Texte prüfen

Geh deine wichtigsten Seiten durch. Haben alle Bilder sinnvolle Beschreibungen? In WordPress siehst du das direkt in der Mediathek.

Schritt 6: Erfolg messen

Mach nochmal einen Test mit PageSpeed Insights. Du solltest jetzt eine deutlich bessere Bewertung sehen!

Das schaffst du: Auch ohne Vorkenntnisse kannst du in ein bis zwei Stunden deine Website merklich schneller machen.

Fazit: Das Wichtigste in Kürze

Bilder sind oft der Grund, warum Websites langsam sind. Aber mit ein paar einfachen Schritten machst du deine Seite deutlich schneller:

Die 5 wichtigsten Punkte:

1. Nutze WebP (mit JPEG als Reserve)
2. Verkleinere Bilder vor dem Upload mit Tools wie TinyPNG
3. Lade Bilder nicht zu groß hoch – maximal 2.000 Pixel breit
4. Aktiviere Lazy Loading (bei WordPress ab Version 5.5 automatisch)
5. Schreib Alt-Texte – wichtig für Google und Barrierefreiheit

Eine schnellere Website macht nicht nur deine Besucher glücklicher, sondern hilft auch bei Google. Die Ladezeit ist mittlerweile ein wichtiger Faktor fürs Ranking.

Wichtig: Bevor du größere Änderungen machst, erstell ein Backup deiner Website. In unserem kommenden Artikel „Backup-Strategie 2026" zeigen wir dir, wie das geht.

Wenn du Fragen hast oder Unterstützung brauchst, melde dich bei unserem Support-Team. Wir helfen gerne!