Srcset-Generator
NeuResponsives <img>-Markup mit srcset und sizes aus deinen Breiten erzeugen.
<img> uses the extension above. width/height to reserve space and prevent layout shift (CLS). Runs entirely in your browser. Nothing is uploaded.
srcset, sizes und picture-Markup an einem Ort generieren
Responsives Bild-Markup von Hand zu schreiben ist mühsam — die srcset-Liste, das passende sizes-Attribut, der <picture>-Block mit WebP- und AVIF-Fallbacks — und ein einziger Tippfehler führt dazu, dass der Browser stillschweigend die falsche Datei herunterlädt. Dieser srcset-Generator erstellt das gesamte Tag für Sie: Geben Sie einen Dateinamen und Ihre Breiten ein und er produziert ein vollständiges, kopierfertiges responsives <img>- oder <picture>-Element mit korrekten Deskriptoren, Lazy Loading und asynchroner Dekodierung.
Es ist ein kostenloser responsiver Bildgenerator, der vollständig im Browser läuft — keine Anmeldung, nichts wird hochgeladen, und er funktioniert auch offline, sobald er geladen ist.
srcset und sizes erklärt
Ein responsives Bild benötigt zwei zusammenwirkende Teile. srcset ist die Liste der Dateien mit ihren tatsächlichen Breiten — hero-640.jpg 640w teilt dem Browser mit, dass diese Datei 640 Pixel breit ist. sizes beschreibt, wie breit das Bild in Ihrem Layout dargestellt wird, zum Beispiel (max-width: 600px) 100vw, 600px. Der Browser liest sizes, multipliziert mit dem Gerätepixelverhältnis und lädt den nächsten srcset-Kandidaten herunter.
Wechseln Sie den Deskriptor auf x, um Pixeldichte-Markup zu erhalten — logo.png 1x, logo@2x.png 2x — ideal für Bilder mit fester Größe wie Logos und Icons auf Retina-Bildschirmen, wo w-Deskriptoren und sizes übertrieben wären.
Wann das picture-Element verwendet werden sollte
Einfaches srcset übernimmt die Auflösungsumschaltung — dasselbe Bild in verschiedenen Größen. Greifen Sie auf das <picture>-Element zurück, wenn Sie mehr Kontrolle benötigen: moderne Formate mit Fallback bereitstellen oder Art Direction (andere Ausschnitte auf Mobilgeräten als auf dem Desktop).
Im <picture>-Modus gibt dieses Tool ein <source type="image/avif">, ein <source type="image/webp"> und einen JPEG- oder PNG-<img>-Fallback aus, damit moderne Browser das kleinste Format erhalten und ältere Browser trotzdem ein Bild sehen.
Bilder lokal auf jede Breite skalieren
Markup ist nur die halbe Arbeit — Sie benötigen noch die tatsächlich skalierten Dateien. Ziehen Sie ein Bild in das Tool und es skaliert es auf jede Ihrer Breiten direkt auf einem HTML-Canvas und lässt Sie dann das gesamte Set herunterladen, mit Dateinamen, die genau dem generierten Markup entsprechen (hero-320.jpg, hero-640.jpg usw.).
Kein Upload, keine Build-Pipeline. Da das Vergrößern über das Original hinaus nur Unschärfe hinzufügt, markiert das Tool jede Breite, die größer als Ihre Quelle ist, damit Ihr Bildset präzise bleibt.
Vergleich mit Squoosh, Responsivebreakpoints.com und Cloudflare Image Resize
Squoosh (von Google) glänzt bei der Komprimierung und Konvertierung einzelner Bilder — es ist hervorragend für die Wahl der richtigen Qualitätseinstellung für WebP oder AVIF. Es generiert jedoch kein srcset-Markup und produziert kein vollständiges responsives Bild-Tag zum Einfügen in HTML. Es ist ein Kompressionswerkzeug, kein Markup-Generator.
Responsivebreakpoints.com von Cloudinary lädt Ihr Bild auf Cloudinarys Server hoch, um optimale Breakpoints zu berechnen und skalierte Bilder zu generieren. Die Ergebnisse sind gut, aber Ihre Datei verlässt Ihren Computer und Cloudinarys Nutzungsbedingungen gelten. Cloudflare Image Resize und Imgix sind CDN-Dienste — sie verarbeiten Bilder zur Auslieferungszeit, erfordern aber Kontoeinrichtung, API-Integration und laufende Kosten. Der srcset-Generator von UtiloKit nimmt eine andere Position ein: Er generiert vollständiges HTML-Markup und skaliert Bilder lokal, client-seitig, ohne Upload, ohne Konto, ohne Kosten und ohne Dateigrößenbeschränkungen.
Breiten, Breakpoints und Core Web Vitals
Ein zuverlässiges Breitenset ist 320, 640, 960, 1280 und 1920 — in etwa verdoppelt sich jeder Schritt, um Smartphones bis hin zu großen Retina-Displays abzudecken; fügen Sie 2560 für vollflächige Hero-Bilder hinzu. Ein Bild in der richtigen Größe bereitzustellen ist einer der größten Gewinne für die Core Web Vitals: Weniger Bytes bedeuten ein schnelleres Largest Contentful Paint, und das Hinzufügen von width- und height-Attributen verhindert Layout-Verschiebungen (CLS), die sowohl Benutzern als auch Rankings schaden.
Fügen Sie loading="lazy" zu Bildern außerhalb des Sichtbereichs hinzu, damit sie erst beim Scrollen geladen werden, und fetchpriority="high" für Ihr Hero-Bild, damit es zuerst geladen wird — beides sind Ein-Klick-Schalter hier.
Privat, sofort und offline — funktioniert auf jedem Gerät
Es ist nichts zu installieren und kein Konto zu erstellen. Jedes Tag wird in Ihrem Browser zusammengestellt, während Sie tippen, und jedes Bild, das Sie skalieren, wird lokal mit der Canvas-API verarbeitet — es wird niemals etwas hochgeladen. Der Generator funktioniert offline, sobald die Seite geladen ist, sodass Sie responsives img srcset- und <picture>-Markup überall erstellen können — im Flugzeug, auf dem Smartphone, ohne WLAN.
Frequently asked questions
Was ist srcset und was macht es?
Das srcset-Attribut ermöglicht es Ihnen, mehrere Versionen desselben Bildes in verschiedenen Breiten aufzulisten, damit der Browser die herunterladen kann, die am besten zum Gerät passt. Statt eine große Datei an alle Besucher zu senden, schreiben Sie srcset="hero-320.jpg 320w, hero-640.jpg 640w, hero-1280.jpg 1280w" und der Browser wählt das kleinste Bild, das noch scharf aussieht — spart Bandbreite auf Smartphones und liefert gestochen scharfe Bilder auf Retina-Laptops, alles ohne JavaScript.
Wann sollte ich srcset verwenden?
Verwenden Sie srcset immer dann, wenn ein Bild auf verschiedenen Bildschirmen in unterschiedlichen Größen angezeigt wird — Hero-Banner, Artikelbilder, Produktfotos, alles Fließende. Es ist das richtige Werkzeug für die Auflösungsumschaltung: dasselbe Bild, nur größer oder kleiner. Wenn Sie den Ausschnitt oder das tatsächliche Bild bei bestimmten Breakpoints ändern müssen (Art Direction), verwenden Sie das picture-Element. Kleine Icons und Logos mit fester Größe benötigen kein srcset.
Wie verwende ich srcset und sizes zusammen?
srcset listet die Dateien und ihre tatsächlichen Pixelbreiten auf (640w bedeutet, dass die Datei 640 Pixel breit ist); sizes teilt dem Browser mit, wie breit das Bild vor der Layout-Berechnung angezeigt wird. Zusammen: srcset="img-640.jpg 640w, img-1280.jpg 1280w" sizes="(max-width: 600px) 100vw, 600px". Der Browser liest sizes — 'volle Viewport-Breite unter 600px, sonst 600px' — berechnet die benötigten Pixel (Anzeigebreite × Gerätepixelverhältnis) und wählt dann den nächsten srcset-Kandidaten.
Was ist der Unterschied zwischen w- und x-Deskriptoren?
w-Deskriptoren beschreiben die tatsächliche Breite jeder Datei in Pixeln — image-640.jpg 640w — und müssen mit sizes kombiniert werden; der Browser erledigt dann die Berechnung für jeden Bildschirm. x-Deskriptoren beschreiben nur die Pixeldichte — image.jpg 1x, image@2x.jpg 2x, image@3x.jpg 3x — und eignen sich für Bilder mit fester Größe wie ein Logo, das auf Retina-Bildschirmen einfach scharf aussehen soll. Verwenden Sie w für fließende, layout-gesteuerte Bilder und x für Bilder mit festen Abmessungen.
Wie kann ich WebP und AVIF mit einem Fallback bereitstellen?
Verwenden Sie picture mit einem source-Element pro modernem Format und einem normalen img als Fallback: source type="image/avif" srcset="…", dann source type="image/webp" srcset="…", dann img src="hero.jpg" …. Der Browser verwendet das erste unterstützte Format und greift auf das JPEG- oder PNG-img zurück, wenn keines unterstützt wird — ältere Browser sehen trotzdem ein Bild. Aktivieren Sie AVIF und WebP im picture-Modus und dieses Tool schreibt den gesamten Block, Deskriptoren und alles.
Welche Bildbreiten soll ich generieren?
Ein solides Allzweck-Set ist 320, 640, 960, 1280 und 1920 — abdeckend von kleinen Smartphones bis zu großen Retina-Displays — mit ungefährer Verdopplung bei jedem Schritt. Für vollflächige Hero-Bilder fügen Sie 2560 hinzu; für Inhalte, die nie mehr als etwa 800px breit sind, brauchen Sie nichts Breiteres als etwa 1600 (800 × 2 für Retina). Generieren Sie nicht so viele Breiten, dass die Abstände sinnlos werden; vier bis sechs Breiten reichen normalerweise aus.
Warum funktioniert mein srcset nicht?
Die üblichen Verdächtigen: (1) Sie testen auf einem Bildschirm, auf dem der Browser richtigerweise entschieden hat, dass die größte Datei nicht benötigt wird — ändern Sie die Fenstergröße oder drosseln Sie auf eine langsame Verbindung, um das Umschalten zu beobachten; (2) sizes fehlt oder ist falsch, sodass der Browser 100vw annimmt und eine große Datei herunterlädt; (3) die aufgelisteten Dateien existieren nicht wirklich unter diesen Pfaden (prüfen Sie den Netzwerk-Tab auf 404-Fehler); (4) der Cache liefert eine bereits heruntergeladene Größe. srcset ist ein Hinweis, und der Browser darf ein größeres gecachtes Bild wählen — das ist so gewollt.
Related tools
Alle Tools ansehen
Neu JSON maskieren / demaskieren
Rohtext in einen JSON-sicheren String maskieren und wieder demaskieren.
Neu HTTP-Statuscodes
Durchsuchbare Referenz der HTTP-Statuscodes mit klar verständlichen Bedeutungen.
Neu Regex-Spickzettel
Durchsuchbare Referenz für Tokens und Flags regulärer Ausdrücke.
Neu ASCII-Tabelle
Durchsuchbare Zeichencodes in dezimal, hex, oktal und binär.
Neu PX-zu-REM-Konverter
Zwischen px, rem, em und pt gegen eine Root-Schriftgröße umrechnen.
Neu Tabellenspalten-Konverter
Eine Tabellenspalten-Nummer in ihren Buchstaben (1 → A) und zurück umwandeln.