Ob auf einem Blog, der Unternehmensseite oder im Onlineshop – Bilder bringen Abwechslung, Emotionen und auch Struktur auf deine Website. Ein schönes, zu den Seiteninhalten passendes Bild auf der Startseite vermittelt einen positiven ersten Eindruck. Bilder in Blogbeiträgen können die geschriebenen Inhalte unterstützen. Produkt- und Anwendungsbilder im Onlineshop helfen Usern bei der Kaufentscheidung.
Der positive Effekt von Bildern kann aber zunichte gehen, wenn du beim Einsatz nicht einige Regeln beachtest. Denn Bilder gehören auch zu den schwersten Komponenten einer Website und haben daher direkten Einfluss auf deine Ladezeiten. Stell dir deshalb zuerst folgende zwei Fragen, bevor du ein Bild auf einer deiner Seiten einfügst:
- Passt das Bild inhaltlich zum Text? Du solltest nie ein Bild einfügen, nur damit da ein Bild ist. Wenn es nur ein Bild gibt, das für deinen Inhalt relevant ist, brauchst du kein Zweites. Hier gilt die bekannte Regel: weniger ist manchmal mehr.
- Bietet das Bild den Website-Besuchern einen Mehrwert? Ein gutes Headerbild etwa fasst den Inhalt eines Beitrags visuell zusammen, eine Infografik oder ein Screenshot ist vielfach verständlicher als lange Erklärungen in Textform. Aber brauchen User wirklich Produktfotos aus allen möglichen Blickwinkeln, um sich für oder gegen das Produkt zu entscheiden?
Tipp: Was aus Webdesign-Sicht bei der Bildwahl zu beachten ist, hat unsere Grafikerin Anja in ihrem ultimativen Webdesign-Guide bereits erklärt.
Bring dein Bild ins richtige Format
Du hast dich also für ein Bild entschieden, das auf deine Website gehört. Hochladen, veröffentlichen, fertig? Ganz so einfach ist das leider nicht. Zunächst solltest du dein Bild ins richtige Format bringen. Das heißt zum einen, dass es von den Proportionen und Seitenverhältnissen her gut in deine Seite passt, andererseits sind aber auch das Dateiformat und die Auflösung wichtig. Du solltest deshalb all deine Bilder vor dem Upload noch bearbeiten.
Tipp: Es gibt mittlerweile zahlreiche gute kostenlose Bildbearbeitungs-Softwares, die auch für Grafik-Laien geeignet sind. In unserem letzten Blogbeitrag findest du 8 Gratis-Tools im Test.
Hier eine Übersicht, welche Bearbeitungsschritte sinnvoll sind für optimalen Pagespeed:
- Bildgröße für Anzeigeformat anpassen: Ist dein Originalbild 6000×3500 Pixel groß, auf der Website soll es aber nur auf 1200×700 Pixel dargestellt werden? Dann verkleinere das Bild vor dem Upload aufs Zielformat.
- Auflösung anpassen: Für die Verwendung im Web brauchst du keine druckfähige Auflösung von 300 dpi. 72 dpi sind im Online-Bereich ausreichend.
- JPG-Dateien verwenden: Speichere deine bearbeiteten Bilder als JPG-Dateien ab. Diese haben die kleinere Dateigröße als PNG-Dateien. PNG solltest du nur verwenden, wenn du einen transparenten Hintergrund benötigst.
- Umwandlung in WebP-Dateien: Für noch bessere Ladezeiten ist eine Umwandlung deiner Bilder ins WebP-Format empfehlenswert. WebP ist ein von Google entwickeltes Bildformat, das die Dateigröße weiter verringert, ohne Verlust der Bildqualität. Die Umwandlung von Bildern in dieses Format ist nicht ganz so einfach, deshalb rate ich zu einem WordPress-Plugin wie Imagify oder ShortPixel.
Eine Alternative zur Konvertierung in WebP ist die zusätzliche Komprimierung der JPG-Datei. Ein praktisches Tool hierfür ist TinyJPG.
Alt-Texte nicht vernachlässigen
Vielfach vernachlässigt oder nur spärlich befüllt wird beim Bild-Upload das Feld für den Alt-Text. Man will ja einfach nur ein Bild auf seiner Seite. Doch Alt-Texte sind nicht einfach lästige Textfelder, die beim Bild-Upload erscheinen, sondern wichtig für die Barrierefreiheit deiner Website. Menschen, die nichts oder nur eingeschränkt sehen, können sich Webseiteninhalte inkl. Alt-Texte der Bilder vorlesen lassen. Ohne Alt-Text werden ihnen also all deine mit Bedacht ausgewählten Bilder vorenthalten. Beschreibe deshalb im Alt-Text, was auf deinen Bildern zu sehen ist.
Ein weiterer Punkt, der für Alt-Texte spricht: Suchmaschinenoptimierung! Da deine Bilder ja inhaltlich relevant sind für deine Seite, wirst du im Alt-Text automatisch wichtige Keywords erwähnen. So merken auch Suchmaschinen, dass es sich dabei um Content handelt, der für dein Kernthema relevant ist.
Einen Teil der WordPress Tipps & Tricks verpasst?
Brauchst du weitere Tipps für deine WordPress-Seite? In unserem WordPress-Guide findest du verschiedene Anleitungen übersichtlich zusammengefasst.
