Wie optimiere ich Bilder für meine Website? Speziell für die Mobile Ansicht möchte ich damit die Ladezeit verbessern.
Die Bildoptimierung spielt eine zentrale Rolle, um die Ladezeit einer Website zu verbessern. Hier sind die 5 Schritte dafür:
(1) Bildkompression: Dateigröße auf unter 200 KB pro Bild reduzieren. Geeignete Tools:
(2) Bildformat:
- JPEG: Ideal für Bilder, da es gute Qualität bei kleinen Dateigrößen bietet
- PNG: Für Bilder mit transparentem Hintergrund, z. B. Logos oder Icons.
- WebP: Ein modernes Format mit besserer Komprimierung bei gleichbleibender Qualität.
(3) ALT-Attribut: Beschreibende Alternativ-Texte für Bilder (engl. Alt-Tags) hinterlegen: Verbessert die Barrierefreiheit der Website und unterstützt Suchmaschinen bei der Bildindexierung.
Abbildung 1: ALT-Tags, bzw. alternativen Beschreibungstext, hinterlegt in der WordPress Mediathek
Ein Beispiel mit vollständiger Beschreibung aller Bild-Attribute ist im Hilfe Chat über "Beitragsbilder in WordPress ändern" hinterlegt.
(4) Dateinamen optimieren: Aussagekräftige Dateinamen vergeben, die den Bildinhalt beschreiben, um die Auffindbarkeit in der Google-Bildersuche zu steigern.
- Falsch: IMG1234.jpg
- Richtig: roter-apfel-holztisch.jpg
(5) Responsive Bilder: flexible Bildgrößen, die sich dem Gerät anpassen. Mit dem Attribut "srcset" können Websites je nach Bildschirmgröße das passende Bild laden.
Pro-Tipp: WordPress fügt dieses Attribut seit Version 4.4 automatisch zu den Bildern hinzu, sodass diese je nach Gerät in der passenden Größe angezeigt werden – die meisten modernen Themes unterstützen dies von Haus aus, ohne dass du etwas tun musst.
Was sind die besten Bildgrößen bzw. -auflösungen für Websites?
Die optimalen Bildauflösungen hängen davon ab, wo die Bilder einsetzt und auf welchen Endgeräten sie angezeigt werden. Ziel ist eine perfekte Balance zwischen Qualität und Ladezeit. Hier sind 4 gängige Bildauflösungen nach Platzierung auf der Website:
- Vollbild-Banner: 1920 x 1080 Pixel – Ideal für große Hintergrundbilder und Banner auf Desktops.
- Produktbilder: 800 x 800 Pixel – Diese Größe eignet sich gut für die Darstellung von Produkten in Onlineshops.
- Blog-Bilder/Artikelbilder: 1200 x 628 Pixel – Perfekt für Blogbeiträge und ideal zum Teilen auf Social Media (z. B. Facebook, Twitter).
- Thumbnails: 150 x 150 Pixel – Kleine Vorschaubilder für Kategorien oder Listenansichten.
Abbildung 2: Beispiel eines Vollbild Banners 1920x1080 mit darüber liegendem Container auf einer Webseite
Pro-Tipp: Stelle das komprimierte Bild im Browser neben das Original, um Bild-Details und Farben zu vergleichen. Sind diese auch nach der Komprimierung noch immer erhalten, so bleibt die Webseite optisch ansprechend und lädt schneller.