srcset und sizes für ein Bild erzeugen

Frontend-Entwickler nutzen es, wenn ein Bild auf mehreren Bildschirmen scharf bleiben soll, ohne unnötig große Dateien zu laden.

srcset und sizes für ein Bild erzeugen. Sie erhalten eine klare Grundlage, die direkt in Ihrem Browser weiterverwendet werden kann.

Bedienung

Gib den Dateinamen des Bildes ein, zum Beispiel photo.jpg.
Gib die maximale angezeigte Breite in Pixeln ein.
Führe den Generator aus, um die Attribute srcset und sizes zu erzeugen.
Kopiere das erzeugte Markup in dein Bildelement.

Beispiel

Ein Frontend-Integrator bereitet ein Banner vor, das auf Smartphones und großen Bildschirmen scharf bleiben muss. Er gibt photo.jpg und eine maximale Breite von 1200 Pixeln ein und erzeugt dann die Attribute. Der Code wird in die Vorlage eingefügt, damit der Browser auswählen kann. Außerdem bereitet er die Bilddateien in den von der Ausgabe vorgeschlagenen Breiten vor.

Eingabe

photo.jpg
1200

Grenzen und Formate

Das Werkzeug erstellt Markup für ein Bild; es ändert nicht die Größe von Bilddateien.
Die Bildvarianten müssen in den in der Ausgabe vorgeschlagenen Breiten vorhanden sein.
Die endgültige Auswahl hängt auch vom Browser und der Bildschirmdichte ab.
Prüfe Dateipfade und Namen, bevor du das Markup veröffentlichst.
Der erzeugte Code ersetzt keine visuellen Prüfungen auf verschiedenen Geräten.

Wo die Verarbeitung stattfindet

Die von dir eingegebenen Angaben werden in deinem Browser verarbeitet, um das responsive Markup zu erstellen. Es wird keine Bilddatei hochgeladen und keine Information versendet. Du kannst das Ergebnis kopieren, sobald es erscheint.

Häufige Fragen

Ändert dieses Werkzeug die Größe meines Bildes?

Nein, es verändert die Bilddatei selbst nicht. Es erzeugt nur srcset- und sizes-Attribute aus dem von dir angegebenen Namen und der Breite. Bereite die verschiedenen Bildversionen mit einem separaten Werkzeug zur Größenänderung vor.

Warum werden mehrere Breiten aufgeführt?

Der Browser wählt die Version, die am besten zu Bildschirm und Pixeldichte passt. Mehrere Breiten anzubieten hilft, eine große Datei nicht an ein kleines Gerät zu senden. Die genauen Werte folgen der von dir eingegebenen maximalen Breite.

Kann ich das für ein CSS-Hintergrundbild verwenden?

Die Attribute srcset und sizes sind für Bildelemente gedacht, nicht für CSS-Hintergründe. Verwende für Hintergründe Media Queries oder adaptive CSS-Techniken. Wähle die Methode passend dazu, wie das Bild angezeigt wird.