Bildop­ti­mierung - macht Eindruck und bringt Traffic

Weniger Stock-Fotos und mehr eigene Fotos

Sicher hast du schon mal Imagefotos aus Fotodatenbanken angeschaut, weil du vielleicht ein günstiges Foto benötigt hast und du dafür keinen Fotografen engagieren wolltest. Fotos aus Imagedatenbanken haben einige

Vorteile:

Sie haben eine gute fotografische Qualität und sehen professionell aus. Sie sind sofort benutzbar. Unkomplizierte Handhabung. Sie haben ein klares Lizenzmodell. Sie sind günstiger als ein Fotoshooting. Man sieht vor dem Bezahlen genau was man bekommt, denn sie sind schon fertig.
Man kann sich inspirieren lassen, wenn man noch keine klare Vorstellung hat.

Sie haben aber auch Nachteile. Und diese wiegen stärker als die eher kurzfristigen Vorteile. Marketing und Design solltest du eher als Investition in das eigene Unternehmen betrachten und nicht als lästige Unkosten. Die

Nachteile sind:

• Sie sind nicht exklusiv. D. h. jeder kann exakt das gleiche Foto weltweit benutzen.
• Sie sind nicht individuell wie du und dein Business, sondern austauschbar.
• Der Ausdruck und die Stimmung der meisten Stock-Fotos sind ähnlich. Was viel benutzt wird, wird viel produziert.
• Stock-Fotos werden von Kunden unterbewusst als solche identifiziert und als nicht authentisch klassifiziert. Das schwächt das Vertrauen in deine Leistung/Produkte.
• Sie sind nicht nachhaltig. Sie fördern nicht den langfristigen Markenaufbau. Deshalb sind sie keine Investition, sondern Kosten.

Gratulation, wenn du dich entschließen solltest, keine oder nur sehr wenige, ausgesuchte Stock-Fotos für einen Webauftritt zu nutzen. Im nächsten Schritt musst du dir einen Fotografen suchen. Je genauer du ihn briefst, desto eher wird deine Erwartung erfüll oder sogar übertroffen.

Eine gute Bildqualität sieht professionell aus

Was heißt eigentlich "professionell" in diesem Zusammenhang? Deine Website soll deine Leistung oder deine Produkte im besten Licht zeigen. Was nützt eine gute Leistung, wenn sie als solche nicht erkannt wird? Kunden möchten eine größtmögliche Sicherheit haben, dass die Produkte oder Leistungen, die sie kaufen, auch wirklich ihren Ansprüchen genügen. Ohne eine vertrauenswürdige Empfehlung und ohne die Bekanntheit deiner Firma wissen sie das ja nicht. Deswegen musst du auf deinem Internetauftritt alles tun, damit deine Leistung oder deine Produkte richtig gut aussehen. Eine bloße Behauptung, reicht nicht.

Wenn deine Website aus Sicht der Kunden professionell aussieht, heißt das, sie geben dir einen Vertrauensvorschuss. Sie denken, so wie du deine Leistung präsentierst, ist es gut möglich, dass die Leistung dem erwarteten Qualitätsstandard entspricht. Sie übertragen ihre Seh-Erfahrung von bekannten Markenauftritten auf dein Webdesign. Und ein großer Teil deines ersten Eindrucks entsteht über deine Bilder.

Was macht eine gute Bildqualität aus

Eine gute Bildqualität besteht aus der professionellen technischen Umsetzung. Eine professionelle Qualität ist immer ein Standard. Nicht mehr, aber auch nicht weniger. Erst kreativ ästhetischen Kriterien sorgen für Begeisterung. Für gute Standardbusinessfotos musst du dir folgende Fragen stellen:

• Ist das Produkt im Mittelpunkt der Darstellung? Klar gegliedert, eindeutiger Fokus,
• Steht die Person oder der Vorteil der Leistung im Mittelpunkt (Bei Dienstleistung)?
• Ist die Produkt- oder die Leistungsdarstellung attraktiv? So gut wie beim Wettbewerber?
• Ist das Foto ausgewogen? Keine starken Kontraste. Alles wichtige sichtbar.
• Ist die technische Fotoqualität in Ordnung? Schärfe, Ausschnitt, Helligkeit, angenehme Farben, realistische Farben, Spiegelungen, nicht pixelig oder schwammig (bei zu geringer Auflösung)

Kleine Dateigrößen erhöhen die Ladege­schwin­digkeit

Die Optimierung der Bilddateigröße ist ein wichtiger Teil der technischen Bildoptimierung fürs Internet. Alle Informationen im Internet, die auf unseren Bildschirmen angezeigt werden, müssen von Web-Servern erst geladen werden. Je größer eine Datei ist, desto mehr Zeit braucht sie, bis sie geladen ist. Je kleiner die Bilddatei und je größer die Bandbreite, desto schneller wird sie geladen und angezeigt. Liegt die Bilddatei dagegen auf der Festplatte oder dem internen Speicher unseres Computers/Smartphones, bremst die Dateigröße einer Bilddatei nicht die Ladezeit zur Bilddarstellung, weil die Bandbreite riesig ist.

Was beeinflusst die Ladezeit?

Damit die Besucher beim Aufrufen deiner Website nicht warten müssen, sollten die Fotos und der Server für ein schnelles Laden optimiert sein. Das beeinflusst die Ladezeit deiner Fotos:

Die Dateigröße

Angenommen, du schießt Fotos mit deinem Smartphone für deinen Blog. Dann hat jedes Foto leicht eine Dateigröße von mindestens einem Megabyte. Ein Megabyte (MB) sind 1000 Kilobyte (kB). Je mehr Fotos du mit dieser Dateigröße auf deine Webseite hochlädst, desto länger dauert das Laden, bis alle Bilder dargestellt werden.

Die Bild Maße

Dein oben genanntes Smartphone-Foto hat in der Regel bei modernen Smartphones eine Auflösung von 3648 x 1680 Pixeln. Das hängt natürlich von der Voreinstellung deiner Smartphone-Kamera ab. Aber die hohe Auflösung ist nicht ungewöhnlich und vom Hersteller so vor eingestellt. Die maximale Darstellungsbreite der Fotos in deinem Blog ist aber wahrscheinlich nur etwas mehr als 800 Pixel.

Funktionen des Webservers

Je nachdem, welches Hosting-Paket du bei deinem Hosting Provider ausgewählt hast, beeinflusst das die Ladezeit deiner Website. Für kleine Websites reicht oft ein Shared-Hosting. Das ist günstig, hat aber eine geringere Ausstattung und Performance als teurere Hosting-Pakete. Du bekommst nur das, was du bezahlst. Folgende Servereigenschaften beeinflussen die Ladezeit:

• Shared-Hosting, wie viele Webseitenbetreiber teilen sich den Serverplatz mit dir und wieviel Traffic wird zusammen gleichzeitig verbraucht
• Das Betriebssystem des Servers, das Caching
• Die Verwendung des http/1.1 oder http/2 Protokolls
• Die Ausstattung des Servers, RAM, Festplattengeschwindigkeit (SSDs)
• Gzip-Komprimierung zur Verkleinerung von Code
• Funktionen deines Website-CMS
• Browser Caching und Speed-Optimierungs-Plugins
• Die Lazy-Load-Funktion von Bildern. Lädt Bilder erst wenn sie im Blickfeld sind.

Tiefer will ich technisch nicht einsteigen. Aber gut, dass du hier einige Begriffe schon gehört hast. Mehr technische Information kannst du googeln oder frage deinen Hoster oder Webdesigner.

Wie optimiere ich meine Fotos für eine schnelle Ladezeit?

Führe die folgenden drei Schritte aus:

Die Bild Maße verkleinern.
Diese wird in Pixeln gemessen. Genauer in Pixeldichte, pixel per inch (ppi). Dpi ist fürs Web eine falsche Bezeichnung, obwohl es ständig benutzt wird.
Verkleinere das Bild proportional auf die maximale Breite wie es auf deiner Website dargestellt wird. Die Anzeige der Auflösung in dpi in manchen Programmen spielt dabei keine Rolle. Sie hat keine Bedeutung für das tatsächliche digitale Bild. Die Pixeldichte hängt vom darstellenden Gerät ab. Ein 300 Pixel breites Foto hat auf jedem Monitor, egal welcher Auflösung (Pixeldichte ppi), immer 300 Pixel Breite.

In das Dateiformat .jpeg konvertieren und die Kompressionsqualität einstellen. Damit verkleinerst du die Dateigröße, verschlechterst aber auch die Bildqualität. Hier hilft nur probieren. Die Jpeg-Komprimierung kann sich bei jedem Foto anders auswirken.

Spezielle Foto-Kompressionsprogramme nutzen, die das Bild verlustfrei verkleinern. Du kannst auch ohne Schritt 2 die Dateigröße des Fotos im Kompressionsprogramm verkleinern. Der bekannteste, kostenlose JPEG-Kompressor ist wahrscheinlich TinyJPG oder TinyPNG für das .png-Format. Das geht alles online, ohne ein Programm installieren zu müssen.
Für Website Content Management Systeme gibt es Erweiterungen, die die Komprimierung automatisch nach dem Hochladen erledigen. Frage mal deinen Webdesigner.

Relevante Bildin­for­ma­tionen mit Html-Tags sorgen für mehr Traffic.

Der vierte Aspekt der Bildoptimierung betrifft die Suchmaschinenoptimierung mit dem Ziel, bei Suchanfragen weiter oben zu ranken und dadurch mehr Besucher auf die Website zu ziehen. Natürlich bist du kein Suchmaschinenoptimierer, aber wenn du nachfolgende Tipps bei deinen Fotos für die Website beachtest, werden dir die Fotos helfen, besser zu ranken.

Der Dateiname

Gib deinem Bild einen Dateinamen, der zum Inhalt deines Textes passt, in dem das Bild erscheint. Bietest du z. B. Coaching für Arbeitssuchende an und geht es in dem Artikel um "Selbstbewusstsein beim Vorstellungsgespräch" dann kann der Bildtitel das Haupt-Schlüsselwort deines Artikels enthalten, also "selbstbewusstsein-vorstellungsgespräch". Auf dem Bild sieht man einen Mann, der beim Gespräch seine Beine auf den Schreibtisch legt. Falsch wäre z. B. der Bildtitel "mann-mit-beine-auf-tisch". Das beschreibt zwar das Bild, aber dafür willst du ja nicht gefunden werden.

Das Alt-Attribut

Das ist der Alternativ-Text, der geladen wird, wenn das Bild nicht angezeigt werden kann. Dieses Feld siehst du in deinem Content Management System. Hier schreibst du, passen zu obigem Beispiel, folgenden Text rein: "Selbstbewusste Person im Vorstellungsgespräch."

Das Title-Attribut

Hier kannst du den gleichen Text wie für das Alt-Attribut reinschreiben. Das Titel-Attribut wird beim Mouse-Over über dem Bild angezeigt.

Schreibe dir genau die Arbeitsschritte auf, wenn du nicht so oft Texte und Bilder auf deiner Website änderst. Beim nächsten Mal folgst du einfach deiner Anleitung und alles dauert nur 10 Minuten. Machst du das öfters, geht es viel schneller. Das ist es auf alle Fälle Wert.