Bilder auf Webseiten - Worauf gilt es zu achten?
BLOG

Bilder auf Webseiten - Worauf gilt es zu achten?

Keine Frage, in der heutigen, sehr visuell gelebten Welt ist an eine Webseite ohne Bildermaterial nicht mehr zu denken. Doch viele und auch grosse Bilder können die Performance der Webseite stark beeinträchtigen. Das muss nicht sein! Wir zeigen dir, wie mit wenigen Tricks die Webseite trotz vielem Bildmaterial blitzschnell bleibt.


Frank Zinsli, 23. Dezember 2022

SEO, Bilder, Image-Services

Das Dateiformat


Es gibt diverse Dateiformate, in denen Bilder gespeichert werden können. Jedes dieser Formate besitzt seine individuellen Vor- und Nachteile. Dies ermöglicht eine differenzierte Nutzung des jeweiligen Formats aufgrund des entsprechenden Anwendungsfalls. Die bekanntesten Formate für Bilder sind JPG, PNG, GIF oder SVG.

Hier ein Mini-Guide darüber, wann welches Format am geeignetsten ist.

  • Normales Bild, Teambilder, Zeichnungen etc.
    → JPG oder WEBP

  • Bild mit transparenten Flächen (bsp. Infografik)
    → PNG oder WEBP

  • Logos, Grafiken & Formen
    → SVG

Für Webseiten gilt in der Regel, wenn immer möglich, nutze WEBP oder SVG als Bildformat.


Dateigrösse


Damit sind nicht die Breite und die Höhe des Bildes gemeint, sondern die Anzahl Bytes, die ein Bild schwer ist. Je leichter das Bild, desto schneller wird es geladen.

Glücklicherweise müssen sich unsere Kunden keine Gedanken darüber machen, in welcher Grösse das Bild hochgeladen wird, denn auf unseren Webseiten laden wir die Bilder immer optimiert. Sprich, die Grösse des Bildes wird immer an das Endgerät angepasst. Dennoch empfiehlt sich, Bilder bereits optimiert zur Verfügung zu stellen (max. 2 MB gross).

So klein wie möglich, so gross wie nötig.


Hilfreiche Tools hierfür können jpegmini, tinijpg oder mein Lieblingstool fürs Optimieren von Bildern squoosh sein.


Fokuspunkte


Häufig müssen Bilder auf einer Webseite zugeschnitten werden. Wenn zum Beispiel im Header ein Bild geladen wird, das immer genau so breit und hoch sein soll wie das Browser-Fenster. Damit das Bild nicht verzerrt wird, wird es mittig zugeschnitten. Das heisst, dass der Mittelpunkt des Bildes in jedem Fall gut sichtbar bleibt.

Unsere Empfehlung: Überlege dir immer, dass Bilder unter Umständen zugeschnitten werden und auf mobilen Endgeräten nicht gleich aussehen wie auf dem Laptop oder dem PC.

Unser lieblings-CMS “Storyblok” verfügt über einen sogennanten Image Service. Dadurch kannst du selbst einen Fokuspunkt im Bild bestimmen. Das Bild wird dann immer so zugeschnitten, dass dein gewählter Punkt immer mittig liegt, so garantieren wir, dass das zentrale Element des Bildes immer sichtbar bleibt.


Darstellung des Bildes auf unterschiedlichen Geräten


Media CDN


Der Image-Service von Storyblok ist nicht der einzige auf dem Markt. Wenn du auf deiner Webseite verschiedene Bilder einsetzt, kann es von Vorteil sein, einen solchen Image-Service in Betracht zu ziehen. Das Einsetzen eines Image-Services bietet dir viele Features, die du bei statischen Bildern, die du direkt von deinem Server lädst, nicht hast. So kannst du zum Beispiel das Bild direkt in das WEBP-Format formatieren, das Bild zuschneiden, die Qualität des Bildes anpassen oder den Fokuspunkt setzen.

Einige Image-Services unterstützen sogar AI, dadurch sind sie unter anderem in der Lage, anhand von Gesichtserkennung, Personen immer ins Zentrum zu rücken.

Wenn du mehr über Image-Services erfahren möchtest, dann schau doch bei einem dieser Services vorbei.

Die drei wohl bekanntesten sind:


Bilder für SEO optimieren


1. Bild optimieren


Damit du keine SEO-Einbusen bekommst, müssen Bilder immer fürs Web optimiert werden, dies kann über einen Image-Service geschehen oder durch das Einbinden vom sogenannten srcset-Attribut.

    
      <img
  src="img1.png"
  srcset="
    img2.png 100w,
    img3.png 500w,
    img4.png 1000w
  "
>
    
  


2. Dateiname anpassen


Benenne die Datei so, damit der Name für Suchmaschinen, aber auch für Menschen sinnvoll erscheint. Am besten fügst du passende Keywords in den Dateinamen ein. Zudem ist es wichtig, dass du verschiedene Wörter mit einem Bindestrich und nicht mit einem Unterstrich trennst, da ansonsten Suchmaschinen nicht in der Lage sind, die einzelnen Wörter zu lesen.


3. Alternativtext


Ein:e Besucher:in deiner Webseite kann das Bild sehen und erkennt, was darauf zu sehen ist, eine Suchmaschine aber nicht. Darum ist es wichtig, einen Alternativtext hinzuzufügen, in dem klar steht, was auf dem Bild zu sehen ist. Zusätzlich bietet der Alternativtext eine Hilfe für sehbehinderte Besucher, damit auch sie verstehen, was auf dem Bild zu sehen ist.

    
      <img
  src="img1.png"
  alt="Beispiele der Bildpositionierung auf unterschiedlich grossen Devices anhand des gesetzten Fokuspunktes."
  srcset="
    img2.png 100w,
    img3.png 500w,
    img4.png 1000w
  "
>
    
  


4. Weitere Optimierungsmöglichkeiten


Wenn deine Webseite von vielen Bildern lebt, die absolut relevant für den Inhalt der Webseite sind, kannst du auf strukturierte Daten zurückgreifen, um Google und anderen Suchmaschinen noch mehr relevante Informationen zu den Bildern zu liefern. Zusätzlich könntest du eine Sitemap für die Bilder einrichten. Damit kannst du Google und andere Suchmaschinen bei der Indexierung der Bilder helfen. Weitere Informationen zum Errichten einer Sitemap für deine Bilder findest du in unserer Blogserie zum Aufbau einer Webseite unter https://codecrush.ch/blog/wozu-brauchts-eine-sitemap.

Frank Zinsli bei Code Crush
Autor:in

Frank Zinsli

Umgeben von Herausforderungen fühle ich mich am wohlsten. Am liebsten arbeite ich mit den neusten Technologien und versuche zu verstehen wie diese Funktionieren. Wenn am Abend der Kopf raucht und nichts mehr geht, dann weiss ich, es war ein guter Tag.