Wie werden die srcset-URLs benannt?

Jede Breite fügt vor der Dateiendung einen Suffix - w an, z. B. photo-640w.jpg.

Wofür ist das sizes-Attribut?

Es teilt dem Browser mit, wie viel Platz das Bild einnimmt, damit er die richtige Quelle auswählen kann.

Srcset-Generator

Erstelle ein responsives img-Tag mit srcset und sizes.

Basis-Bild-URLBreiten (px)Sizes-AttributAlt-Text

Ausgabe

<img
  src="/images/photo-1024w.jpg"
  srcset="
    /images/photo-320w.jpg 320w,
    /images/photo-640w.jpg 640w,
    /images/photo-1024w.jpg 1024w"
  sizes="(max-width: 640px) 100vw, 640px"
  alt=""
/>

Gib eine Basis-Bild-URL und Zielbreiten ein, um ein responsives <img>-Tag mit den Attributen srcset und sizes zu erzeugen.

Anleitung

Gib die Basis-Bild-URL ein.
Liste die gewünschten Breiten durch Kommas getrennt auf.
Kopiere das erzeugte responsive img-Tag.

Häufige Fragen

Wie werden die srcset-URLs benannt?: Jede Breite fügt vor der Dateiendung einen Suffix -<Breite>w an, z. B. photo-640w.jpg.
Wofür ist das sizes-Attribut?: Es teilt dem Browser mit, wie viel Platz das Bild einnimmt, damit er die richtige Quelle auswählen kann.

Anleitung

Häufige Fragen

Ähnliche Tools