srcset Generator für responsive Bilder

Responsive Bilder mit srcset, sizes und picture

Der srcset Generator erzeugt den HTML-Code für responsive Bilder: Statt einer einzigen großen Datei bieten Sie mehrere Bildbreiten an, und der Browser lädt die kleinste, die für den Platz im Layout und die Pixeldichte des Bildschirms genügt. Das spart auf Smartphones Daten und Ladezeit, liefert auf Retina-Displays aber trotzdem scharfe Bilder. Das Attribut srcset listet die Dateien mit ihrer Breite (foto-800.jpg 800w), das sizes-Attribut beschreibt, wie breit das Bild auf der Seite angezeigt wird.

Ein korrektes sizes-Attribut ist entscheidend: Ohne sizes nimmt der Browser 100vw an und lädt bei schmalen Spalten viel zu große Dateien. Wählen Sie unter „Layout“, ob das Bild die volle Breite, die Inhaltsbreite mit Maximalbreite oder eine Spalte ab einem Breakpoint einnimmt; daraus entsteht der passende Wert, etwa (max-width: 1232px) calc(100vw - 32px), 1200px. Mit AVIF oder WebP erzeugt das Werkzeug ein picture-Element mit source-Einträgen je Format und JPEG als Rückfall. width und height verhindern Layoutsprünge, loading="lazy" lädt Bilder unterhalb des sichtbaren Bereichs später, fetchpriority="high" beschleunigt das wichtigste Bild.

Unter „Auswahl testen“ sehen Sie, welche Datei ein Gerät vermutlich lädt: Platz im Layout × Pixeldichte, dann die kleinste Bildbreite, die das abdeckt. Browser dürfen davon abweichen, etwa eine schon geladene größere Datei weiterverwenden oder bei aktiviertem Datensparmodus kleiner wählen. Die Bildbreiten selbst müssen Sie vorher erzeugen, zum Beispiel mit Bildgröße ändern oder Bilder in WebP umwandeln.