SEO Basics – Bildoptimierung
Nicht mit Erfindungen, sondern mit Verbesserungen macht man Vermögen.
Henry Ford
Um Vermögen geht es in diesem Beitrag nicht direkt, aber um Verbesserungen. In Zeiten des Mobile First Indexes von Google und Co. wird vor allem die Bildoptimierung immer wichtiger. Wir wollen alle eine schnell geladene Website als Seitenbetreiber und als Besucher. Onlineshop-Betreiber kennen das Problem, ladet eine Seite zu langsam, bricht der Kunde den möglichen Kauf sehr wahrscheinlich ab…es geht am Ende also doch um Vermögen. Nicht irgendeines, sondern Eures.
Für:
Fotografen, Agenturen, Immobilienmakler, Onlineshops, Blogger, usw.
Wie kann ich also meine Bilder optimieren, ohne gleich teure Agenturen beauftragen zu müssen?
Beginnen wir ganz am Anfang. Ein Foto wird geschossen, mit einer Digitalkamera, Smartphone o.ä. und soll auf der eigenen Website, Blog oder Onlineshop verwendet werden. Die Bilder landen auf dem Rechner.
Schritt 1: Der Bildname
Wer viele Bilder online verwendet hat vielleicht den Luxus eines professionellen Bildbearbeitungsprogrammes. Dort lassen sich mehrere Bilder exportieren und auch gleichzeitig umbenennen.
Die Google Bildersuche gehört neben der normalen Websuche zu den am meist genutzten Features. Um also gefunden zu werden bietet sich ein aussagekräftiger Dateiname an:
IMG_0815.jpg sagt nicht sehr viel aus.
meineFirma-schickesHausmitGarten-1.jpg klingt schon besser.
Keine Sonderzeichen, Umlaute oder Emojis verwenden. Ihr müsst nicht Picasso sein, sondern dem ganzen nur einen Namen geben.
Schritt 2: Das ALT-Attribut
Egal ob Ihr die Bilder manuell einbindet oder wrsl. zu 99,9% einen WYSIWYG-Editor benutzt, also Ihr ladet die Bilder in einer Maske hoch. Es wird immer nach einem Titel gefragt und es gibt die Möglichkeit einen Alternativen Text (ALT) einzugeben. In WordPress: Alternativtext.
Dieser Text ist unwahrscheinlich wichtig für die Suchmaschine. Wichtiger als der Titel.
<img src="smiley.gif" alt="Smiley face" height="42" width="42">
Hier eine Codezeile von w3schools.com, wie euer Bild im Code aussehen könnte. Der Alternativtext sollte in einfacher Form beschreiben was man eben auf dem Bild sieht. Name und ALT werden sich sicher ähneln, aber das ALT Attribut spielt für eure Website eine entscheidende Rolle. Des weiteren dient es der Barrierefreiheit und ermöglicht somit auch z.B. Sehbehinderten den Besuch eurer Website, da Sprachassistenten die Informationen des ALT Textes verwenden.
Die gute Nachricht, es gibt mittlerweile Plugins für WordPress oder Apps für Shopify, die diese Arbeit für Euch übernehmen. Jedoch beziehen sich diese Tools gerne auf den Dateinamen und kreieren daraus einen alternativen Text. Daher sollte der Name passen und man sollte das durchaus kontrollieren, was optimiert wurde.
Advanced
Die Hacker unter Euch können sich auch einen Dienst wie Microsoft Azure Cognitive Service gönnen. Es handelt sich dabei um eine Intelligence-API für Bild-/Sprachanalysen etc. Auch hier gibt es schon erste Plugins. Eure Bilder werden von einer KI erkannt und daraus wird ein ALT erstellt.
Sicher der Weg für die Zukunft, irgendwann können wir uns die Arbeit sparen und der Inhalt der Bilder wird automatisch erkannt. Das aber auch als Warnung, wer denkt er kann hier auf Dauer tricksen, wird wahrscheinlich den Kürzeren ziehen. Ehrlich währt am längsten.
Schritt 3: Komprimierung
Wer bis hierher gekommen, erstmal vielen Dank für’s Lesen!
Der Schritt kommt eigentlich am Anfang, ich schreibe es trotzdem am Ende, da viele Bilder wrsl. schon im Netz sind und nun nachträglich optimiert werden müssen. Also, wir haben tolle Bilder, die haben einen super Namen und wir wissen, dass wir das ALT-Attribut haben.
Ladezeiten sagen sehr viel über die Qualität einer Website aus…oder dem Alter. Man kann ein 5MB Bild in einer Maske hochladen, diese werden auch von dem jeweiligen CMS wie WordPress verarbeitet, aber es bleibt ein 5MB großes Bild. Es wird meist eine verbesserte Version ausgeliefert, aber diese werden auch vorher von einem Server verkleinert, bei jeder Abfrage und wir wollen, dass alle sowenig Arbeit wie möglich haben.
Photoshop & Co. bieten einen Web-basierten Export. Aus unserem 5MB Bild wird vielleicht ein 800kB (1024kB = 1MB), das klingt ziemlich klein. Ist aber immer noch eine Menge.
Das können wir nicht selber lösen, dafür brauchen wir eine zusätzliche Software. TinyPNG schafft hier Abhilfe. Anders als es der Name vermuten lässt werden nicht nur PNGs, sondern auch JPGs komprimiert. In der freien Version bis zu 20 Bilder/Tag. Wer mehr braucht, muss sich eine Lizenz kaufen, ein Export direkt aus Photoshop ist möglich.
Es gibt sicherlich Alternativen, TinyPNG bewahrt aber auch Transparenzen bei PNGs. Daher ist es mein persönlicher Liebling und ist sehr populär, daher gibt es auch hier Plugins für sämtliche Plattformen.
Ich hoffe der ein oder andere Tipp war mit dabei. Ihr dürft gerne in die Kommentare schreiben wenn noch Fragen offen sind.
Make Google love you.
Hier noch ein kleines praktisches Beispiel zur Komprimierung:
Foto ©black8suite
