Generator für responsive Bilder (srcset und sizes)

Generator für responsive Bilder (srcset und sizes): wofür es gut ist

Responsive Bilder lassen das Handy ein kleines Foto laden und den großen Bildschirm ein größeres, was die Website schneller macht, ohne Schärfe zu verlieren. Dafür braucht man mehrere Größen desselben Fotos und den Code mit srcset und sizes.

Lade das Bild hoch, wähle Breiten, Format und Qualität und lade alle Versionen als .zip herunter. Der Code kommt fertig mit srcset, sizes passend zum Platz des Bildes auf der Seite, width und height, damit das Layout nicht springt, loading=lazy oder fetchpriority=high (mit Preload) für das Hauptbild und optional <picture> mit JPG als Ersatz.

So geht’s

1. Wähle das Bild.
2. Lege Breiten, Format und Platz auf der Seite fest.
3. Lade die .zip herunter und kopiere den Code.

Wann nutzen

• Produktfotos in Shops.
• Hauptbild von Landingpages.
• Galerien und Blogs.

Häufige Fragen

Was machen srcset und sizes?

Das srcset listet die Versionen desselben Bildes mit der Breite jeder einzelnen auf (zum Beispiel 640w, 1280w). Das sizes sagt, wie viel Platz das Bild auf dem Bildschirm einnimmt. Mit beiden wählt der Browser die kleinste Version, die auf diesem Bildschirm scharf bleibt, und das Handy lädt nicht das Foto mit 2000 px.

Warum width und height im Tag?

Mit width und height reserviert der Browser den Platz des Bildes, bevor es lädt, und der Text springt nicht nach unten, wenn das Foto erscheint. Das verbessert CLS, eine der Metriken der Core Web Vitals von Google.

Wann nutze ich loading=lazy?

Bei Bildern, die weiter unten auf der Seite liegen. Das Hauptbild, das beim Öffnen sofort sichtbar ist, darf nie lazy haben: Es bekommt fetchpriority=high, um so früh wie möglich zu laden.

Ist das wirklich kostenlos?

Ja, 100% kostenlos. Ohne Anmeldung, ohne Abo und ohne Nutzungslimit. Alle Tools von Tools123 sind kostenlos.

Ähnliche Tools