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

Die Optimierung der Bilder für Web: Ein Praktischer Leitfaden

Nov 8, 2016 by Michelle Nickolaisen
A practical guide to optimizing images for the web
Posted Nov 8, 2016 by Michelle Nickolaisen

Bilder sind entscheidend für die Ausführung einer e-commerce-Shop erfolgreich — nachdem alle, wenn Ihre potentiellen Kunden können nicht sehen, was Sie kaufen, Sie sind nicht sehr wahrscheinlich, es zu kaufen. Bilder können auch Pause machen oder Ihre blog-Beiträge, steigern Sie Ihre SEO, und mehr.

Lesen Sie weiter und finden Sie heraus, wie Sie Ihre Fotos und Bilder für Sie arbeiten.

Warum Bild-Optimierung Sache?

Der offensichtlichste Vorteil für die Optimierung Ihrer Bilder ist, dass es besser für Sie in langes laufen.

Es lässt die Nutzer wollen, um zu bleiben auf Ihrer website (da können Sie deutlich sehen Ihre Bilder, und Sie sind nicht ewig zum laden).

Es macht Ihre website leichter zu finden, die in den Suchergebnissen (denn gute Bild-Optimierung ist Suchmaschinen-freundlich).

Es gibt auch die Tatsache, dass es gut für Ihre Benutzer. Bild-Optimierung, abgesehen von generell mehr Benutzer-freundlich, auch hilft machen Sie Ihre website besser zugänglich für Menschen mit Sehbehinderungen (wer könnte die Verwendung von screen-Readern, die zu ziehen aus der alt-tags, um das Bild zu beschreiben, um dem Nutzer).

Das bedeutet mehr Besucher für Ihre Webseiten und potentiell mehr Umsatz.

Lesen Sie auch: Einfache Möglichkeiten, um Ihre Produkte attraktiver für die Verbraucher

Bild-Optimierung 101

Also, was geht in Bild-Optimierung?

Datei-Namen und-code

Die erste und einfachste Sache, die Sie tun können, ist zu ändern Sie Ihr Bild mit dem Namen etwas beschreibenden, statt 10934.jpg.

Beschreiben Sie entweder, was die im Bild dargestellten ("RedCorvette.jpg") oder was in der post, wenn dies für ein blog-post ("MaintainingYourCorvette.jpg").

Danach, Sie können hinzufügen, ein "alt" - tag.

Dies ist ein tag, das geht innerhalb der image-code, eine kurze Beschreibung, was das Bild ist — Sie wollen, um das Bild zu beschreiben in ein paar Worten, während Sie mit relevanten keywords.

Mit dem obigen Beispiel, haben Sie vielleicht einen alt-tag "2010 Red Corvette Wartung."

Aber nicht keyword Sachen die alt-tag — würden Sie nicht hinzufügen “Auto-rote corvette Wartung 2010 automobile shop kaufen" als alt-tag da, dass können Sie spam-Filter in der Suchmaschinen-algorithmen, und es ist auch nicht Benutzer-freundlich für sehbehinderte Zuschauer.

Die meisten Websites haben eine einfache Möglichkeit, Bearbeiten Sie die " alt " - tags, aber wenn nicht, klicken Sie auf "Quelltext anzeigen" oder "HTML-Ansicht" in dem text-editor öffnen und Bearbeiten Sie es selbst.

Alt-Tags_HTML_Image_Code.png

Abgesehen von Dateinamen und alt-tag, viele Website-builders (wie WordPress) geben Sie einen Speicherplatz für Bild-Titel, Beschriftung, und Beschreibung (und einfache Bearbeiten der alt-tag) wenn Sie ein Bild hochladen, wie unten gezeigt.

Das ausfüllen aller verfügbaren Felder ist die beste Faustregel für die Optimierung. Die Beschriftung wird angezeigt, um Ihre Durchschnittliche Zuschauer, aber alles andere wird meist verwendet werden, die von Suchmaschinen und Screenreadern (für sehbehinderte Zuschauer, die verlassen sich auf Bild-Beschreibungen).

 image descriptions

Bild Beschreibungen in WordPress

Größe und format

Reduzieren Sie Ihre Bild-Datei Größen. Offensichtlich, Sie möchten, dass die Bilder groß genug sein, um zu sehen,, aber Sie brauchen nicht zu sein, das hochladen von Bildern, die tausend Pixel breit und hoch.

Stellen Sie sicher, dass Sie nicht hochladen, das Bild in voller Größe und dann ändern Sie einfach die Maße, dass es scheint, als über das Bild code. Wenn Sie das tun, die Besucher, die computer haben, laden Sie das Bild in voller Größe, und es werde verlangsamen Sie Ihr Last time down.

Es gibt keine hard-und-schnell-Regel für die Datei-Größe oder Maße, aber die Allgemeine Kern ist "die kleinste Dateigröße möglich, ohne dass das Bild zu klein oder nicht lesbar."

Für die in-line-blog-Bilder, viele Seiten sind mit einer Breite von 500-800 und einer Höhe von 300-600. Sie können immer fügen Sie einen link zum Bild in voller Größe, so dass die Menschen bekommen ein größeres Bild, wenn Sie klicken Sie auf.

Soweit Dateigröße geht, Ihre Bilder sollten nie größer sein als 1 MB, und idealerweise, die meisten von Ihnen werden etwa 100-200 Kb.

Sie können auch verringern Sie die Auflösung, um die Dateigröße kleiner, aber mit der Aufstieg des retina-displays, Sie wollen nicht, um die Auflösung zu viel oder die Bilder verschwommen auf diesen displays.

Ändern Sie die Dateigröße, Sie können in der Regel wählen Sie exportieren ein Bild in eine etwas geringere Qualität, ändern Sie die Abmessungen des Bildes, oder ändern Sie den Dateityp (siehe unten).

Verwenden Sie die richtige Datei-format für die job. Für die meisten Anwendungen, .jpg wird Ihre beste Wette. Es unterstützt die meisten Farben mit dem geringsten Umfang möglich.

Gifs sind in der Regel größer die Datei-Größe ratsam für statische Bilder, aber Sie sind ideal für animierte Bilder (Giphy, jeder?).

Dies ist eine großartige Möglichkeit zu zeigen Sie Ihr Produkt von allen Seiten oder in Bewegung, ohne dass die Nutzer laden Sie eine vollständige video — Ecwid können Sie animierte gifs für das.

Für Bilder mit text, .png ist eine gute Wahl — diese Bilder sind in der Regel größer in der Dateigröße, haben aber knackiger text (und auch Transparenz unterstützen).

Best practices für Bilder

Auf Ihrer Website:

  • Stellen Sie sicher, dass alle zusätzlichen Beschreibung möglich, machen Sie Ihre Produkt-Seiten und blog-Beiträge Suchmaschinen-freundlich.
  • Mehrere Winkel Ihrer Produkte.
  • Stellen Sie sicher, dass Sie ein featured image, das ist in der Regel das Bild gezogen für social-media-Vorschau.

Verwenden Sie immer qualitativ hochwertige Bilder, die breiter als 500 Pixel-1000px für Ihr Produkt Bilder. Nach dem hochladen Sie zu Ihrem Geschäft, Ecwid-hosts Bilder und lässt den laden schnell automatisch. Werden Sie sicher, dass Ihre Ladezeit ist die beste möglich, versuchen Sie nicht, um sehr große Bilder hochladen, zum Beispiel, diejenigen, die im 4K-format.

Es’s am besten zu verwenden quadratische Bilder für Ihr Produkt-und Kategorie-Bilder, als quadratische Bilder sind mobile-freundliche und immer gut Aussehen auf jedem Gerät. Check-out Ecwid store demo für ein Beispiel.

Ecwid unterstützt retina-ready thumbnails erstellt aus den Produkt-Bildern, so don’t Sorge über Ihr Geschäft gut Aussehen auf retina-displays!

Alles, was Sie tun müssen ist, melden Sie sich in Ihr Control-Panel, dann gehen Sie auf Einstellungen und dann auf "Was ist Neu" die Funktion aktivieren.

the Ecwid Control Panel

Erfahren Sie mehr: Gewusst wie: Optimieren der Produkt-Bilder: Schritt-für-Schritt-Anleitung und Eine Übersicht der Dienstleistungen

Auf social media:

Im Allgemeinen, Sie wollen nicht zu verwenden, das gleiche Bild auf mehreren sozialen Netzwerken — es ist besser, Sie optimieren das Bild zu optimieren für jedes soziale Netzwerk. Check-out Hubspot ' s social media cheat sheet-Bild um die genaue Bild-Spezifikationen für alle Netze.

Wenn Sie wichtige Texte in Ihre Bilder, stellen Sie sicher, dass es leicht zu Lesen, wie jemand blättert durch Ihre Facebook-oder Twitter-timeline.

Stellen Sie sicher, dass Sie bei der Optimierung Ihrer Angebote zu haben, die vorgestellten Bilder, die gut Aussehen auf Seiten wie Facebook und Twitter.

Zum Beispiel, Twitter ' s auto-generated link-Zusammenfassungen (die Karte mit der Zusammenfassung oder Summary Card with Large Image — mehr auf Twitter Karten, hier den Kopf) wird entweder das erste Bild auf der Seite oder dem vorgestellten Produkt Bild, wie so:

Ihre featured image optimiert werden sollte gut Aussehen auf den link Vorschau

Ihre featured image optimiert werden sollte gut Aussehen auf den link Vorschau

Einige von den Bild-Machern in den app-Bereich unten haben vorgefertigte social-media-Bild-Vorlagen, die Sie verwenden können, um Starthilfe.

Verwandte: Besten Gratis-Apps zur Perfektionierung Ihrer Social-Media-Images

In Ihrem newsletter:

Verlassen Sie sich nicht auf Bilder zu vermitteln, die wichtigen Teile der E-Mail.

Viele E-Mail-Anbieter zeigen keine Bilder standardmäßig (und geben den Benutzern die Möglichkeit zu zeigen, Bilder), also, wenn Sie wichtige Teile der Nachricht in einem Bild, ein Benutzer könnte es Scannen schnell und vermisse es. Statt, verwenden Sie Bilder als visuelle Akzente zur Ergänzung der Wörter in der E-Mail.

Mehr und mehr Menschen Lesen E-Mails auf Ihren Handys, so stellen Sie sicher, um zu testen, wie Ihre E-Mails Anzeige auf kleineren Bildschirmen durch senden Sie eine test-Kopie der newsletter und Lesen Sie es auf Ihrem Handy.

Dies bedeutet auch, dass Sie wollen, stellen Sie sicher, dass Ihre Bilder eine ausreichend hohe Auflösung gut Aussehen auf Handy-Bildschirmen — zum Beispiel, das iPhone 6 hat eine PPI (Pixel pro Zoll) der 326 und die 6 plus hat eine PPI von 401.

Auch Lesen: Wo Finden Sie Kostenlose Bilder im Web: Stock-Fotos, Datenbanken, und Newsletter

Die apps, die Sie brauchen, um Ihre Bilder optimieren

Wenn Sie möchten, einen kostenlosen Photoshop-Ersatz, check-out GIMP. Es ist kostenlos, open-source, und funktioniert auf Windows, Mac, oder Linux.

Der Nachteil ist, dass es hat eine etwas steilere Lernkurve als Photoshop, aber es gibt viele online-tutorials zu helfen, gehen Sie durch die Dinge.

Das sagte, GIMP (oder Photoshop) ist wahrscheinlich der overkill für Ihre Durchschnittliche blog-post/Produkt-Bild. PicMonkey kann dir helfen, grundlegende Bildbearbeitung, zusammen mit Collagen und image-Erstellung für social media.

Wenn Sie möchten, Bearbeiten Sie Ihre Bilder auf dem Sprung, Pixlr hat mehrere app-Optionen, plus eine online-option. Wenn Sie Fotos Bearbeiten, VSCO ist eine gute Wahl für

Last but not least, es gibt Canva, das ist weniger ein Bild oder Foto-Bearbeitungs-app, und mehr zu einem Grafik-tool zur Erstellung für online-Bilder. Sie können ganz einfach text hinzufügen, Bilderrahmen, Hintergründe, und es bietet auch social-media-bereit, Bild-Vorlagen.

Noch in der Notwendigkeit von Produkt-Bilder zu Bearbeiten? Für einen crash-Kurs auf die Einnahme von Produkt-Fotos mit Ihrem smartphone, hier den Kopf.

Lesen Sie auch: Wie man einen Guten Hintergrund in Bildern Ihrer Produkte Ohne Verwendung von Photoshop

Noch nicht einrichten Ihres e-commerce-Shop noch? Anmelden und starten Sie mit Ecwid heute.

About The Author
Michelle is a freelance writer living in Richmond, VA, with her Shiba Inu and cat named after the Hulk. When she's not writing about business, she can usually be found working on her novel series or other side projects, or training Brazilian jiu-jitsu.

Stay up to date!

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

Auch Lesen