Webdesign: Bilder richtig einbinden

Ein Bild kann mehr als tausend Worte sagen. Zwar ist Content King, aber Bilder können den Text wunderbar ergänzen. Und mehr noch: eine gute Bildsprache erzeugt manchmal erst die nötige Aufmerksamkeit.

Und ein gutes Bild schafft nicht nur Aufmerksamkeit und visualisiert Informationen, sondern es erzeugt auch Emotionen. Und Aufmerksamkeit, Infomation und Emotionen sind genau die Punkte auf die es zum Beispiel bei einem gut gemachten Online Shop oder auch auf einer Firmenwebseite ankommt.

Nun ist es allerdings so, dass bevor ein Foto auf einer Webseite erscheinen kann, es zunächst ja einmal geschossen werden muss. Hat man als kleiner Shopbetreiber ein gewisses Talent und fotografisches Know How, kann man seine Produkte unter Umständen selbst fotografieren. Wem das Talent fehlt, um verkaufsfördernde Fotos zu erstellen, sollte sich vielleicht an einen Profi wenden. Wie man auf produktfotografie-24h.de sieht, muss das noch nicht mal kompliziert sein.

Hat man Bilder vorliegen, die die gewünschten Informationen gut visualisieren, Emotionen transportieren und Aufmerksamkeit erzeugen, dann müssen diese Bilder nur noch technisch richtig auf der Webseite eingebunden werden.

Bilder korrekt einbinden

Und das ist von nicht zu unterschätzender Bedeutung. Technisch falsch oder unzureichend eingebundene Fotos sorgen mitunter dafür, dass eine Webseite in den Ergebnissen von Suchmaschinen schlechter ranken. Und man sollt nicht unterschätzen, dass sehr viele Surfer über die Google Bilder Suche auf einer Webseite landen. Macht man hier etwas falsch, erscheinen die eigenen Bilder gar nicht erst hier oder nur sehr weit hinten. Sind die Bilder dann auch noch nicht komprimiert oder allgemein zu groß, sorgen sie für lange Ladezeiten. Weswegen Surfer schnell wieder von der Webseite verschwinden.

Worauf muss man als achten, wenn man Bilder einbindet?

ALT Tag verwenden

Der ALT Tag macht zwei Dinge. Er fasst in Worte, was ein Bild zeigt. Und das ist ein wichtiges Kriterium für das Ranking in der Bildersuche. Außerdem ist es wichtig fürScreenreader-Programme von sehbehinderten Menschen.

Höhe und Breite angeben

Man sollte unbedingt mit den Attributen Attribute width und height die Höhe und Breite eines Bildes angeben. Hintergrund ist, dass Browser die Inhalte in einer bestimmten Reihenfolge lädt. Werden die Abmessungen nicht angegeben muss der Browser bis zum vollständigen Laden der Bilder warten, bis er deren Abmessungen kennt. Erst dann kann die Rendering Engine das Layout der Seite berechnen und darstellen. Fehlende Abmessungen halten diesen Prozess also auf. Gibt man die Abmessungen jedoch an, baut der Browser erst das Layout auf und lädt dann die Bilder. Der Surfer bekommt also schon deutlich früher etwas von der Webseite zu sehen.

Bilder nicht skalieren

Man sollte Bilder immer in genau der Größe einbinden, in welcher sie auch angezeigt werden sollen. Auf das browserbasierende Skalieren sollte man unbedingt verzichten. Denn in der Regel sorgt dies dann dafür, dass der Browser ein Bild in unnötig großer Auflösung und Dateigröße herunterladen muss. Dies bewirkt natürlich eine höhere Ladezeit. Und etwas Zeit geht auch drauf, weil der Browser das Bild erst noch skalieren muss. Ein einzelnes Bild mag da nicht ins Gewicht fallen. Viele Bilder ab schon.

Achten man also auf diese Kleinigkeiten tut man seinen Webseiten Besuchern und auch den Suchmaschinen einen großen Gefallen. Und das schlägt sich dann vielleicht auch in den Umsatzzahlen eines Shops nieder.