Hero-Bilder hast du sicher schon zuhauf im Web gesehen. Die Hero-Section ist der oberste Bereich einer Landingpage. Und das Hero-Bild ist oft ein Full Screen-Bild genau dort. Meistens wird’s von Text und einem Button überlagert. Die Krux ist, dass so große Bilder oft auch große Dateien sind. Deren Darstellung am Bildschirm hat dann auch große Umweltauswirkungen und kann einiges an Ladezeit in Anspruch nehmen. Dem kann man aber ein bisschen vorbeugen – und zwar so:
1. Bild aussuchen und aufhübschen
Wenn du das Bild deiner Wahl gefunden hast, kannst du zuerst mal schauen, ob es noch Nachbearbeitung braucht. Muss man vielleicht ein bisschen Rauschen entfernen, oder zahlt sich eine Tonwertkorrektur aus? Sind unschöne Flecken im Bild, die noch weg müssen? Ich mach das immer gleich zu Beginn.
2. Hintergrund weichzeichnen
Gibt’s in deinem Bild ein eindeutiges Motiv, das sich klar vom Hintergrund abhebt? Dann kannst du den Hintergrund weichzeichnen. Das bringt mehr Tiefe ins Bild und verringert gleichzeitig die Dateigröße.
3. Bild zuschneiden
Ein klassischer Desktopbildschirm hat eine Auflösung von 1920*1080 Pixel (Full HD). Ist dein Bild größer, kannst du es auf diese Größe zuschneiden oder skalieren. Ist es kleiner, ist es wahrscheinlich nicht wirklich gut als Full Screen-Bild geeignet.
Tipp: Wenn du weißt, dass dein Bild erst unter der Menüleiste sichtbar wird, kannst du auch die Höhe der Menüleiste von der Bildhöhe abziehen und das Bild kleiner zuschneiden. Spart sicher noch ein paar KB Dateigröße extra.
4. Komprimiert abspeichern
Zum Schluss musst du dein Bild nur noch richtig abspeichern. Wenn du mit einer Bildbearbeitungsapp wie Photoshop arbeitest, kannst du das einfach im Menü unter Für Web speichern tun. Es ist aber auch kein Problem, wenn du nicht diese Art von Software benutzt. Online-Angebote wie tinyjpg.com helfen dir deine Bilder ohne Qualitätsverlust zu komprimieren.
5. Und nochmal zuschneiden
Damit du auch auf mobilen Endgeräten nicht unnötig große Dateien laden musst, kannst du dein Ausgangsbild entsprechend deiner Breakpoints auch noch für die Tablet- und Handyansicht zuschneiden – und komprimiert abspeichern. Dann lädst du einfach alle Bilder in deine Medienbibliothek hoch und baust sie in deine Website ein.
6. Als WebP-Datei ausgeben
Zum Schluss kannst du noch dafür sorgen, dass dein Bild im Web nicht als JPG-Datei an die Browser ausgegeben wird, sondern im moderneren WebP-Format. Das spart bei gleicher Qualität oft nochmal ein Viertel der Dateigröße ein. Für WordPress findest du Unmengen an Plugins, die das können. Hast du schon ein Caching- oder Optimierungs-Plugin installiert, lohnt es sich auch dort durch die Einstellungen zu schauen – einige (wie z.B. WP-Optimize) bieten nämlich die Möglichkeit Bilder im WebP-Format auszugeben.
Bilder zu optimieren, kann – je nach Motiv – ein bisschen aufwendig sein, aber es zahlt sich immer aus. Ein ordentlich optimiertes Bild vermittelt einen guten ersten Eindruck, hält die Ladezeit kurz und ist deshalb auch auf mobilen Geräten bei schlechter Internetverbindung gut darstellbar. Super Usability also.
