Wie bringst du 8 MB auf unter 200 KB, ohne dass es jemand sieht?
30 Bilder, 240 MB, eine Deadline
Freitag, 14:00 Uhr im Produktmanagement. Auf deinem Bildschirm liegen 30 Produktfotos vom Herstellerportal. Jedes Bild: 5000 x 3300 Pixel, rund 8 MB. Die Hintergründe sehen alle anders aus: grau, Holztisch, schief fotografiert. Die Teamleitung will die Produkte bis Montagmorgen im Shop haben.
Lädst du die Bilder unverändert hoch, braucht die Kategorieseite über 12 Sekunden zum Laden. Mobile Kundschaft bricht bei mehr als 3 Sekunden ab. Zwei Aufgaben stehen an: Dateigröße runter ohne sichtbaren Qualitätsverlust, und ein einheitliches Erscheinungsbild für alle 30 Bilder.
Komprimierung in drei Stufen
Öffne ein Bild in deiner Bildbearbeitungssoftware (z.B. Photoshop, GIMP oder Squoosh im Browser). Speichere es als JPEG mit Qualitätsstufe 80 %. Aus 8 MB werden rund 180 KB, also unter der 200-KB-Grenze. Am Bildschirm siehst du keinen Unterschied zum Original.
Senkst du die Qualität auf 30 %, schrumpft die Datei auf 45 KB. Jetzt werden Blockartefakte sichtbar: unscharfe Kanten, verwischte Details. Das schadet dem Produkteindruck und dem Suchmaschinenranking, weil Google Bildqualität als Rankingfaktor einbezieht.
Speichere zusätzlich im WebP-Format. Bei gleicher sichtbarer Qualität ist die Datei nochmals rund 30 % kleiner als JPEG. Moderne Browser unterstützen WebP, ältere bekommen die JPEG-Variante als Fallback.
🤔 Frage dich: Schätze: Dein Original hat 8 MB. Wie viel Prozent der Originalgröße bleiben übrig, wenn du auf JPEG Qualität 80 % komprimierst?
Warum sehen professionelle Shops so aufgeräumt aus?
Quadratisch, freigestellt, einheitlich benannt
Die Dateigröße stimmt jetzt. Aber im Kategorie-Raster springen die Bilder noch durcheinander: verschiedene Hintergründe, Hoch- und Querformat gemischt, sichtbarer Versatz.
Professionelle Shops lösen das mit drei Standards:
- Schneide jedes Bild auf ein quadratisches Format zu (z.B. 1000 x 1000 Pixel). Im Raster stehen alle Produkte bündig untereinander, kein Versatz, keine Lücken.
- Stelle das Produkt frei und setze es auf einen weißen Hintergrund (#FFFFFF). Das lenkt den Blick aufs Produkt und wirkt auf allen Endgeräten neutral.
- Benenne jede Datei nach einem einheitlichen Schema, z.B.
artikelnummer_01.jpg. Das erleichtert die Zuordnung im Shopsystem und verhindert doppelte Uploads.
Ergebnis: 30 Bilder, unter 2 Sekunden Ladezeit
Aus 30 Bildern à 8 MB sind 30 Bilder à 150-180 KB geworden, jeweils in JPEG und WebP. Alle quadratisch, alle freigestellt, alle einheitlich benannt. Die Kategorieseite lädt in unter 2 Sekunden statt in 12.
🧑🏫 Erkläre es im Kopf: Eine neue Auszubildende Person fragt dich, warum Produktbilder im Shop komprimiert UND standardisiert werden müssen - nicht nur eins von beiden. Wie erklärst du den Zusammenhang zwischen Ladezeit und Erscheinungsbild in drei Sätzen?
Teste dein Wissen
Du sollst 30 hochauflösende Herstellerfotos für den Onlineshop aufbereiten. Warum ist die Konvertierung in WebP oder AVIF gegenüber dem originalen JPEG-Format sinnvoll?