Produktbilder helfen, den Kauf abzuschließen, wenn Kunden Ihre Website besuchen. Um ihr Interesse aufrechtzuerhalten, müssen Sie attraktive Fotos haben, die schnell geladen werden. Mit anderen Worten: Sie müssen Ihre Produktbilder optimieren.
Sie fragen sich vielleicht, wie Sie die optimale Bildgröße finden, wie Sie Bilder komprimieren und wie Sie Bilder ohne Qualitätsverlust optimieren.
Wir haben alles für Sie. In diesem Artikel gehen wir auf die
Warum müssen Sie Bilder optimieren?
Bilder sind ein wichtiger Bestandteil jeder Website. Dies gilt insbesondere für E-Commerce-Websites. Bilder beeinflussen Kunden, wenn sie über einen Kauf nachdenken. Sie ergänzen das Gesamtdesign der Webseite, helfen Kunden bei der Produktauswahl und verbessern die SEO Ihrer Website.
Sie sollten beispielsweise das Hochladen großer Dateien vermeiden. Diese können Ihre Seite verlangsamen, was sich auf Ihr Suchmaschinenranking auswirkt und potenzielle Kunden vertreibt. Niemand möchte beim Online-Shopping warten, bis eine Seite geladen ist. Deshalb müssen Sie Ihre Produktbilder optimieren.
Die Abmessungen und Proportionen des Bildes verstehen
Informieren Sie sich, worauf Sie bei der Bildoptimierung achten müssen.
Die Größe und Abmessungen eines Bildes sind sehr wichtig. Diese Parameter beeinflussen die Dateigröße und das Erscheinungsbild des Bildes auf verschiedenen Geräten.
Größe
Jetzt ist die Ära der
Zu große Bilder sind allerdings nicht für das Internet geeignet. Sie verlangsamen die Ladegeschwindigkeit, vor allem auf dem Handy. Wenn du nicht willst, dass deine Besucher ungeduldig werden und deinen Shop verlassen, solltest du die Größe deiner Bilder reduzieren.
Ein Bild hat zwei Größen:
- Bildgröße ist der Platz, den eine Grafik auf dem Bildschirm einnimmt. Diese Größe wird in Pixeln (px) gemessen, also den einzelnen Punkten, aus denen der Bildschirm besteht. Sie können Bilder beliebiger Größe im Ecwid-Store hochladen. Sie werden dann so optimiert, dass sie in die Breite des Browserfensters passen. Trotzdem ist es am besten, Ihre Produktbilder auf etwa 1000 x 1000 Pixel zu reduzieren. Diese Größe ist groß genug, um das Produkt anzuzeigen, und klein genug, um schnell geladen zu werden.
- Dateigröße ist der Speicherplatz, den das Bild einnimmt. Diese Größe wird in Bytes gemessen, typisch
Kilo- (Kb),Mega- (Mb) und Gigabyte (Gb). Je größer die Dateigröße des Bildes, desto mehr Speicherplatz wird benötigt.
Die Größe dieses Produktbildes beträgt 1920×1920 und die Dateigröße beträgt 272 kB
Das Laden größerer Dateien dauert länger. Um dieses Problem zu lösen, wurde Dateikomprimierungssoftware entwickelt. Ein Bild wird normalerweise durch die Optimierung der Farbdaten komprimiert.
Eine starke Komprimierung verschlechtert allerdings die „Qualität“ der Bilder. Sie verursacht Rauschen oder einen abrupten Farbübergang.
Bei einer Dateigröße von ca. 1000 px sind bei einer guten Komprimierung ca. 200 kB erforderlich.
Lassen Sie uns nun mehr darüber erfahren, wie Sie die richtigen Proportionen für Ihre Bilder wählen.
Proportionen
Die Proportionen eines Bildes geben Aufschluss über
Manche Verhältnisse sind für das Auge angenehmer als andere. Die Standardproportionen sehen immer gut aus. Diese sind 1:1, 4:3, 3:2 und 16:9.
Die Proportionen sind wichtig, da sie das Erscheinungsbild Ihrer Site bestimmen. Achten Sie darauf, dass alle Produktbilder die gleichen Proportionen aufweisen, um Ihrem Shop ein strukturiertes und professionelles Aussehen zu verleihen.
So wählen Sie das Bildformat aus
Für eine optimale Bildqualität müssen Sie außerdem das Bildformat berücksichtigen. Dabei handelt es sich um den Dateityp, in dem ein Bild gespeichert wird.
Es gibt viele Arten von Bildformaten. Jedes hat seine Vor- und Nachteile in Bezug auf Qualität, Komprimierung und Unterstützung. Sie sollten das Format auswählen, das die höchste Qualität bei der kleinsten Größe bietet.
Die drei gängigsten Formate im Web sind JPEG, PNG und GIF. Jedes sollte auf eine bestimmte Weise verwendet werden.
Lassen Sie uns die Formate aufschlüsseln:
- GIF (Graphics Interchange Format) kann komprimierte Daten ohne Qualitätsverlust speichern und dabei nicht mehr als 256 Farben verwenden. Das Format unterstützt normalerweise Animationen. Lange Zeit waren GIFs das gängigste Format im Internet … bis PNG auf den Markt kam.
- PNG (Portable Network Graphics) verwendet verlustfreie Komprimierung und speichert eine unbegrenzte Anzahl Farben.
- JPEG (Joint Photographic Experts Group, der Name des Entwicklers) ist das gängigste Format zum Speichern von Fotos und anderen Bildern. Der JPEG-Algorithmus kann sowohl verlustbehaftete als auch verlustfreie Komprimierung verwenden (mehr dazu später). Je größer die Dateigröße, desto geringer der Verlust.
Welches Format sollten Sie wählen? Wenn Sie ein animiertes Bild haben, ist das
JPEG- und PNG-Dateien sind ähnlich, weisen aber auch entscheidende Unterschiede auf. JPEGs sind kleiner, da sie einen Komprimierungsprozess verwenden, bei dem einige Daten entfernt werden. PNGs hingegen unterstützen transparente Hintergründe und eignen sich besser für Grafikdesign.
Die allgemeine Regel lautet, JPGs für Fotos und Bilder zu verwenden, die keinen transparenten Hintergrund haben. PNG ist besser für Grafiken, Dateien mit transparentem Hintergrund und andere Bilder geeignet, bei denen Klarheit und Farbbrillanz wichtig sind. Für Produktfotos ist es daher sinnvoll, JPEG gegenüber PNG vorzuziehen.
Dieses Produktfoto ist im JPEG-Format
So komprimieren Sie Bilder ohne Qualitätsverlust
Durch Komprimierung lässt sich die Größe eines Bildes verringern. Je niedriger die Qualität, desto höher die Komprimierung und desto kleiner die Dateigröße.
Es gibt zwei Arten der Komprimierung:
- Verlustbehaftete Kompression reduziert die Größe einer Datei, indem redundante Daten entfernt werden. Wenn Sie eine Datei auf diese Weise komprimieren, kann sich die Bildqualität jedoch erheblich verschlechtern.
- Verlustfreie Kompression ist eine Technik, die die Qualität einer Datei hoch hält. Allerdings wird die Dateigröße dadurch nicht so stark reduziert wie bei verlustbehafteter Komprimierung. Wenn Sie die Dateigröße reduzieren müssen, ohne die Qualität merklich zu beeinträchtigen, ist verlustfreie Komprimierung besser geeignet.
Lesen Sie weiter, um mehr über Online-Tools zu erfahren, mit denen Sie ein Bild ohne Qualitätsverlust komprimieren können.
So optimieren Sie Bilder für das Web: Übersicht der Tools
Möchten Sie herausfinden, wie Sie Bilder für eine Website optimieren? Zum Glück können Sie Online-Tools verwenden, um Ihre Bilder automatisch zu optimieren, ohne stundenlang Photoshop-Tutorials ansehen zu müssen.
Die folgenden Websites können die Optimierung für Sie automatisieren:
So optimieren Sie die Bildgröße: 4 einfache Tools
Wenn Sie nach einem Programm zur Reduzierung der Dateigröße suchen, probieren Sie einen der folgenden Dienste aus. Sie sind entweder kostenlos oder es gibt kostenlose Testversionen:
- TinyJPG: Es reduziert die Dateigröße von JPEG-Bildern. Laut ihrer Website kann es die Größe um mehr als 70 % reduzieren!
- TinyPNG: der gleiche Bildkompressor, aber für PNG-Dateien.
- Squoosh: eine Bildkomprimierungs-Web-App, die die Bildgröße in zahlreichen Formaten reduziert.
- JPEGmini: ein Fotokompressor für JPEG-Dateien. Er verfügt über erweiterte Funktionen, die für Fotografen hilfreich sind, einschließlich des direkten Exports von Fotos aus Lightroom und Photoshop.
- ImageOptim: ein Bildoptimierer für Mac-Geräte. Sie müssen ihn herunterladen, um ihn verwenden zu können.
Bilder optimieren mit JPEGmini
Wenn Sie einen Ecwid-Shop betreiben, können Sie die SEO-Geschwindigkeits- und Bildoptimierer App aus dem Ecwid App Market. Die App ermöglicht
So optimieren Sie Bilder für WordPress
Wenn Sie eine WordPress-Website haben, können Sie Bildoptimierungs- und Komprimierungs-Plugins verwenden. Sie helfen Ihnen, Bilder auf WordPress-Websites automatisch zu optimieren und so für mehr Geschwindigkeit und Leistung zu sorgen.
Übrigens, wenn Sie nach einem E-Commerce-Plugin für Ihre WordPress-Website suchen, schauen Sie sich das hier an Ecwid von Lightspeed-Plugin. Damit können Sie Ihrer WordPress-Site ganz einfach einen Online-Shop hinzufügen. Nach der Installation erstellt das Plugin automatisch eine Store-Seite, auf der Ihre Kunden auf Ihrer Website einkaufen können.
EWWW Image Optimizer
EWWW Image Optimizer ist eines der besten WordPress-Plugins zum Komprimieren von Fotos und Optimieren von Bildern auf Ihrer Website. Der gesamte Prozess der Bildoptimierung ist automatisiert. Dazu gehört das Komprimieren von Bildern und das Skalieren, um sie an die richtige Seitengröße und das richtige Gerät anzupassen. Das Plugin ist
JPEG und PNG komprimieren
JPEG und PNG komprimieren ist ein Plugin, das vom Team hinter den Diensten erstellt wurde, die wir bereits
reSmush.it
reSmush.it ist ein kostenloses WordPress-Bildkomprimierungs-Plugin für Dateien bis zu 5 MB. Sie können Bilder automatisch beim Hochladen optimieren, ältere Bilder in großen Mengen optimieren und einige Bilder vom Optimierer ausschließen.
Weitere automatisierte Bildoptimierungstools
Aber was, wenn Sie keine WordPress-Website haben? Die manuelle Optimierung einer großen Anzahl von Fotos ist definitiv
ImageRecycle
ImageRecycle unterstützt verschiedene Bildformate wie JPEG, PNG, GIF und sogar PDF-Dateien.
Das Tool kann anhand der Bildgröße und -abmessung bestimmen, welche Bilder auf Ihrer Website optimiert werden müssen. Geben Sie einfach Ihre Website-Adresse ein und ImageRecycle sendet Ihnen einen kostenlosen Bericht per E-Mail. Es gibt auch eine kostenlose Testversion, damit Sie das Optimierungstool in Aktion sehen können.
ImageKit.io
ImageKit.io ist kein normaler Bildkompressor, sondern ein Bild-CDN (Content Delivery Network). Es optimiert, skaliert und sendet Bilder über sein globales Servernetzwerk. Sie können sich für einen dauerhaft kostenlosen Plan anmelden.
Tools zum Bearbeiten von Produktbildern
Wenn Sie nichts dagegen haben, Bilder selbst zu bearbeiten und auch vor ein wenig Heimwerken nicht zurückschrecken, könnten Ihnen Tools zur Fotobearbeitung hilfreich sein. Hier sind einige davon:
Photoshop
Photoshop bietet eine kostenlose Online-Editor für grundlegende Bildbearbeitung (wie das Zuschneiden oder Ändern der Bildgröße). Sie können damit auch den Hintergrund von Bildern entfernen und Ihre Fotos mit verschiedenen Einstellungen wie Kontrast, Helligkeit, Sättigung, Wärme oder Schärfe optimieren.
Der Online-Photoshop-Editor verfügt über Designvorlagen, die Sie verwenden können
GIMP
GIMP ist ein kostenloses Programm für Windows, Mac und Linux. Es bietet alles, was Sie für professionelle Grafiken und Fotos benötigen, einschließlich Werkzeuge für Ebenen und Masken, Farbkorrektur, Retusche und Malerei. GIMP unterstützt alle wichtigen Bilddateiformate.
PicMonkey
PicMonkey ist ein Online-Editor mit einer einfachen Benutzeroberfläche und allen grundlegenden Funktionen wie Zuschneiden, Drehen, Schärfekontrolle, Arbeiten mit Farben und Auswählen der Auflösung von Fotos. Es bietet Vorlagen zum Erstellen von Bildern für Anzeigen, Social-Media-Beiträge, Logos, Infografiken und mehr. Es hat eine
Pixlr
Pixlr bietet einen kostenlosen Online-Editor und Designressourcen für Anfänger und Profis. Es verfügt über Werkzeuge für Farb-, Zeichen- und Fotobearbeitung. Mit Pixlr arbeiten Sie mit Ebenen und verwenden verschiedene Effekte und Filter. Wenn Sie interessiert sind, können Sie
Mehr zur Bildoptimierung
Große Bilder können Ihre Website verlangsamen, daher ist es wichtig, sie für das Web zu optimieren. Das Finden des richtigen Bildformats für Ihre Bilder durch Größenanpassung und Komprimierung kann Wunder für die Ladegeschwindigkeit Ihrer Website bewirken.
Und jetzt kennen Sie die gute Nachricht: Optimierung ist ganz einfach! Sie können auch jederzeit wieder auf diesen Artikel zurückkommen und ihn als Referenz verwenden.
Wenn Sie ein fortgeschrittener Benutzer sind und mehr darüber erfahren möchten, wie Sie Bilder für SEO optimieren, empfehlen wir Ihnen, sich dieses Video von Google anzusehen. Darin finden Sie einige fortgeschrittene Tipps zur Optimierung Ihrer Bilder für eine Website. Sehen Sie es sich hier an:
Egal, wie erfahren Sie als E-Commerce-Besitzer sind, vergessen Sie nie die Bildoptimierung. Selbst die einfachsten Tools können Ihre Bilder für das Internet geeignet machen. Durch die Optimierung Ihrer Bilder können Sie das Einkaufserlebnis Ihrer Kunden drastisch beeinflussen. Stellen Sie sicher, dass Ihre Produktbilder sowohl schön als auch schnell geladen sind!
Wenn Sie gerade erst am Anfang Ihrer E-Commerce-Reise stehen und einen Online-Shop erstellen müssen, schauen Sie sich an Ecwid von Lightspeed. Sie können damit selbst einen kostenlosen Online-Shop einrichten, ohne dass Sie Programmier- oder Designkenntnisse benötigen. Perfekt, wenn Sie so schnell wie möglich mit dem Online-Verkauf beginnen müssen!
- So gestalten Sie Produktkategoriebilder
- So erstellen Sie Cinemagraphs für Produktbilder
- So optimieren Sie Produktbilder
- So ändern Sie die Größe eines Bilds
- Übersicht zu Bildgrößenanpassung