Bilder für Website richtig optimieren

So bereitest du Bilder für deine Website richtig auf

Bilder sind nicht nur Blickfänger für deine Webseiten-Besucher, sie beeinflussen auch die Ladezeit deiner Website und damit auch direkt dein Ranking bei Google. Technisch optimierte Bilder verbessern die Nutzererfahrung deiner Website-Besucher und helfen dir, bei Google besser gefunden zu werden. Nimm dir die Zeit, deine Bilder entsprechend aufzubereiten – es zahlt sich aus.

Hier erfährst du, wie du Bilder technisch optimierst, ohne auf Qualität zu verzichten:

1. Reduziere die Dateigröße

Warum? Große Bilder verlangsamen die Ladezeit.
Tipp: Komprimiere Bilder vor dem Hochladen fürs Web – die ideale Dateigröße liegt unter 300 KB.
Nutze dazu die Funktion „Fürs Web speichern“, die Bildbearbeitungsprogramme oft anbieten.

2. Passe die Bildgröße ans Layout deiner Webseite an

Lade Bilder auf deine Webseite nicht größer als nötig hoch. Bilder sollten auf die Sichtgröße angepasst sein, in der sie tatsächlich dargestellt werden (zB. 600 x 400 Pixel). Zu große Bilder bremsen die Ladezeit – auch wenn sie optisch kleiner dargestellt werden.

TIPP:

Wähle die richtige Bildgröße in der bestmöglichen Qualität und der kleinstmöglichen Dateigröße! Wie hängt das zusammen:

Das Pixelmaß (px) gibt die sichtbare Bidlgröße am Bildschirm an.
Eine höhere Pixelzahl (ppi = Pixel pro Zoll auf einem Monitor):
sorgt für größere Detailgenauigkeit (Bildqualität)
benötigt mehr digitales Volumen (Dateigröße)
benötigt mehr Speicherplatz (Webhosting)
bedingt eine längere Ladezeit der Webseite (Page Speed)

ppi werden oft mit dpi verwechselt: dpi (dots per inch) bezieht sich auf die Anzahl der gedruckten Punkte pro Zoll = für den Druck relevant, nicht fürs Web.

3. Wähle das passende Dateiformat

JPEG: Für ausdrucksstarke Fotos mit vielen Farben.
PNG: Für Grafiken mit transparentem Hintergrund.
GIF: Für bewegte Bilder und einfache Animationen
WebP: Moderne Alternative mit guter Qualität bei kleiner Dateigröße.

4. Vergib aussagekräftige Dateinamen und ALT-Tags

Dateiname: Beschrifte deine Bilddatei mit relevanten Schlüsselbegriffen (zB. „produktname-farbe.jpg“).
ALT-Tag: Beschreibe kurz, was auf dem Bild zu sehen ist – das ist auch für Screenreader relevant (Barrierefreie Webseite).
Ab Juni 2025 besteht Barrierefreiheitspflicht für Webseiten – ausgenommen sind Unternehmen mit weniger als 10 Beschäftigten und höchsten 2 Mio. EUR Jahresumsatz bzw. Jahresbilanzsumme >> informiere dich bei der WKÖ!

5. Gib Bildquellen korrekt an

Schütz dich vor Abmahnungen und zeig, dass du professionell arbeitest. Ganz gleich, ob du kostenlose oder kostenpflichtige Bilder von Bilddatenbanken, eigene oder von dir in Auftrag gegebene Bilder verwendest:

Prüfe immer die damit verbundenen Nutzungs- und Lizenzrechte und

Fragen zu Bildern, Ladezeit oder Sichtbarkeit deiner Webseite?

Besprechen wir es – praxisnah und zielgerichtet!