Optimieren von Bildern für das Web: Ein praktischer Leitfaden

Sie sagen, ein Bild sagt mehr als tausend Worte, was einer der Gründe ist, warum Bilder im E-Commerce so wichtig sind. Ohne dass der Kunde ein Produkt aufnehmen, berühren und prüfen kann, verlässt er sich stark auf die Bilder, um die Farbe, die Qualität und die Geschichte des Produkts zu verstehen.

Daher ist es selbstverständlich, dass Ihre Bilder hochauflösend und gestochen scharf sein müssen. Aber das hat seinen Preis. Große, hochauflösende Bilder können riesige Dateigrößen haben. Stellen Sie ein paar davon auf Ihre Website und diese flinke Erfahrung beim Navigieren in Ihrem Online-Shop kann sich eher anfühlen, als würde man durch Melasse schwimmen. Dies führt nicht nur dazu, dass Besucher abspringen, sondern mit der Zeit wird auch Google dies bemerken, und dies kann sich auf Ihre SEO auswirken.

Im E-Commerce ist es wichtig, ein gutes Gleichgewicht zwischen Bildqualität und Bilddateigröße zu finden, wenn Sie ein Bild für Ihre Website speichern. Wie das geht, zeigen wir Ihnen in diesem Beitrag.

Wenn Sie dafür bekannt sind, ein Produktfoto zu machen und es direkt in Ihren Shop hochzuladen, ist dieses Tutorial genau das Richtige für Sie. Wenn Sie keine formalen Kenntnisse oder Verfahren zum Speichern von Bildern mit Blick auf die Dateigröße haben, ist dieses Tutorial genau das Richtige für Sie. Wenn Ihre Website viele Bilder enthält und sich die Dinge träge anfühlen, ist dieses Tutorial genau das Richtige für Sie. Wenn Sie noch nicht mit dem Aufbau Ihres Online-Shops begonnen haben, ist dieses Tutorial speziell für Sie.

Sind Sie bereit, Ihre Bilder zu optimieren?

Optionen für den Bilddateityp

Es gibt drei Hauptdateitypen, auf die wir uns zum Speichern von Bildern konzentrieren möchten, die für das Web optimiert sind: GIF, JPG und PNG. Jeder Dateityp hat seine eigenen Stärken und Schwächen und es ist sehr wichtig, diese beim Speichern eines Bildes zu kennen und zu berücksichtigen.

Arbeiten mit JPGs

JPGs (auch bekannt als JPEGs) sind der beliebteste Dateityp für Bilder im Web. JPGs eignen sich perfekt für Fotos oder komplexe Bilder mit vielen Farben, Schatten, Verläufen oder komplexen Mustern. JPGs verarbeiten diese Art von Bildern gut, da JPGs eine riesige Farbpalette haben, mit der sie arbeiten können.

JPGs können auch in hoher Qualität, niedriger Qualität oder irgendwo dazwischen gespeichert werden. Auf diese Weise können Sie das Bild genau nach Ihren Wünschen anpassen und speichern, wobei Qualität und Dateigröße in Einklang gebracht werden.

Arbeiten mit PNGs

PNGs sind ein weiteres beliebtes Dateiformat im Internet. 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 Bildgröße kleiner ist, ist dies keine gute Option für komplexe Bilder und Fotos.
• PNG-24 bietet ein viel hochwertigeres Bild, geht jedoch auf Kosten einer größeren Dateigröße.

Am wichtigsten ist, dass PNGs mit Transparenz umgehen können. Dies ist einer der größten Unterscheidungsmerkmale zwischen PNGs und JPEGs.

Mit GIFs arbeiten

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.

Bilder richtig speichern

Erwartungsgemäß dauert das Laden großer Bilder länger. Wenn wir groß sagen, beziehen wir uns eher auf die Dateigröße als auf die Abmessungen eines Bildes, dh den Wert in KB, MB, GB usw. Da 47% der Benutzer erwarten, dass eine Webseite in weniger als 2 Sekunden geladen wird, und 40 % wird eine Seite verlassen, deren Ladevorgang länger als 3 Sekunden dauert. Es ist wichtig, dass Ihre Bilder klein genug sind, um eine schnelle Site zu gewährleisten.

Es gibt drei Dinge, die Sie tun können, um Ihre Bilder für Ihren Online-Shop richtig zu optimieren:

Speichern Sie die richtigen Abmessungen

Sie müssen das Bild in Photoshop öffnen und mit 100 % anzeigen. Auf diese Weise können Sie das Bild in der genauen Größe anzeigen, die auf einem Computermonitor angezeigt wird, wenn Sie das Bild für das Web speichern.

Bilder für das Web speichern

Es ist möglich, die Dateigröße zu reduzieren, ohne die Qualität Ihrer Bilder erheblich zu beeinträchtigen. Unsere bevorzugte Methode zum Verringern der Dateigröße, ohne die Qualität des Bildes erheblich zu beeinträchtigen, ist die Verwendung der Photoshop-Funktion „Für Web speichern“. Öffnen Sie Ihr Bild in Photoshop und gehen Sie zu Datei > Exportieren > Für Web speichern (alt)…. Es erscheint ein Fenster, in dem Sie Ihre Exportqualität auswählen können. Wir finden, dass eine Qualität von 60 am besten funktioniert, da sie die Dateigröße auf unter ein Megabyte reduziert und es keinen merklichen Qualitätsunterschied gibt.

Bilder für das Web komprimieren

Bildkomprimierungs-Apps sind der einfachste Weg, um die Dateigröße von Bildern zu reduzieren. Diese Arten von Werkzeugen entfernen versteckte Daten in der Bilddatei, wie zusätzliche Farbprofile und Metadaten (wie die Geolokalisierung des Aufnahmeorts), die 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.

Bildkomprimierungs-Apps und -Dienste

• ImageOptim
• KurzPixel
• WinzigJPG
• TinyPNG
• Kompressor.io
• Krake
• ImageOptimizer
• Bilder vernichten (Shopify-App)
• Minifier (Shopify-App)

Speichern eines Bildes für das Web: Walk-Through-Beispiel

Nehmen wir zunächst an, wir wären Stiff Salt (eigentlich im Besitz eines Freundes und Shopify-Entwicklers) und wollten das Feature-Image in unserem Online-Shop ändern.

Wir bauen eine Szene auf, lassen unser Salz absolut unglaublich aussehen und machen ein Foto mit einer DSLR-Kamera. Super, wir haben unser Foto. Was für eine Schönheit!

Aber… die Dateigröße ist RIESIG! 14,6 MB um genau zu sein. Und die Abmessungen des Fotos betragen 5184 × 3456 Pixel. Das ist im Moment völlig unbrauchbar. Es ist buchstäblich groß genug, um ein Poster in Filmgröße zu drucken. Bei 14,6 MB würde das Laden dieses Bilds auf den Computer eines Besuchers viel Zeit in Anspruch nehmen. Das ist nicht gut.

Es ist Zeit, sich an die Arbeit zu machen und die Bildgröße und die Dateigröße zu reduzieren – deutlich.

Denken Sie daran, dass wir drei Dinge mit dem Bild tun werden.

• Bildgröße reduzieren: Dies sind die Abmessungen des Fotos
• Bild angemessen speichern, um die Dateigröße zu reduzieren: Dies ist die Größe der Datei und wie viel Platz sie auf der Festplatte Ihres Computers und/oder Ihrem Webserver benötigt
• Bilddatei komprimieren: Um zusätzliche versteckte Daten zu entfernen, die Speicherplatz beanspruchen

Bildgröße reduzieren

Je nachdem, für welches Programm Sie sich entscheiden und welche persönlichen Vorlieben Sie haben, können Sie:

• Verringern Sie die Bildgröße vor dem Speichern
• Reduzieren Sie die Bildgröße, während Sie das Bild speichern
• Speichern Sie das Bild und reduzieren Sie dann die Bildgröße

Der Einfachheit halber reduzieren wir zunächst die Bildgröße. Dazu öffnen wir das Bild in Photoshop (Sie können jedes Bildprogramm verwenden, mit dem Sie sich am wohlsten fühlen).

Um die Größe herauszufinden, haben wir uns die empfohlene Bildgröße für die Startseite des Themes angesehen. Es war 1600 x 800 Pixel (denken Sie daran, dass das Original 5184 x 3456 Pixel hatte).

In Photoshop wählen wir Bild > Bildgröße.

Ok, wir haben die Größe (Abmessungen) des Bildes auf etwas Passenderes reduziert und vom Theme-Entwickler empfohlen.

Bild entsprechend speichern (Für Web speichern)

In Photoshop gibt es einen speziellen Befehl namens „Für Web speichern“, der die Bilddatei für die Online-Anzeige optimiert. Dies ist wichtig, da der reguläre Befehl „Speichern“ dazu führen kann, dass Dateigrößen 2-3 mal größer sind als der Befehl „Für Web speichern“.

Im Feld „Für Web speichern“ müssen wir einige Auswahlen treffen.

• Bildtyp: Der Dateityp beeinflusst die Qualität und Größe der Ausgabedatei
• Bildqualität: Dies ist wichtig und kann die endgültige Dateigröße stark beeinflussen
• Abmessungen: Wir haben dies bereits im ersten Schritt gemacht, also müssen wir es nicht noch einmal tun, aber wenn wir dies im ersten Schritt nicht gemacht haben, könnten wir einfach die Abmessungen für das Bild hier ändern

Basierend auf dem, was wir zu Beginn dieses Beitrags gelernt haben, wissen wir, dass JPEG der beste Dateityp für Fotos oder Bilder mit vielen Farben und Komplexität ist. Wir werden JPEG auswählen.

Für die Bildqualität haben Sie eine Skala, die Sie mit 5 Voreinstellungen auswählen können, die von Maximum bis Low reichen. Werfen wir einen Blick auf die endgültige Ausgabedateigröße jeder der Qualitätsstufen (diese Informationen werden in der unteren Ecke des Bildspeicherfensters angezeigt):

• Maximal: 1,38 MB
• Sehr hoch: 611 KB
• Hoch: 339 KB
• Medium: 152 KB
• Niedrig: 86k

Sie können sehen, dass sich die Bildgröße für jede Qualitätsstufe, die Sie verringern, um fast die Hälfte verringert. Im Allgemeinen haben wir festgestellt, dass Hoch die beste Einstellung für die meisten Bilder ist. Auf dieser Ebene ist es für das menschliche Auge fast unmöglich, eine Verschlechterung der Bildqualität zu erkennen, und die Dateigröße ist fast viermal kleiner, als wenn wir nur das Maximum auswählen würden.

Wenn es sich bei dem Bild um ein sehr wichtiges Bild mit vielen Details handelt, sollten Sie eine höhere Stufe wählen und auf Sehr hoch speichern.

Im Wesentlichen ist das Speichern für das Web ein Balanceakt – Sie müssen die Qualität der Grafiken und die Dateigröße der Medien an Ihre persönlichen Bedürfnisse anpassen.

Bilder für das Web komprimieren

Wenn Sie Adobe Photoshop verwendet haben, hat es die Bildgröße bereits sehr gut reduziert, Sie können jedoch mit einer Komprimierungs-App wie ImageOptim und/oder ShortPixel wahrscheinlich noch weitere 5-10% der Bildgröße reduzieren.

ImageOptim ist auch die einfachste Möglichkeit, die Bilddateigröße schnell zu reduzieren, wenn Sie ein anderes Programm zum Speichern Ihrer Bilder verwendet haben, das nicht so gut ist wie Photoshop.

Durch das Ablegen jeder der Dateien aus dem vorherigen Schritt in ImageOptim konnten wir die Bildgröße um weitere 5 % reduzieren. Nicht riesig, aber auch diese wurden bereits mit Photoshop optimiert. Unabhängig davon zählt jedes KB.

Abschluss

Um es noch einmal zusammenzufassen, unser Foto war am Anfang wahnsinnig groß, aber mit ein paar einfachen Schritten haben wir die Fotogröße von 5184 × 3456 auf 1600 x 800 reduziert, damit es perfekt zu unserer Homepage passt und gleichzeitig genommen es von 14,4 MB, die Computer abstürzen, auf viel vernünftigere 336 KB.

Bilder angemessen für das Web zu speichern ist ein wichtiger Schritt, um früh zu lernen und religiös umzusetzen. Selbst wenn Sie bei jedem Bild nur 10-20 % sparen, kann im Laufe der Zeit, wenn Ihr Geschäft und Ihre Website wachsen, jede kleine KB zu erheblichen Einsparungen führen, die zu einem insgesamt viel angenehmeren Erlebnis für Ihre Besucher, Kunden und Google.

So optimieren Sie Bilder für das Web: Video Walkthrough