Was ist Srcset?
Srcset ist ein HTML-Bildattribut, das eine Liste von Bildern angibt, aus der der Browser je nach Bildschirmgröße und -auflösung auswählen kann. Dieses Konzept ist als "responsive images" bekannt. Es stellt sicher, dass für unterschiedliche Betrachtungsbedingungen die am besten geeignete Bildversion geladen wird.
Hier ist ein Beispiel für die Funktionsweise von srcset:
<img srcset="beispiel-bild-480w.jpg 480w, beispiel-bild-800w.jpg 800w" sizes="(max-width: 600px) 480px, 800px" src="beispiel-bild-800w.jpg" alt="Illustrationsbeispiel">In diesem Beispiel weist srcset den Browser an, ein 480 Pixel breites Bild zu laden, wenn die Breite des Ansichtsfensters weniger als 600 Pixel beträgt. Wenn die Breite des Ansichtsfensters mehr als 600 Pixel beträgt, lädt der Browser das größere, 800 Pixel breite Bild.
Alternativ können Sie anstelle der Größe auch die Pixeldichte als Bedingung festlegen:
<img srcset="beispiel-bild-1x.jpg 1x, beispiel-bild-2x.jpg 2x" src="beispiel-bild-1x.jpg" alt="Ein weiteres Illustrationsbeispiel">Warum ist Srcset wichtig für SEO?
Srcset ist für die Suchmaschinenoptimierung von entscheidender Bedeutung, da es den Browsern ermöglicht, die am besten geeignete Bildgröße auf der Grundlage der Eigenschaften des Geräts zu laden. Diese Optimierung hat mehrere Vorteile:
- Verbesserte Ladegeschwindigkeit: Größere Bilder haben eine größere Dateigröße, was die Ladezeit einer Seite verlangsamen kann. Durch das Laden von Bildern in der richtigen Größe für verschiedene Geräte hilft srcset, Bandbreite zu sparen und die Ladezeit der Seite zu verkürzen.
- Bessere Benutzererfahrung: Schnellere Seitenladezeiten verbessern das Nutzererlebnis, was zu niedrigeren Absprungraten und höherem Engagement führt.
- SEO-Vorteile: Die Ladegeschwindigkeit einer Seite ist ein direkter Ranking-Faktor sowohl für die mobile als auch für die Desktop-Suche. Die Optimierung von Bildern mit srcset kann sich positiv auf Ihr Suchmaschinenranking auswirken.
Best Practices für responsive Bilder
1. PageSpeed Insights für Empfehlungen prüfen
PageSpeed Insights ist ein kostenloses Tool von Google, das Vorschläge zur Optimierung der Geschwindigkeit Ihrer Website liefert. Wenn Sie die URL Ihrer Webseite eingeben, können Sie spezifische Empfehlungen für die Bildoptimierung erhalten, wie z. B.:
- Aktualisierung des Bildformats zur besseren Komprimierung.
- Erwägung des "Lazy-Loading" für Offscreen- oder versteckte Bilder.
- Angemessene Größe der Bilder zur Verbesserung der Ladezeiten.
2. Verwenden Sie das Bildelement für Art Direction
Das <picture>-Element ermöglicht es Browsern, je nach Geräteeigenschaften unterschiedliche Bilder anzuzeigen. Dies ist nützlich, wenn Sie völlig unterschiedliche Bilder und nicht nur unterschiedliche Größen desselben Bildes anzeigen möchten.
Hier ein Beispiel für die Verwendung des Elements <picture>:
<Bild> <source media="(min-width: 600px)" srcset="beispiel-bild.jpg, beispiel-bild-2x.jpg 2x"> <img src="beispiel-bild.jpg" alt="Beispielabbildung"> </picture>In diesem Beispiel wird example-image.jpg oder example-image-2x.jpg bei einer Browserbreite von 600px oder mehr angezeigt, je nach Pixeldichte des Geräts. Bei einer Bildschirmbreite von weniger als 600 Pixel oder wenn das <picture>-Element nicht unterstützt wird, wird stattdessen das <img>-Element gerendert. Fügen Sie immer das <img>-Element ein, um Kompatibilität zu gewährleisten.
3. Ordnungsgemäße Rückzugsmöglichkeiten sicherstellen
Geben Sie immer ein Ersatzbild mit dem src-Attribut an, falls der Browser srcset oder das <picture>-Element nicht unterstützt. Dadurch wird sichergestellt, dass ein Bild immer angezeigt wird, unabhängig von den Möglichkeiten des Browsers.
4. Beschreibenden Alt-Text verwenden
Geben Sie immer einen beschreibenden Alt-Text für Ihre Bilder an. Dies verbessert die Zugänglichkeit und liefert den Kontext für Suchmaschinen, was Ihre SEO verbessert.
Schlussfolgerung
Die Verwendung von srcset ist eine wichtige Methode zur Optimierung von Bildern für verschiedene Geräte, um schnellere Ladezeiten und eine bessere Benutzerfreundlichkeit zu gewährleisten. Durch die Befolgung der Best Practices können Sie die Leistung und die Suchmaschinenoptimierung Ihrer Website verbessern und sie für die Nutzer effizienter und zugänglicher machen.
