In der heutigen digitalen Welt, insbesondere im E-Commerce, sind Bilder von unschätzbarem Wert. Sie ersetzen das physische Produkt, vermitteln Farbe, Qualität und die Geschichte dahinter. Man sagt nicht umsonst, ein Bild sagt mehr als tausend Worte. Daher ist es unerlässlich, dass Ihre Bilder hochauflösend und gestochen scharf sind. Doch diese Detailfülle hat ihren Preis: Große, hochauflösende Bilder können riesige Dateigrößen haben. Wenn Sie mehrere davon auf Ihrer Website platzieren, kann das schnelle Erlebnis Ihres Online-Shops schnell zur zähen Angelegenheit werden. Dies führt nicht nur dazu, dass Besucher abspringen, sondern wird mit der Zeit auch von Suchmaschinen wie Google bemerkt, was sich negativ auf Ihr SEO auswirken kann.
Im E-Commerce ist es absolut entscheidend, beim Speichern eines Bildes für Ihre Website eine gute Balance zwischen Bildqualität und Dateigröße zu finden. In diesem Artikel zeigen wir Ihnen genau, wie Sie das in Adobe Photoshop erreichen können.
Wenn Sie bisher einfach Produktfotos gemacht und direkt hochgeladen haben, ist dieses Tutorial genau richtig für Sie. Wenn Sie keine formelle Kenntnis oder keinen Prozess zum Speichern von Bildern unter Berücksichtigung der Dateigröße haben, ist dieses Tutorial für Sie. Wenn Ihre Website tonnenweise Bilder enthält und sich träge anfühlt, ist dieses Tutorial für Sie. Wenn Sie noch nicht mit dem Aufbau Ihres Online-Shops begonnen haben, ist dieses Tutorial besonders wichtig für Sie.
Bereit, Ihre Bilder zu optimieren?
Die richtigen Dateiformate für das Web
Es gibt drei Hauptdateiformate, auf die wir uns konzentrieren sollten, wenn wir Bilder für das Web optimieren: GIF, JPG und PNG. Jedes Format hat seine eigenen Stärken und Schwächen, und es ist sehr wichtig, diese zu kennen und beim Speichern eines Bildes zu berücksichtigen.
Arbeiten mit JPGs (JPEGs)
JPGs (auch bekannt als JPEGs) sind das beliebteste Dateiformat für Bilder im Web. JPGs eignen sich perfekt für Fotografien oder komplexe Bilder, die viele Farben, Schatten, Verläufe oder komplexe Muster enthalten. JPGs kommen mit diesen Bildtypen gut zurecht, da sie mit einer riesigen Farbpalette arbeiten können.
JPGs können auch in hoher, niedriger oder jeder dazwischenliegenden Qualität gespeichert werden. Dies ermöglicht es Ihnen, das Bild genau nach Ihren Wünschen anzupassen und zu speichern, um Qualität und Dateigröße auszubalancieren.
Anwendungsfall für E-Commerce-Unternehmer: JPEGs sind das beliebteste Online-Dateiformat und werden häufig für Produktbilder, Fotos und Hero-Banner/Bilder auf der Startseite verwendet.
Arbeiten mit PNGs
PNGs sind ein weiteres beliebtes Dateiformat online. In Adobe Photoshop haben Sie die Möglichkeit, PNGs als PNG-8 oder PNG-24 zu speichern.
PNG-8 hat eine sehr begrenzte Farbpalette von 256 Farben. Obwohl die Dateigröße kleiner ist, ist dies keine gute Option für komplexe Bilder und Fotografien.
PNG-24 bietet ein Bild von viel höherer Qualität, geht aber zulasten einer größeren Dateigröße.
Am wichtigsten ist, dass PNGs Transparenz unterstützen. Dies ist einer der größten Unterschiede zwischen PNGs und JPEGs.
Anwendungsfall für E-Commerce-Unternehmer: PNGs werden normalerweise für Logos verwendet, da sie von hoher Qualität sind und Transparenz unterstützen. Dies funktioniert gut für Logos, da Logos fast immer Transparenz benötigen, Sie sie wahrscheinlich von hoher Qualität wünschen und weil Logos insgesamt nur einen kleinen Teil Ihrer Website ausmachen, sodass die Dateigröße immer noch gering ist.
Arbeiten mit GIFs
GIFs waren vor vielen Jahren beliebter, sind aber immer noch eine Option für kleine Bildgrößen, bei denen nur wenige Farben benötigt werden. Ähnlich wie PNG-8 sind GIF-Dateien auf nur 256 Farben beschränkt. Aus diesem Grund sollten GIFs niemals für Produktfotos verwendet werden.
Anwendungsfall für E-Commerce-Unternehmer: GIFs können für Logos verwendet werden, sind aber aufgrund ihrer begrenzten Farben für die meisten Anwendungsfälle im E-Commerce nicht sehr beliebt.
Um Ihnen einen besseren Überblick über die Unterschiede zu geben, hier eine kleine Vergleichstabelle:
| Dateiformat | Geeignet für | Anzahl der Farben | Unterstützt Transparenz | Dateigröße | Typischer E-Commerce-Einsatz |
|---|---|---|---|---|---|
| JPG | Fotografien, komplexe Bilder | Millionen | Nein | Variabel (Qualität einstellbar) | Produktbilder, Hero-Banner |
| PNG-8 | Einfache Grafiken, Icons | 256 | Ja | Kleiner | Eher selten, einfache Logos |
| PNG-24 | Logos, komplexe Grafiken | Millionen | Ja | Größer als PNG-8/JPG bei gleicher Qualität | Logos, Grafiken mit Transparenz |
| GIF | Einfache Grafiken, Animationen | 256 | Ja (eingeschränkt) | Sehr klein (bei wenigen Farben) | Sehr selten, einfache Logos (veraltet) |
Bilder richtig speichern: Die drei Schritte zur Optimierung
Wie zu erwarten, dauern große Bilder länger zum Laden. Wenn wir von „groß“ sprechen, meinen wir die Dateigröße (in KB, MB, GB usw.) und nicht unbedingt die Abmessungen (Pixel). Da 47 % der Benutzer erwarten, dass eine Webseite in unter 2 Sekunden geladen wird, und 40 % eine Seite verlassen, die länger als 3 Sekunden zum Laden benötigt, ist es wichtig, dass Ihre Bilder klein genug sind, um eine schnelle Website zu gewährleisten.
Es gibt drei Dinge, die Sie tun können, um Ihre Bilder für Ihren Online-Shop richtig zu optimieren:
Schritt 1: Die richtigen Abmessungen wählen
Bevor Sie das Bild für das Web speichern, sollten Sie sicherstellen, dass es die richtige Größe in Pixeln hat. Das Öffnen des Bildes in Photoshop und die Anzeige bei 100 % ermöglicht es Ihnen, das Bild in der exakten Größe zu sehen, in der es auf einem Computermonitor angezeigt wird. Es macht keinen Sinn, ein riesiges Bild zu speichern, das auf der Website nur in einem kleinen Bereich von vielleicht 800x600 Pixeln angezeigt wird.
Die benötigten Abmessungen hängen davon ab, wo das Bild auf Ihrer Website verwendet wird (Produktseite, Startseite, Banner) und welche Größe Ihr Website-Theme oder Design dafür vorsieht. Oft geben Themes empfohlene Bildgrößen an.
Um die Abmessungen in Photoshop anzupassen, gehen Sie zu: Bild > Bildgröße.... Geben Sie hier die gewünschten Pixelmaße ein. Achten Sie darauf, das Seitenverhältnis beizubehalten, um Verzerrungen zu vermeiden.
Schritt 2: „Für Web speichern“ in Photoshop nutzen
Dies ist der Kernprozess in Photoshop zur Optimierung von Bildern für das Web. Photoshop bietet eine spezielle Funktion, die die Bilddatei für die Anzeige online optimiert. Dies ist wichtig, da der normale „Speichern unter“-Befehl Dateigrößen erzeugen kann, die 2-3 Mal größer sind als mit der „Für Web speichern“-Funktion.
Öffnen Sie Ihr Bild in Photoshop und gehen Sie zu: Datei > Exportieren > Für Web speichern (Legacy).... Ein Fenster wird angezeigt, das Ihnen verschiedene Optionen zur Auswahl Ihrer Exportqualität bietet.
Im „Für Web speichern“-Fenster müssen wir einige wichtige Einstellungen vornehmen:
- Dateityp: Wie bereits besprochen, beeinflusst der Dateityp die Qualität und Größe der Ausgabedatei. Für Fotografien und komplexe Bilder wählen wir hier in der Regel JPEG. Für Logos mit Transparenz wäre es PNG-24.
- Qualität: Dies ist der wichtigste Regler und kann die endgültige Dateigröße massiv beeinflussen. Bei JPEG haben Sie eine Skala von 0 bis 100, oft mit Voreinstellungen wie „Maximum“, „Sehr Hoch“, „Hoch“, „Mittel“ und „Niedrig“.
- Abmessungen: Wir haben die Abmessungen bereits in Schritt 1 angepasst. Wenn nicht, könnten Sie die Abmessungen des Bildes auch hier ändern, bevor Sie speichern.
Betrachten wir, wie die Qualitätsstufe die Dateigröße beeinflusst. Nehmen wir ein Beispielbild und sehen uns die Dateigröße bei verschiedenen Qualitätseinstellungen an:
| Qualitätsstufe (JPEG) | Beispiel Dateigröße |
|---|---|
| Maximum (100) | 1.38 MB |
| Sehr Hoch (80) | 611 KB |
| Hoch (60) | 339 KB |
| Mittel (30) | 152 KB |
| Niedrig (10) | 86 KB |
Sie sehen, dass mit jeder Stufe, die Sie die Qualität reduzieren, die Dateigröße drastisch abnimmt. Wir haben festgestellt, dass die Einstellung „Hoch“ (oft entsprechend einem Qualitätswert von 60) für die meisten Bilder am besten funktioniert. Auf dieser Stufe ist es für das menschliche Auge nahezu unmöglich, eine Verschlechterung der Bildqualität zu erkennen, und die Dateigröße ist oft nur ein Bruchteil dessen, was sie bei „Maximum“ wäre.
Wenn das Bild ein extrem wichtiges Bild mit vielen feinen Details ist, möchten Sie vielleicht eine Stufe höher gehen und bei „Sehr Hoch“ speichern. Letztendlich ist das Speichern für das Web ein Balanceakt – Sie müssen die Qualität der Grafik und die Dateigröße der Datei an Ihre persönlichen Bedürfnisse anpassen.
PROFI-TIPP: Als allgemeine Faustregel streben wir für Produktfotos eine maximale Dateigröße von 80-150 KB an und für große Hero-Bilder auf der Startseite maximal 250-350 KB. Das sind gute Richtwerte, die Sie ebenfalls anstreben können.
Schritt 3: Zusätzliche Komprimierung
Auch wenn Sie Adobe Photoshop verwendet haben, um die Dateigröße zu reduzieren, können Sie wahrscheinlich immer noch weitere 5-10 % der Größe einsparen, indem Sie eine Komprimierungs-App verwenden. Diese Tools entfernen versteckte Daten in der Bilddatei, wie zusätzliche Farbprofile und Metadaten (z. B. den Aufnahmeort), die für die Anzeige im Web nicht benötigt werden. Diese Tools bieten eine schnelle und einfache Möglichkeit, die Dateigröße zu reduzieren, ohne die Bildqualität zu beeinträchtigen.
Bekannte Komprimierungstools sind ImageOptim (für Mac) oder Online-Dienste wie ShortPixel oder TinyPNG. ImageOptim ist auch der einfachste Weg, die Dateigröße schnell zu reduzieren, wenn Sie ein anderes Programm zum Speichern Ihrer Bilder verwendet haben, das nicht so gut optimiert wie Photoshop.
Ein praktisches Beispiel: Vom Riesen zur optimierten Web-Grafik
Um das Ganze zu veranschaulichen, nehmen wir ein Beispiel. Stellen Sie sich vor, wir hätten ein fantastisches Produktfoto mit einer DSLR-Kamera aufgenommen. Das Ergebnis: Eine wunderschöne Aufnahme, aber die Datei ist riesig – 14,6 MB und die Abmessungen betragen 5184 × 3456 Pixel. Das ist für das Web völlig unbrauchbar! Es ist groß genug, um ein Poster in Filmgröße zu drucken. Mit 14,6 MB würde das Laden dieses Bildes auf dem Computer eines Besuchers signifikant lange dauern. Das geht gar nicht.
Es ist Zeit, sich an die Arbeit zu machen und die Bildgröße (Abmessungen) und die Dateigröße – signifikant – zu reduzieren.
Wir werden die drei zuvor genannten Schritte auf dieses Bild anwenden:
- Bildgröße reduzieren: Dies sind die Abmessungen des Fotos in Pixeln. Wir öffnen das Bild in Photoshop. Nehmen wir an, das Theme unserer Website empfiehlt eine Bildgröße von 1600 x 800 Pixeln für Hero-Bilder. Wir gehen in Photoshop zu
Bild > Bildgröße...und ändern die Abmessungen auf 1600 x 800 Pixel. - Bild entsprechend speichern („Für Web speichern“): Dies ist die Größe der Datei in KB/MB. In Photoshop gehen wir zu
Datei > Exportieren > Für Web speichern (Legacy).... Da es sich um ein Foto handelt, wählen wir das Format JPEG. Wir experimentieren mit der Qualitätsstufe. Bei „Hoch“ (Qualität 60) sehen wir, dass die Dateigröße bereits auf etwa 339 KB gesunken ist. Das ist eine massive Verbesserung gegenüber den ursprünglichen 14,6 MB! - Bilddatei komprimieren: Um zusätzliche versteckte Daten zu entfernen. Wir nehmen die 339 KB große Datei und ziehen sie in ein Komprimierungstool wie ImageOptim. Das Tool analysiert die Datei und entfernt unnötige Metadaten oder Farbprofile, die Photoshop möglicherweise belassen hat. In diesem Beispiel konnten wir die Dateigröße um weitere 5 % reduzieren, auf etwa 322 KB. Auch wenn es nicht viel erscheint, zählt jedes KB, besonders wenn man viele Bilder hat.
Zusammenfassend haben wir unser ursprünglich riesiges Foto (14,6 MB, 5184 × 3456 px) mit wenigen einfachen Schritten auf eine perfekte Größe für unsere Startseite (1600 x 800 px) und eine viel vernünftigere Dateigröße von ca. 322 KB reduziert.
Häufig gestellte Fragen zur Bildoptimierung für das Web
Hier beantworten wir einige gängige Fragen, die bei der Bildoptimierung aufkommen:
Warum sollte ich „Für Web speichern“ statt „Speichern unter“ verwenden?
Die Funktion „Für Web speichern“ (oder neuere Export-Funktionen in Photoshop) wurde speziell entwickelt, um Bilder für die Online-Nutzung zu optimieren. Sie entfernt unnötige Daten (wie tiefe Farbinformationen oder Ebeneninformationen, die nur für die Bearbeitung relevant sind) und wendet eine effizientere Komprimierung an als der Standard-„Speichern unter“-Befehl, der primär für die Archivierung oder weitere Bearbeitung gedacht ist. Das Ergebnis ist eine signifikant kleinere Dateigröße bei oft kaum wahrnehmbarem Qualitätsverlust im Browser.
Welche Qualitätsstufe ist die beste für JPEG-Bilder?
Es gibt keine einzelne „beste“ Qualitätsstufe, da dies vom spezifischen Bild und Ihren Anforderungen abhängt. Eine Qualität von 60 (Einstellung „Hoch“) ist oft ein sehr guter Kompromiss, bei dem die Dateigröße stark reduziert wird, während die visuelle Qualität für das menschliche Auge meist noch hervorragend ist. Für Bilder mit extrem feinen Details oder wenn höchste Qualität absolut entscheidend ist, können Sie 80 („Sehr Hoch“) wählen. Es ist immer ratsam, die Vorschau im „Für Web speichern“-Dialog zu überprüfen und die Dateigröße zu beobachten, um die für Sie passende Balance zu finden.
Muss ich immer externe Komprimierungstools nutzen?
Nein, es ist nicht zwingend erforderlich, insbesondere wenn Sie bereits Photoshop oder ein ähnliches professionelles Tool verwenden, das gut optimiert. Allerdings können externe Tools wie ImageOptim oder Online-Dienste wie TinyPNG oft noch die letzten Bytes einsparen, indem sie Metadaten entfernen, die selbst bei der Web-Optimierung erhalten bleiben können. Für maximale Effizienz kann es sich lohnen, diesen zusätzlichen Schritt einzufügen, insbesondere bei einer großen Anzahl von Bildern.
Gibt es Richtwerte für die Dateigröße pro Bild?
Ja, als Orientierung sind 80-150 KB für typische Produktbilder auf Kategorieseiten oder Detailseiten ein gutes Ziel. Für größere Bilder wie Hero-Banner auf der Startseite, die oft mehr Fläche einnehmen, sind 250-350 KB oft akzeptabel. Das Ziel ist immer, die kleinste Dateigröße zu erreichen, die die benötigte visuelle Qualität beibehält.
Wann wähle ich JPG und wann PNG?
Wählen Sie JPG für Fotografien und komplexe Bilder mit vielen Farben und Verläufen, bei denen Transparenz nicht benötigt wird. Wählen Sie PNG (meist PNG-24) für Grafiken, Icons oder Logos, die Transparenz benötigen oder sehr klare, scharfe Linien und Farbflächen ohne Komprimierungsartefakte aufweisen sollen. PNG-8 ist nur für sehr einfache Grafiken mit wenigen Farben geeignet.
Fazit
Zusammenfassend lässt sich sagen, dass unser Beispielbild zu Beginn riesig war, aber mit wenigen einfachen Schritten haben wir die Fotogröße von 5184 × 3456 auf 1600 x 800 reduziert, sodass es perfekt auf unsere Startseite passt, und gleichzeitig die Dateigröße von computerbelastenden 14,4 MB auf viel vernünftigere 322 KB gesenkt.
Bilder für das Web richtig zu speichern, ist ein wichtiger Schritt, den man früh lernen und konsequent umsetzen sollte. Selbst wenn Sie bei jedem Bild nur 10-20 % einsparen, kann sich das im Laufe der Zeit, wenn Ihr Shop und Ihre Website wachsen, zu signifikanten Einsparungen addieren, die zu einem viel angenehmeren Gesamterlebnis für Ihre Besucher, Kunden und Google führen. Eine schnelle Website mit optimierten Bildern ist ein entscheidender Faktor für den Erfolg im Online-Handel und darüber hinaus.
Hat dich der Artikel Beste Exporteinstellungen für Web in Photoshop interessiert? Schau auch in die Kategorie Bildbearbeitung rein – dort findest du mehr ähnliche Inhalte!