Hero-Bild für Web optimieren

Bildschirmfüllende Bilder können ein Hingucker am Start einer Webseite sein. Sie sind aber auch groß und können sich negativ auf Ladezeit und Energieverbrauch auswirken. Was du tun kannst, um ihre Dateigröße zu minimieren, steht hier.

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:

Herobild von Kevin Bidwell, 2 Mädels in der Natur unterwegs
© Kevin Bidwell, Pexels

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.

Herobild zugeschnitten und weichgezeichnet, 2 Mädels unterwegs in der Natur
© Kevin Bidwell, Pexels

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.

Glühbirne - Infobeitrag

Kontakt

Barbara Andrä
Gregor-Ulbrich-Gasse 3
1210 Wien
hallo@freitagmorgens.at

Weitere Beiträge: