Srcset-Generator

Srcset-Generator: responsives Bild-HTML mit sizes | We.Inc

Kostenloser srcset-Generator. Gib Bildnamen, exportierte Breiten und die Anzeigebreite ein und erhalte responsives img-HTML mit srcset, sizes, width und height.

Srcset-Generator

Gib den Basisnamen deines Bildes, die Breiten, in denen du es exportiert hast, und seine Anzeigebreite auf der Seite ein und erhalte ein vollständiges img-Tag mit srcset, sizes, width, height und Lazy Loading. Smartphones laden dann eine kleine Datei und große Bildschirme eine scharfe, eine der einfachsten Methoden, eine bildlastige Seite schneller zu machen.

Exportiere dein Bild in mehreren Breiten und benenne die Dateien mit der Breite am Ende, etwa hero-480.webp, hero-800.webp und hero-1200.webp.
Gib den Basisnamen ein (hero oder einen Pfad wie images/hero), wähle das Format und liste die Breiten auf. Reihenfolge und Duplikate spielen keine Rolle.
Beschreibe die Anzeigebreite im Feld sizes, zum Beispiel '(max-width: 768px) 100vw, 50vw' für ein Bild, das Smartphones ganz und größere Bildschirme zur Hälfte füllt.
Lege das Seitenverhältnis fest, damit width und height ins Tag geschrieben werden, und kopiere das HTML in deine Seite.

Drei bis fünf Breiten reichen meist. Jede weitere Breite ist eine weitere Datei zum Exportieren und Speichern, bei immer kleinerer Ersparnis.
Nimm eine Breite von etwa der doppelten größten Anzeigegröße auf, damit Bilder auf hochauflösenden Bildschirmen scharf sind. Ein Bild, das 600 Pixel breit angezeigt wird, braucht für solche Bildschirme eine 1200 Pixel breite Datei.
Lass Lazy Loading beim Hauptbild oben auf der Seite aus. Es soll sofort laden; Lazy Loading eignet sich für Bilder weiter unten.
Ist sizes falsch, wählt der Browser die falsche Datei. Miss bei einigen Bildschirmbreiten, wie breit das Bild wirklich angezeigt wird, bevor du den Wert schreibst.

Häufige Fragen

Was machen srcset und sizes?

srcset listet die Dateien mit ihrer echten Breite auf, geschrieben als 'datei 800w'. sizes sagt dem Browser, wie breit das Bild angezeigt wird. Der Browser multipliziert die Anzeigebreite mit der Pixeldichte des Bildschirms und lädt die kleinste Datei, die mindestens so breit ist. Mit sizes='50vw' auf einem 1000 Pixel breiten Bildschirm mit 2x-Dichte braucht er 1000 Pixel und wählt die 1200w-Datei, wenn die nächstkleinere 800w ist.

Warum width und height angeben?

Damit reserviert der Browser den richtigen Platz, bevor das Bild ankommt, und Text darunter springt beim Laden nicht. Das Tool schreibt die größte Breite und die Höhe, die zu deinem Seitenverhältnis passt; CSS wie max-width: 100%; height: auto; lässt das Bild trotzdem passend schrumpfen.

Welche Datei wird als src verwendet?

Die größte Breite. Browser, die srcset verstehen, ignorieren src bei der Auswahl, und ein seltener Browser ohne srcset-Unterstützung zeigt dann ein scharfes statt eines unscharfen Bildes.

Welchen sizes-Wert nehme ich für ein Bild in voller Breite?

Verwende 100vw. Für ein Bild in einer Inhaltsspalte, die bei 800 Pixeln endet, nimm '(max-width: 800px) 100vw, 800px'. Das bedeutet: Auf Bildschirmen bis 800 Pixel Breite ist das Bild so breit wie der Bildschirm, sonst 800 Pixel.

Skaliert das Tool meine Bilder?

Nein. Es schreibt das HTML für Dateien, die du bereits exportiert hast. Nutze einen Bildkompressor oder dein Designprogramm, um jede Breite zu exportieren.

Breitenangaben und Dichteangaben

srcset kennt zwei Arten von Angaben. Breitenangaben (480w, 800w) nennen die echte Pixelbreite jeder Datei und arbeiten mit sizes zusammen, was zu Bildern passt, deren Größe sich mit dem Layout ändert. Dichteangaben (1x, 2x) legen fest, welche Datei auf normalen und hochauflösenden Bildschirmen genutzt wird, und passen zu Bildern mit fester Größe, etwa einem Logo.
Beide in einem srcset zu mischen ist nicht erlaubt, und Breitenangaben ohne sizes lassen den Browser annehmen, dass das Bild die ganze Bildschirmbreite füllt. Dieser zweite Fehler ist häufig und schickt unbemerkt große Dateien an jeden Besucher. Kombiniere w-Angaben also immer mit einem ehrlichen sizes-Wert.

Prüfen, ob die richtige Datei lädt

Öffne die Seite in einem Desktop-Browser, öffne die Entwicklertools und sieh dir in der Netzwerkliste die Bilder an; dann mach das Fenster schmaler und lade neu. Bei schmalen Breiten sollte eine kleinere Datei laden. Manche Browser behalten eine bereits geladene größere Datei, statt eine kleinere zu holen, also teste in einem privaten Fenster oder mit deaktiviertem Cache.
Lädt immer die größte Datei, prüfe zuerst sizes: Ein fehlender oder zu großer Wert ist die übliche Ursache. Prüfe dann, ob die Zahlen in srcset zu den echten Breiten der Dateien passen; eine Datei namens hero-800, die in Wahrheit 1600 Pixel breit ist, lädt trotzdem mit 1600.

Basisname oder Pfad des Bildes

images/hero

Erwartet werden Dateien im Format <name>-<breite>.<format>.

Format

WebP

AVIF

JPG

PNG

Exportierte Breiten (Pixel)

Sizes

(max-width: 768px) 100vw, 50vw

Alt-Text

Bäckereitheke mit frischem Brot

Seitenverhältnis Breite

Seitenverhältnis Höhe

Lazy Loading (nicht für das erste Bild der Seite)

Gib mindestens eine Breite in Pixeln an, durch Kommas getrennt, etwa 480, 800, 1200.

Srcset-Generator