Bilder für die Website optimieren und komprimieren

1. Einführung: Bilder für die Website optimieren

Das schwerste Element Ihrer Website ist meistens unsichtbar. Es ist nicht der Code, nicht die Schrift, nicht das Tracking. Es sind Ihre Bilder. Auf der durchschnittlichen Seite machen Bilddateien den größten Anteil am Datenvolumen aus, und genau dort entscheidet sich, ob Ihre Seite in einer Sekunde steht oder ob der Besucher auf den weißen Bildschirm starrt. Bilder für Ihre Website zu optimieren ist deshalb kein Detail für Technik-Fans, sondern einer der wirksamsten Hebel für Tempo, Nutzererlebnis und Sichtbarkeit.

Auf einen Blick:

• Bilder sind auf der durchschnittlichen Website das schwerste Element, im Median rund 1.026 Kilobyte pro Desktop-Seite (HTTP Archive Web Almanac).
• Verlustbehaftete WebP-Bilder sind etwa 25 bis 34 Prozent kleiner als vergleichbare JPEG-Dateien (Google).
• Verlustfreie WebP-Bilder sind rund 26 Prozent kleiner als PNG-Dateien (Google).
• Lazy Loading lädt Bilder erst, wenn sie in den sichtbaren Bereich kommen, und verkürzt so die anfängliche Ladezeit (MDN Web Docs).
• In der Kreativschock-Praxis erreichen wir nach konsequenter Bildkomprimierung regelmäßig PageSpeed-Werte von über 90 Punkten (Kreativschock).

Bilder für die Website zu optimieren bedeutet, jede Bilddatei so vorzubereiten, dass sie bei guter Bildqualität die kleinstmögliche Dateigröße hat. Dazu gehören das passende Dateiformat wie JPEG, PNG, WebP oder SVG, die richtige Bildgröße in Pixel, eine Komprimierung der Dateigröße sowie ein aussagekräftiger Dateiname und Alt-Text. Ziel ist ein Bild, das scharf aussieht und trotzdem schnell lädt.

Dieser Leitfaden zeigt Ihnen den kompletten Weg. Vom richtigen Format über die ideale Bildgröße und die besten Tools bis zum Lazy Loading. Wir richten uns an alle, die ihre Seite selbst pflegen, und an alle, die das lieber abgeben. Wenn Sie Ihre Bilder gar nicht selbst anfassen möchten, übernimmt das professionelle Webdesign aus Göttingen für Sie.

2. Warum Sie Bilder optimieren sollten

Ein unoptimiertes Bild ist wie ein Möbelstück, das im Originalkarton durch die Wohnungstür soll. Es passt am Ende rein, aber es dauert, und solange blockiert es den Eingang. Genauso blockiert ein zu großes Bild den Seitenaufbau, während der Browser Kilobyte für Kilobyte herunterlädt.

Die Optimierung von Bildern zahlt auf vier Konten gleichzeitig ein.

• Ladezeit: Kleinere Bilddateien bedeuten weniger Daten und damit eine schnellere Ladegeschwindigkeit. Bilder optimieren ist der direkteste Weg zu einer Seite, die schneller geladen wird.
• Nutzererlebnis: Wer nicht warten muss, bleibt. Eine flüssige Seite fühlt sich hochwertig an, eine ruckelnde billig.
• SEO: Google bewertet die Ladezeit als Teil der Core Web Vitals. Optimierte Bilder mit gutem Dateinamen und Alt-Text ranken zudem in der Google-Bildersuche. Bildoptimierung ist damit ein echter Hebel für die Suchmaschinenoptimierung und Ihr Ranking.
• Speicherplatz: Schlanke Bilddateien sparen Speicherplatz auf dem Server und beschleunigen Backups.

So sieht es aus: Laut dem HTTP Archive Web Almanac sind Bilder mit im Median rund 1.026 Kilobyte pro Desktop-Seite der größte einzelne Bestandteil des Seitengewichts, schwerer als JavaScript oder Schriften. Wer das schwerste Element verkleinert, gewinnt am meisten.

Bildoptimierung wirkt damit doppelt: Sie verbessert messbar die Ladezeit der Website und stärkt gleichzeitig Ihre Position bei Suchmaschinen. Beide Effekte greifen ineinander, denn eine schnelle Seite wird von Google bevorzugt und von Nutzern länger besucht. Wie tief Sie dabei gehen sollten, klärt eine SEO-Analyse Ihrer Website.

3. Das richtige Dateiformat: JPEG, PNG, WebP und SVG

Die Wahl des Dateiformats ist die erste und folgenreichste Entscheidung. Dateiformate gibt es viele. Für das Web sind im Grunde vier relevant, dazu GIF als Sonderfall. Fotos und Grafiken stellen dabei unterschiedliche Anforderungen, und jedes Format hat eine klare Aufgabe.

3.1 JPEG, PNG, GIF und SVG im Überblick

• JPEG (JPG): Der Standard für Fotos. JPEG komprimiert verlustbehaftet und erreicht bei Bildern mit vielen Farbverläufen kleine Dateigrößen. Für Produktfotos, Team-Bilder und Hintergründe ist das JPG-Format die erste Wahl.
• PNG: Stark bei Grafiken mit scharfen Kanten und bei Transparenz. Ein Logo mit freigestelltem Hintergrund gehört als PNG ins Web. Der Preis ist eine größere Dateigröße als bei JPEG.
• WebP: Das moderne Format von Google, das die Stärken von JPEG und PNG verbindet. Es beherrscht Transparenz und liefert bei guter Qualität die kleinsten Dateien.
• SVG: Eine Vektorgrafik für Logos, Icons und einfache Illustrationen. Eine SVG ist wie ein Bauplan statt eines fertigen Fotos, sie lässt sich beliebig vergrößern, ohne dass sie verpixelt.
• GIF: Nur noch für kleine animierte Bilder sinnvoll. GIF kennt maximal 256 Farben und ist für Fotos ungeeignet.

3.2 Warum WebP fast immer gewinnt

WebP ist der größte Hebel beim Dateiformat. Die Zahlen sind eindeutig. Google nennt für das eigene Format klare Werte: Verlustbehaftete WebP-Bilder sind 25 bis 34 Prozent kleiner als vergleichbare JPEG-Dateien, verlustfreie WebP-Bilder rund 26 Prozent kleiner als PNG. Ein Drittel weniger Gewicht. Bei gleicher Bildqualität.

WebP ist laut Google „ein modernes Bildformat, das eine überlegene verlustfreie und verlustbehaftete Komprimierung für Bilder im Web bietet“. Im Original: „a modern image format that provides superior lossless and lossy compression for images on the web“. Alle aktuellen Browser unterstützen es. Sie können also bedenkenlos auf WebP setzen. Für sehr alte Browser hinterlegen Sie ein JPEG als Reserve.

Die Faustregel ist simpel: Foto wird zu WebP oder JPEG, Logo mit Transparenz zu WebP oder PNG, Icon zu SVG, Animation zu GIF. Wer diese vier Zuordnungen verinnerlicht, hat die halbe Bildoptimierung schon im Kopf.

4. Bildgröße und Dateigröße richtig wählen

Sie fragen sich jetzt vielleicht: Was ist eigentlich der Unterschied zwischen Bildgröße und Dateigröße? Genau diese Verwechslung kostet die meisten Seiten Tempo.

Die Bildgröße sind die Maße in Pixel, also etwa 1200 Pixel breit und 800 Pixel hoch. Die Dateigröße ist das Gewicht der Datei in Kilobyte. Ein Pixel ist dabei der kleinste Baustein eines Bildes, vergleichbar mit einem einzelnen Fliesenstein in einem Mosaik. Beide Werte hängen zusammen: Je mehr Pixel, desto mehr Daten, desto größer die Datei.

Der häufigste Fehler im Web sieht so aus: Ein Bild kommt mit 5000 Pixeln Breite direkt aus der Kamera. Angezeigt wird es auf der Seite mit 600 Pixeln. Der Browser lädt trotzdem die volle Bildgröße und rechnet sie klein. Das ist, als würden Sie ein Plakat kaufen, um es als Postkarte aufzustellen.

Orientieren Sie sich an diesen Richtwerten für die Pixelmaße und die Dateigröße. Sie verkleinern Bilder vor dem Hochladen genau auf die Breite, in der sie tatsächlich erscheinen.

Einsatz	Breite in Pixel	Maximale Dateigröße	Format
Hero- oder Headerbild	1600 bis 1920 px	150 bis 250 KB	WebP oder JPEG
Bild im Content	800 bis 1200 px	bis 150 KB	WebP oder JPEG
Vorschaubild	400 bis 600 px	bis 60 KB	WebP oder JPEG
Logo	nach Bedarf	bis 30 KB	SVG oder PNG

Als ideale Bildgröße für ein normales Content-Bild gilt eine Breite zwischen 800 und 1200 Pixel bei einer Dateigröße unter 150 Kilobyte. Hero-Bilder dürfen breiter sein, sollten aber 250 Kilobyte selten überschreiten. Logos und Icons gehören als SVG eingebunden, dann spielt die Pixelgröße keine Rolle mehr.

5. Bilder komprimieren: Tools und WordPress Plugins

Komprimierung ist der Schritt, der die Dateigröße spürbar senkt. Es gibt zwei Verfahren. Beide haben ihren Platz.

Die verlustfreie Komprimierung wirft keine Bildinformation weg und reduziert nur die Datenmenge durch cleveres Speichern. Die verlustbehaftete Komprimierung entfernt für das Auge kaum sichtbare Details und erreicht so deutlich kleinere Dateien. Für Fotos im Web ist eine moderate verlustbehaftete Komprimierung fast immer der beste Kompromiss aus Bildqualität und Dateigröße.

5.1 Kostenlose Online-Tools

Diese Tools komprimieren Bilder im Browser, ganz ohne Installation. Sie ziehen die Datei hinein und laden die optimierte Version wieder herunter.

• TinyPNG: Der Klassiker für PNG und JPEG. TinyPNG komprimiert verlustbehaftet und schrumpft Dateien oft um 60 bis 70 Prozent, ohne dass man den Unterschied sieht.
• Squoosh: Das freie Tool von Google zeigt im direkten Vorher-Nachher-Vergleich, wie stark Sie komprimieren können, und exportiert direkt nach WebP.
• Compressnow oder Optimizilla: Praktisch für mehrere Bilder auf einmal, mit Schieberegler für den Kompressionsgrad.

Wer ein Bildbearbeitungsprogramm wie Adobe Photoshop besitzt, nutzt dort die Funktion „Für Web speichern“ und stellt Format, Pixelmaße und Qualität in einem Schritt ein. Für die meisten Selbständigen sind die kostenlosen Online-Tools jedoch völlig ausreichend.

5.2 Plugins für WordPress

Auf WordPress übernehmen Plugins die Arbeit automatisch. Diese Tools zur Bildoptimierung komprimieren hochgeladene Bilder direkt beim Hochladen und konvertieren sie nach WebP, ohne dass Sie jede Datei einzeln anfassen. Gerade große Bilder profitieren davon.

• ShortPixel: Komprimiert verlustfrei oder verlustbehaftet, erzeugt WebP und kann bereits hochgeladene Bilder nachträglich optimieren.
• EWWW Image Optimizer: Optimiert Bilder automatisch beim Hochladen und konvertiert auf Wunsch das Dateiformat.
• Smush: Einfach zu bedienen, ändert Größe und komprimiert Bilder ohne sichtbaren Qualitätsverlust.

Aus der Praxis: In über 15 Jahren Projektarbeit ist die Bildkomprimierung bei uns der erste Griff, wenn eine Seite zu langsam ist. Zusammen mit Caching und dem Entfernen überflüssiger Skripte bringen wir den mobilen PageSpeed-Score so regelmäßig auf über 90 Punkte. Bilder sind fast immer die größte Stellschraube.

Aber Vorsicht: Ein Plugin ersetzt nicht die Vorarbeit. Ein 5000-Pixel-Foto bleibt auch nach der Plugin-Komprimierung unnötig groß, weil das Plugin die Bildgröße in Pixel meist nicht automatisch auf das nötige Maß bringt. Verkleinern Sie die Pixelmaße idealerweise schon vor dem Hochladen.

6. Schritt für Schritt: Bilder optimieren und einbinden

Hier ist der komplette Workflow, mit dem Sie jedes Bild in wenigen Minuten web-fertig machen. Sechs Schritte, immer dieselbe Reihenfolge.

1. Original sichern: Legen Sie eine Kopie des Originalbildes in einem separaten Ordner ab. Sie arbeiten immer mit der Kopie, nie mit dem Original.
2. Zuschneiden: Schneiden Sie das Bild auf den gewünschten Ausschnitt und das passende Seitenverhältnis zu.
3. Bildgröße einstellen: Skalieren Sie das Bild auf die Pixelbreite, in der es auf der Seite tatsächlich erscheint, etwa 1200 Pixel für ein Content-Bild.
4. Format wählen und komprimieren: Exportieren Sie als WebP oder JPEG und reduzieren Sie die Dateigröße so weit, dass das Bild gerade noch scharf ist.
5. Dateinamen vergeben: Benennen Sie die Datei mit einem aussagekräftigen Dateinamen wie rote-ledercouch-wohnzimmer.webp statt IMG_2034.jpg.
6. Hochladen und Alt-Text setzen: Laden Sie das Bild hoch und ergänzen Sie einen beschreibenden Alt-Text.

Der Dateiname und der Alt-Text sind dabei mehr als Pflichtfelder. Der Alt-Text ist eine kurze Bildbeschreibung in einem Satz. Beide sind Ihr direkter Draht zur Google-Bildersuche. WebAIM beschreibt den Zweck von Alt-Text so: „Alternativtext ist ein textueller Ersatz für Nicht-Text-Inhalte auf Webseiten“ (Original: „Alternative text is a textual substitute for non-text content in web pages“). Der Alt-Text hilft also blinden Menschen mit Screenreader und gleichzeitig den Suchmaschinen, den Inhalt eines Bildes zu verstehen.

Optimierte Bilder mit klarem Dateinamen und gutem Alt-Text haben damit auch in der Google-Bildersuche einen echten Vorteil. Sie werden besser eingeordnet und können zusätzlichen Traffic auf Ihre Seite bringen.

7. Lazy Loading und weitere technische Hebel

Sie haben Format, Bildgröße und Komprimierung im Griff. Jetzt kommt die Technik, die beim Ausspielen der Bilder hilft.

Lazy Loading ist der wichtigste dieser Hebel. MDN Web Docs definiert es so: „Lazy Loading ist eine Strategie, Ressourcen als nicht blockierend, also unkritisch, einzustufen und sie nur bei Bedarf zu laden“. Im Original: „a strategy to identify resources as non-blocking (non-critical) and load these only when needed“. Im Klartext: Bilder weiter unten auf der Seite werden erst geladen, wenn der Besucher dorthin scrollt.

Lazy Loading ist wie ein Buffet, bei dem der Kellner erst nachlegt, wenn Sie sich der nächsten Schüssel nähern. Niemand kocht im Voraus für Gäste, die vielleicht nie kommen. In modernen Browsern genügt dafür das Attribut loading="lazy" am Bild, ganz ohne zusätzliches Skript. WordPress setzt es bei neuen Bildern automatisch.

Zwei weitere Hebel runden das Bild ab:

• Responsive Bilder: Mit dem Attribut srcset liefert der Browser auf mobilen Geräten ein kleineres Bild aus als auf dem Desktop. So lädt jedes Gerät nur die Datenmenge, die es wirklich braucht.
• CDN und Caching: Ein Content Delivery Network liefert Bilder von einem Server in der Nähe des Besuchers aus, und Caching speichert sie für den nächsten Aufruf zwischen.

Diese drei Techniken arbeiten zusammen. Lazy Loading verschiebt, was nicht sofort gebraucht wird, responsive Bilder passen die Größe an das Gerät an, und das CDN verkürzt den Weg. Gemeinsam sorgen sie für spürbar kürzere Ladezeiten, ohne dass Sie an der Bildqualität sparen müssen.

8. Häufige Fehler bei der Bildoptimierung

Manche Fehler sehen wir auf Kundenseiten immer wieder. Sie kosten Tempo, ohne dass es jemand merkt.

• Riesige Originale hochladen: Das Foto direkt aus der Kamera mit mehreren Megabyte landet ungekürzt im Content. Häufigster und teuerster Fehler.
• Falsches Format: Ein Foto als PNG bläht die Dateigröße unnötig auf, ein Logo als JPEG wird an den Kanten unsauber.
• Alt-Text vergessen: Ohne Alt-Text bleibt das Bild für Screenreader und Suchmaschinen stumm.
• Zu viele Bilder: Eine endlose Galerie auf der Startseite summiert sich zu einer schweren Seite, selbst wenn jedes Bild optimiert ist.

Unsere Position: Komprimierung allein reicht nicht. Der größte Hebel ist die richtige Bildgröße in Pixel, nicht der Schieberegler im Tool. Wer ein Bild zuerst auf die tatsächlich benötigte Breite skaliert und erst dann komprimiert, spart oft mehr als die Hälfte der Dateigröße, bevor das erste Plugin überhaupt anspringt. Viele Ratgeber springen direkt zur Komprimierung und überspringen genau diesen Schritt.

Und genau das ist der Punkt: Bildoptimierung ist kein einzelner Knopf, sondern eine kurze Kette aus Format, Bildgröße und Komprimierung. Stimmt ein Glied nicht, hilft das beste Tool nur halb.

9. Fazit

Bilder für die Website zu optimieren ist kein Hexenwerk, sondern eine Routine. Format wählen, Bildgröße anpassen, komprimieren, sinnvoll benennen, mit Alt-Text hochladen. Wer diese Schritte einhält, halbiert das Gewicht seiner Seite, oft mehr.

Der Lohn ist konkret: Ihre Galerie erscheint sofort, gestochen scharf, statt zeilenweise von oben nach unten aufzubauen. Auf dem Handy lädt das Hero-Bild, bevor der Daumen den Bildschirm berührt. Besucher bleiben, weil nichts ruckelt, und Google ordnet die schnelle Seite weiter vorne ein. Genau dieses Gefühl einer leichten, schnellen Website ist das Ziel jeder Bildoptimierung.

Fangen Sie mit dem schwersten Bild auf Ihrer Startseite an. Ein einziges optimiertes Hero-Bild bringt oft schon einen messbaren Sprung. Den Rest erledigen Routine und ein Tool, das automatisch komprimiert.

10. Anhang: Checkliste zur Bildoptimierung

Diese Checkliste begleitet Sie bei jedem Bild, das Sie auf Ihre Website hochladen. Drucken Sie sie aus oder legen Sie sie neben den Bildschirm. Beim nächsten Website-Relaunch sparen Sie sich damit viel Nacharbeit.

• Format: Foto als WebP oder JPEG, Grafik mit Transparenz als WebP oder PNG, Logo als SVG.
• Bildgröße: auf die tatsächlich angezeigte Pixelbreite skaliert, nicht größer.
• Dateigröße: Content-Bild unter 150 KB, Hero-Bild unter 250 KB.
• Komprimierung: mit TinyPNG, Squoosh oder einem WordPress-Plugin durchgeführt.
• Dateiname: aussagekräftig und mit Bindestrichen statt Unterstrichen.
• Alt-Text: beschreibt das Bild in einem kurzen Satz.
• Lazy Loading: aktiv, damit Bilder erst beim Scrollen laden.

Kontakt aufnehmen

Sie möchten Ihre Bilder professionell optimieren lassen oder gleich eine schnelle, scharfe Website? Schreiben Sie uns, wir melden uns innerhalb von 24 Stunden:

Disclaimer: Alle genannten Werte zu Bildgröße, Dateigröße und Komprimierung sind Erfahrungs- und Richtwerte aus der Agentur-Praxis. Sie können je nach Website, Layout und Einsatzzweck abweichen. Die verlinkten Quellen wurden zum Zeitpunkt der Veröffentlichung geprüft.