Hallo. Der Inhalt unseres Blogs wurde zum besseren Verständnis automatisch übersetzt. Bitte entschuldigen Sie deshalb eventuell auftretende sprachliche Unstimmigkeiten.

Gewusst wie: Optimieren der Produkt-Bilder: Step-By-Step Instructions and An Overview of Services

Okt 20, 2015 von Lina Vashurina, Ecwid-Team
Veröffentlicht Okt 20, 2015 von Lina Vashurina, Ecwid-Team

Bilder ziehen die Aufmerksamkeit der Käufer. In Ordnung zu halten, die Aufmerksamkeit, Sie benötigen schöne Bilder , die schnell geladen. Daher, Sie müssen Ihre Bilder optimieren. Dieser Artikel wird Ihnen sagen, wie.

Was sollte die Größe des Bildes werden? Wie können Sie Ihr online-Shop strukturiert und schön? Wie können Sie reduzieren die Bildgröße aber halten Sie die details? Lassen Sie uns Ihnen helfen.

Alle Beispiele in dem Artikel sind made in Photoshop. Wenn Sie nicht über Photoshop, wir bieten ein paar alternativen am Ende.

Die Abmessungen und Proportionen der Bilder

Größe

Dies ist die ära der high-Auflösung, großen Bildschirmen und high-speed-Internet, aber das bedeutet nicht, wir sollten uns nicht Gedanken über die Optimierung von Bildern. Moderne Kameras machen große detaillierte Bilder, die sind geeignet für high-end-Druck. Chancen sind Ihr Fotograf wird Ihnen mit solchen Bildern.

Allerdings, wenn Bilder zu gross sind, Sie sind nicht geeignet für das Internet. Verlangsamen Sie die Geschwindigkeit beim laden, vor allem, wenn man auf einem Telefon. Wenn Sie nicht möchten, dass Ihre Besucher ungeduldig und lassen Sie Ihren store, Sie sollten reduzieren Sie die Größe Ihrer Bilder.

Ein Bild hat zwei Größen:

1. Der Raum nimmt auf dem Bildschirm. Diese Größe wird in Pixel gemessen (px), die Punkte, aus denen sich der Bildschirm. In der Ecwid-Shop können Sie Bilder hochladen, in jeder Größe, wie Sie immer sind optimierte, an die Breite des browser-Fensters. Trotzdem, es ist am besten zu reduzieren, Ihre Produkt-Bilder, um zu 1000 x 1000 px. Diese Größe ist groß genug für die Anzeige der Produkt-und klein genug, um schnell geladen.

2. Der Speicherplatz, die es braucht, bis, gemessen in Kilobyte (kB). Je größer die physische Größe des Bildes, desto mehr Speicherplatz wird es dauern, bis, und je länger es dauert, um zu laden. Um dieses problem zu lösen, image-Datei-Formate mit Komprimierung erfunden wurden. Das Bild wird komprimiert, durch die Optimierung der Farb-Daten.

Allerdings, starke Komprimierung verschlechtert sich die “Qualität” Bilder: es ist der Lärm oder der abrupte Farbübergang. Um dies zu vermeiden, es ist genug, um Bilder speichern im richtigen format.

Für eine Dateigröße von ca. 1000 px, ein gutes Ergebnis dauern wird, bis mehr oder weniger 200 kB. Wie wählen Sie das format ist weiter unten beschrieben.

Zuschneiden

– Das Bild ist kleiner geworden, aber verloren sind die details, die ich zeigen wollte!

Sie’re rechts! Details sind wichtig. Rahmen Sie Ihre wichtige details der Produkte, durch schneiden Sie aus der Haupt-Bild. Fügen Sie mehr Bilder auf der Galerie.

Optimierung 1

Kleiner Bilderrahmen und zwei Bilder mit details von dem gleichen Bild

Thumbnails

Also, Sie haben sich mit dem wichtigsten Bild des Produkts, aber Sie wollen immer noch zeigen einige details. Ecwid kümmert sich um diese: die Standard-Größe unserer automatisch generierten thumbnails ist 230 px. Sie können dies ändern in den Einstellungen der Systemsteuerung.

Wenn Sie nicht mit Ecwid, stellen Sie die thumbnail-Größe von bis zu 40-50 kB.

Proportionen

Die Forschung hat gezeigt, dass nicht jeder Aspekt ratio ist angenehm für die Augen. Im Laufe der Jahre wurde es definiert eine “standard” Satz von Proportionen, die haben immer ein schönes Ergebnis: 1:1, 4:3, 3:2, und 16:9.

Proportionen Thumbnails

Die Proportionen sind wichtig, wie definieren Sie das Aussehen Ihrer Website. Geben alle Ihre Bilder die gleichen Proportionen, wie dies wird geben Sie Ihrem Schaufenster ein strukturiertes und professionelles Aussehen.

Schärfe

Wenn Sie haben bereits reduziert die Größe eines Bildes, Sie haben wahrscheinlich bemerkt, dass es seine Schärfe verloren hat. Wie behalte ich die Schärfe?

Der einfache Weg

Die meisten modernen Foto-Editoren können Sie wählen Sie ein neues Bild Größe, wenn Sie "speichern für Web", mit einer Verringerung des Algorithmus wirkt sich direkt auf die Schärfe. In Photoshop, wenn Sie die richtigen Parameter (Bild Größe unten 1000 px und Qualität = Bikubisch Schärfer), das Ergebnis erfordert keine nachträgliche Anpassung.

opt_sharp

Wenn das ursprüngliche Bild war sehr groß, wie 5000 x 5000 px, reduzieren nicht direkt. Tun Sie es in zwei oder drei Schritten, jedes mal, wenn die Anpassung der Schärfe.

Für erfahrene Anwender

1. Reduziert das Bild auf die gewünschte Größe: Bild → Bildgröße + wählen Sie Bikubisch Schärfer.
2. Kopieren Sie das Bild auf der zweiten Schicht (Ebene → Ebene Duplizieren).
3. Erhöhen Sie die Schärfe der zweiten Schicht (Filter → Schärfen → Schärfen).
4. Passen Sie die Deckkraft anpassen der Schärfe (Ebene → Deckkraft), und Sie’re getan.

Tricks:

  • Verwenden Sie die Luminanz-Modus für die zweite Schicht zu vermeiden, farbige halos.
  • optimizatiom Leuchtkraft

  • Entfernen Sie unerwünschte Härte durch entfernen von teilen der zweiten Schicht.
  • Optimierung Maske

So hier’s was wir haben, im Vergleich zu dem ursprünglichen Bild,:

Optimierung Erdbeere
Es gibt eine Menge von Artikeln zu diesem Thema; suchen Sie einfach “so erhöhen Sie die Schärfe der Bilder” für mehr Informationen.

Wählen Sie das format

Sobald Ihre Bilder hat die richtigen Proportionen, Größe, Kontrast, und Schärfe, es ist Zeit, um es zu speichern. Wählen Sie das geeignete format für die höchste Qualität mit der kleinsten Größe.
Diese sind die meisten populären Formate:

  • GIF (Graphics Interchange Format – format für den Austausch von Bildern") ist in der Lage speichern von komprimierten Daten ohne Verlust von Qualität im format von nicht mehr als 256 Farben. Das format unterstützt Animationen. Für eine lange Zeit, GIF war das am meisten verbreitete format im Internet, beim PNG war noch nicht gegründet.
  • PNG (Portable Network Graphics) verwendet verlustfreie Kompression und speichert eine unbegrenzte Anzahl von Farben.
  • JPEG (Joint Photographic Experts Group, die Namen der Entwickler) ist das gängigste format für die Speicherung von Fotos und anderen Bildern. Der JPEG-Algorithmus ist es möglich, Sie um das Bild zu komprimieren als verlustbehaftete und verlustfreie. Je kleiner der Verlust, desto größer die Datei.

JPEG_example_down opt

JPEG-Foto mit einer Abnahme der Verdichtung von Links nach rechts, Wikipedia

Also, was zu wählen?

1. Wenn Sie ein Bild haben, wählen Sie JPEG mit einer Qualität von 50-80 Einheiten.
2. Wenn Ihre Darstellung hat große Flugzeuge, JPEG eignet sich nicht, weil es das image distortion. Wählen Sie PNG statt.
3. Animiertes Bild? Wählen Sie "GIF".

Verwenden Sie keine TIFF für das internet. Dieses schöne format wurde entwickelt, um das drucken, aber nicht für das web geeignet.

optim_format

Speichern von Bildern in verschiedenen Formaten. Die JPEG-Datei ist der “leichteste”

– Kann ich noch weniger?
– Ja!

Folgende Dienstleistungen bieten Datei-Komprimierung ohne Qualitätsverlust: TinyJPG, JPEGmini, und TinyPNG.

Wenn Sie nicht über Photoshop

Photoshop bietet eine Kostenlose online-Redakteur für grundlegende Bildbearbeitung (und.g. zuschneiden oder verändern der Größe von Bildern). Sie können auch kaufen Sie eine minimale version für $9.99 pro Monat.

Für unseren Zweck, es ist nicht schlechter als freier Bild-Editoren:

GIMP

Das Programm ist geeignet für Windows, Mac und Linux. Es bietet alles, was Sie brauchen für professionelle Grafiken und Fotos: Werkzeuge für Ebenen und Masken, Farbkorrektur, Retusche, und Malerei. Gimp unterstützt alle gängigen Bild-Datei-Formate.

windows_crop-1024x736

Paint.NET

Grafik-editor für Windows. Einfach, intuitive und benutzerfreundliche Schnittstelle. Nicht so gut wie Photoshop, aber für die Bearbeitung von Fotos für ein online-Shop ist es gut genug. Der editor speichert die änderungshistorie, also jede Aktion kann abgebrochen werden. Es unterstützt Ebenen, hat eine große Sammlung von tools und Filter mit flexiblen Einstellungen.

PicMonkey

Online-editor mit einer einfachen Benutzeroberfläche und allen grundlegenden Funktionen: zuschneiden, drehen, Schärfe, die Arbeit mit Farbe, die Wahl der Auflösung von Fotos. Eine riesige Menge an filtern reicht von professionellen (zum Beispiel, die Wirkung von Filmkorn) comic (zum Beispiel, die Wirkung von Wolken oder winter). Zu bewegen, um die neue operation, Sie brauchen, um zu speichern, oder auf Abbrechen, der Vorherige.

Die meisten tools sind kostenlos verfügbar, aber für einige der erweiterten Funktionen, die Sie zu zahlen haben.

PicMonkey-1024x550

Pixlr

Kostenlose online-editor für Anfänger und Profis. Aussehen und fühlen sich erinnert an Photoshop. Es gibt Funktionen für die Farbe, Zeichnung und Foto-Bearbeitung. Sie können mit Ebenen arbeiten und verwenden verschiedene Effekte und Filter.

Pixlr Editor unterstützt alle gängigen Bildformate.

Pixlr-1024x593

***

Trim, Bearbeiten, die Schärfe anpassen, wählen Sie das format, wählen Sie einen editor… Auf den ersten Blick scheint es kompliziert. Nicht aufgeben. Das Aussehen Ihres Shops lohnt sich der Schweiß. Nach den ersten zehn Bilder, Sie werden in der Lage sein, es zu tun mühelos.

Wenn Sie Fragen haben, fühlen Sie sich frei, um Sie zu bitten, in den Kommentaren unter diesem Artikel.

Über den Autor
Lina is a content creator at Ecwid. She writes to inspire and educate readers on all things commerce. She loves to travel and runs marathons.

Stay up to date!

Get free e-commerce tips, news and inspiring ideas delivered directly to your inbox

Auch Lesen