Bild komprimieren für Website & Shop: Anleitung

Wenn du ein Bild komprimieren willst, ohne dass man es sieht, reichen drei Schritte: Bring es auf die Größe, in der es tatsächlich angezeigt wird. Speichere es in einem modernen Format wie WebP. Und komprimiere es mit einer Qualität zwischen 75 und 85. So schrumpft ein Foto von mehreren Megabyte meist auf wenige hundert Kilobyte, und mit bloßem Auge fällt der Unterschied kaum auf.

In diesem Ratgeber erklären wir jeden Schritt und zeigen, welches Format wann sinnvoll ist. Außerdem siehst du, wie du das kostenlos mit dem Bildkompressor von Pictulab erledigst. Das Tool läuft direkt in deinem Browser, deine Fotos werden auf keinen Server hochgeladen.

Warum die Dateigröße deiner Bilder so wichtig ist

Bilder sind meist der größte Brocken auf einer Webseite. Das gilt besonders für Onlineshops mit vielen Produktseiten. Je schwerer die Bilder, desto länger lädt die Seite, und auf dem Smartphone merkt man das noch deutlicher.

Das wirkt sich auf drei Bereiche aus:

• Nutzererlebnis: Eine Produktseite, auf der das Hauptbild ewig lädt, wirkt nachlässig. Viele Besucher warten nicht.
• SEO: Google berücksichtigt die Core Web Vitals. Eine davon ist der LCP (Largest Contentful Paint). Er misst, wie lange es dauert, bis das größte sichtbare Element erscheint, und das ist sehr oft ein Bild. Google stuft einen LCP von 2,5 Sekunden oder weniger als gut ein.
• Datenverbrauch: Wer mit mobilen Daten unterwegs ist, freut sich, wenn er nicht 5 MB laden muss, um sich ein T-Shirt anzusehen.

Die drei Stellschrauben, um ein Bild zu verkleinern

Fast die gesamte Ersparnis steckt in diesen drei Entscheidungen. Am besten gehst du sie in dieser Reihenfolge an.

1. Maße an die tatsächliche Anzeigegröße anpassen

Der häufigste Fehler: Das Foto wird direkt aus Kamera oder Handy hochgeladen, mit 4.000 Pixeln Breite oder mehr, und dann in einem Bereich von 800 Pixeln angezeigt.

Der Browser lädt das komplette Bild herunter und skaliert es erst danach herunter. Du zahlst also die volle Dateigröße, ohne dass das Bild schärfer wirkt.

Ein paar Richtwerte:

• Produktfotos mit Zoom: Eine lange Seite von 1.500 bis 2.000 Pixeln reicht meistens aus. Schau außerdem nach, was dein Shopsystem empfiehlt (Shopify, Shopware, WooCommerce …).
• Header-Bilder und Banner in voller Breite: etwa 1.920 Pixel breit.
• Thumbnails, Icons und Bilder im Blogtext: die Breite, in der sie angezeigt werden, oder das Doppelte, wenn sie auf hochauflösenden Displays scharf aussehen sollen.

Halbierst du Breite und Höhe, hat das Bild nur noch ein Viertel der Pixel. Deshalb spart dieser Schritt am meisten.

2. Das passende Format wählen

Nicht jedes Format eignet sich für alles:

Für Onlineshops ist WebP aktuell die ausgewogenste Wahl: gute Ersparnis, Transparenz bei Bedarf und breite Unterstützung. Liegen deine Bilder als PNG oder JPEG vor, kannst du sie mit dem Formatkonverter von Pictulab in WebP umwandeln.

3. Mit der richtigen Qualität komprimieren

Verlustbehaftete Kompression entfernt Informationen, die das Auge kaum wahrnimmt. Entscheidend ist die Qualitätsstufe:

• 75 bis 85 (bei JPEG oder WebP) ist für Produktfotos meist ein guter Ausgangspunkt.
• Unter 60 tauchen Artefakte auf: Blockbildung, Säume an Kanten und Farbverläufe mit Stufen.
• Über 90 wird die Datei deutlich größer, die Verbesserung sieht man aber kaum.

Einen magischen Wert gibt es nicht. Ein Foto mit vielen Details, etwa Stoffstrukturen oder Schmuck, verträgt Kompression schlechter als ein glattes Produkt auf weißem Hintergrund. Prüf das Ergebnis immer in 100-%-Ansicht, bevor du es übernimmst.

So kannst du ein Bild kostenlos mit Pictulab komprimieren

Die Web-Tools von Pictulab sind kostenlos und erledigen alles in deinem Browser. Deine Bilder werden auf keinen Server hochgeladen. Das ist praktisch, wenn du mit Produktfotos arbeitest, die noch nicht veröffentlicht sind.

1. Öffne das Tool Bild komprimieren und zieh deine Dateien hinein.
2. Stell die Qualität ein. Starte bei etwa 80 und vergleiche vorher und nachher.
3. Wandle bei Bedarf das Format um, zum Beispiel mit Bild umwandeln von PNG in WebP.
4. Lade das Ergebnis herunter und lade es in deine Website oder deinen Shop hoch.

Da alles auf deinem Gerät passiert, hängt die Geschwindigkeit von deinem Rechner ab und nicht von deiner Internetverbindung.

Zusätzliche Tipps für Onlineshops

Wenn du online verkaufst, helfen dir ein paar weitere Kniffe, deine Produktseiten schlank zu halten.

Saubere, einheitliche Hintergründe verwenden

Ein weißer oder einfarbiger Hintergrund lässt sich viel besser komprimieren als einer mit Strukturen, Bildrauschen oder unregelmäßigen Schatten. Sind deine Fotos vor improvisierten Hintergründen entstanden, kannst du den Hintergrund entfernen und das Produkt auf eine einheitliche Farbe setzen. Das spart Dateigröße und sorgt für einen stimmigen Katalog.

Metadaten entfernen

Fotos vom Handy oder von der Kamera enthalten EXIF-Daten: Kameramodell, Datum und manchmal den GPS-Standort. Im Web bringen sie nichts, sie kosten Speicherplatz und verraten unter Umständen Dinge, die du nicht teilen willst.

Lazy Loading aktivieren

Mit dem Attribut loading="lazy" werden Bilder weiter unten auf der Seite erst geladen, wenn der Nutzer in ihre Nähe scrollt. Viele Plattformen machen das bereits standardmäßig. Aber Vorsicht: Beim Hauptbild ganz oben solltest du darauf verzichten, sonst verzögert sich der LCP.

Mehrere Bildgrößen ausliefern

Mit srcset wählt der Browser je nach Bildschirm die passende Version. Ein Smartphone lädt dann ein Bild mit 800 Pixeln, ein großer Monitor eines mit 1.600. Die meisten CMS und Shopsysteme erzeugen diese Varianten automatisch, wenn du ein Bild in ausreichender Größe hochlädst.

Häufige Fehler beim Optimieren von Bildern

• Dasselbe JPEG mehrfach komprimieren. Jeder verlustbehaftete Durchgang verschlechtert das Bild. Bewahr immer das Original auf und komprimiere von dort aus.
• PNG für Fotos verwenden. Das lohnt sich nur, wenn du Transparenz brauchst und kein WebP einsetzen kannst.
• Bildgröße nur per CSS ändern. Ist das Bild 4.000 Pixel breit und wird per CSS auf 400 verkleinert, lädt der Nutzer trotzdem die vollen 4.000.
• Beim wichtigsten Produkt zu stark komprimieren. Das Hauptbild der Produktseite verdient etwas mehr Qualität als ein Thumbnail.
• Blog- und Kategoriebilder vergessen. Nicht nur die Produktseiten bringen Gewicht auf die Waage.

So prüfst du, ob es sich gelohnt hat

Sind die Bilder optimiert, miss das Ergebnis:

• PageSpeed Insights von Google analysiert die Seite und zeigt dir Bilder, die sich noch optimieren lassen oder zu groß sind.
• Lighthouse ist in die Chrome-Entwicklertools integriert und liefert einen ähnlichen Bericht direkt in deinem Browser.
• Im Tab Netzwerk derselben Entwicklertools siehst du, wie groß jedes Bild ist, das die Seite lädt.

Kümmere dich zuerst um die Seiten mit den meisten Besuchern: Startseite, wichtigste Kategorien und die Produktseiten deiner Bestseller.

Fang heute an, deine Bilder leichter zu machen

Bilder zu komprimieren gehört zu den einfachsten Optimierungen, die du an deiner Website vornehmen kannst, und bringt dabei spürbar viel. Maße anpassen, in WebP umwandeln, mit Bedacht komprimieren.

Die Pictulab-Tools zum Komprimieren, Umwandeln und Hintergrund-Entfernen sind kostenlos. Und wenn du Produktfotos zusätzlich mit KI erstellen oder verbessern möchtest, siehst du bei jeder Generierung vorab, wie viele Tokens sie kostet. Starte kostenlos – 100 Tokens geschenkt, ohne Kreditkarte.

Das könnte dich auch interessieren:

• [ENLACE: Produktfotos mit weißem Hintergrund für deinen Onlineshop erstellen]
• [ENLACE: WebP, PNG oder JPG: Welches Bildformat für deine Website?]

Häufige Fragen

Wie groß sollte ein Bild für die Website sein?

Einen offiziellen Wert gibt es nicht. Als Orientierung: Die meisten Produktfotos sollten unter etwa 200 KB bleiben, Thumbnails deutlich darunter. Wichtig ist vor allem, dass das Bild die passenden Maße hat und vernünftig komprimiert ist.

Verliert ein Bild beim Komprimieren an Qualität?

Bei verlustbehafteter Kompression gehen Informationen verloren. Mit einer Qualität zwischen 75 und 85 ist der Unterschied mit bloßem Auge aber selten zu erkennen. Das Verkleinern auf die tatsächliche Anzeigegröße verschlechtert das, was der Nutzer sieht, ebenfalls nicht.

Was ist besser, WebP oder AVIF?

AVIF erzeugt meist kleinere Dateien, braucht aber länger zum Kodieren, und manche Plattformen und Programme unterstützen es noch nicht. WebP ist breiter kompatibel und für die meisten Onlineshops eine sichere Wahl.

Ist es sicher, Bilder online zu komprimieren?

Das hängt vom Tool ab. Bei den Web-Tools von Pictulab passieren Komprimieren und Umwandeln in deinem Browser, die Bilder werden auf keinen Server hochgeladen.

Kann ich ein Bild auch am Handy komprimieren?

Ja. Da die Tools im Browser laufen, kannst du sie auch auf dem Smartphone nutzen, ohne etwas zu installieren. Bei vielen Fotos oder sehr großen Dateien geht es am Computer allerdings schneller.