Srcset- und Sizes-Generator für responsive Bilder
Generiere die Attribute srcset und sizes eines responsiven Bildes (HTML) in deinem Browser.
Name your files photo-320w.jpg, photo-640w.jpg, etc. Adjust “sizes” to your layout.
🔒 100 % clientseitig — keine Daten gesendet
Generiere die Attribute srcset und sizes für deine responsiven HTML-Bilder und liefere jedem Bildschirm die richtige Auflösung. Das Tool läuft zu 100 % in deinem Browser, ohne Bild-Upload oder gesendete Daten. Eine einfache Möglichkeit, die Performance und den Core Web Vitals-Score deiner Seiten zu verbessern.
What is it for?
- ▸ Liefere Bilder aus, die auf Mobilgeräte und Retina-Bildschirme abgestimmt sind
- ▸ Reduziere das Seitengewicht und verbessere LCP
- ▸ Generiere srcset-Markup für ein img- oder picture-Tag
- ▸ Setze sizes-Breakpoints passend zu deinem Layout
FAQ
Wofür ist das srcset-Attribut da?
Das srcset-Attribut gibt dem Browser mehrere Versionen eines Bildes in verschiedenen Auflösungen; er wählt anhand von Bildschirmgröße und Pixeldichte die passendste aus und vermeidet so den Download eines zu großen Bildes.
Was ist der Unterschied zwischen srcset und sizes?
srcset listet die verfügbaren Bilder mit ihren Breiten auf, während sizes dem Browser die vorgesehene Anzeigebreite für jedes Layout mitteilt. Beide werden für eine optimale Auswahl benötigt.
Sollte ich srcset mit dem picture-Tag verwenden?
srcset funktioniert direkt an einem img-Tag für den Auflösungswechsel und innerhalb der source-Tags eines picture-Elements, wenn du Bilder zusätzlich nach Bedingung austauschen möchtest (Art Direction).