Responsive-Bilder-Generator
srcset-Bildgrößen für schnellere Webseiten generieren
Erstellen Sie mehrere Bildbreiten für responsive Layouts in einem Durchgang. Exportieren Sie gängige Breakpoints und kopieren Sie HTML- oder Next.js-Code direkt in Ihr Projekt.
Lokale Verarbeitung — kein UploadResponsive Bilder generieren
Laden Sie ein Bild hoch und wählen Sie Ausgabegrößen. Wählen Sie Skalierungsfaktoren, Breakpoint-Breiten oder fügen Sie eigene Maße hinzu.
Tipp: Beginnen Sie mit einem hochauflösenden Quellbild für die schärfsten Ergebnisse in allen Größen.
Laden Sie Ihre Bilder hoch oder legen Sie sie ab
Unterstützt PNG-, JPG- und WebP-Dateien bis zu jeweils 25 MB. Dateien verlassen niemals Ihren Browser.
Bilder per Drag & Drop ablegen oder klicken zum Durchsuchen
PNG, JPG, WebP
Bilder mit verschiedenen Skalierungsfaktoren relativ zur Originalgröße generieren
Gängige Viewport-Breiten für srcset — wählen Sie die benötigten Größen
5 sizes selected
Responsive Bilder ermöglichen Browsern, die richtige Größe für jedes Gerät auszuwählen und verbessern so Ladezeiten und Core Web Vitals. Dieses Tool generiert gängige Breitenvarianten aus einem einzelnen Quellbild.
Einmal hochladen, Größen von 320px bis 1920px exportieren und fertiges srcset-Markup erhalten. Alles läuft lokal — Ihre Bilder bleiben privat.
Mehrere Breakpoints auf einmal
Generieren Sie 320, 640, 960, 1280 und 1920px Breiten in einem einzigen Batch-Export.
Kopierfertige Code-Snippets
Erhalten Sie HTML-srcset oder Next.js-Image-Markup zum direkten Einfügen in Ihre Codebasis.
Optimiert für LCP
Liefern Sie passend dimensionierte Bilder, um Largest Contentful Paint-Werte zu verbessern.
Empfohlene responsive Breakpoints
Gängige Breiten für Mobile-, Tablet- und Desktop-Viewports.
So generieren Sie responsive Bilder
Erstellen Sie optimierte Bildvarianten für srcset in wenigen Schritten.
Quellbild hochladen
Wählen Sie ein hochauflösendes JPG, PNG oder WebP. Ein größeres Quellbild liefert schärfere herunterskalierte Ergebnisse.
Responsive Größen hinzufügen
Nutzen Sie den Multi-Size-Export für 320, 640, 960, 1280 und 1920px Breiten.
Seitenverhältnis gesperrt lassen, um die Originalproportionen bei allen Größen zu erhalten.
Verarbeiten und herunterladen
Klicken Sie auf Größe ändern, um alle Varianten zu generieren, dann laden Sie jede Datei einzeln oder alle auf einmal herunter.
srcset-Snippet kopieren
Verwenden Sie das generierte HTML- oder Next.js-Snippet, um responsive Bilder zu Ihren Seiten hinzuzufügen.
Wann responsive Bilder verwenden
Hero- und Banner-Bilder
Liefern Sie 1920px an Desktops und kleinere Dateien an Handys, um die Ladezeiten für mobile Nutzer zu verkürzen.
Blog- und Artikel-Thumbnails
Generieren Sie mehrere Breiten, damit Leser auf jedem Gerät eine schnelle, scharfe Vorschau erhalten.
E-Commerce-Produktfotos
Stellen Sie passend dimensionierte Listing-Bilder bereit, um Seitengeschwindigkeit und Konversionsraten zu verbessern.
Funktionen
Batch-Multi-Size-Export
Fügen Sie mehrere Breiten hinzu und generieren Sie alle aus einer einzigen Quelle in einem Durchgang.
Seitenverhältnis erhalten
Höhen skalieren proportional, sodass Bilder nie gestreckt oder gestaucht werden.
Gebrauchsfertiger Code
Kopieren Sie HTML-srcset oder Framework-spezifische Snippets direkt in Ihr Projekt.
Privat und lokal
Die gesamte Verarbeitung erfolgt in Ihrem Browser. Bilder werden nie auf einen Server hochgeladen.
Responsive Bilder FAQ
Wie schreibe ich das sizes-Attribut?
Das sizes-Attribut teilt dem Browser mit, wie breit das Bild bei jedem Viewport angezeigt wird. Zum Beispiel bedeutet `(max-width: 640px) 100vw, 50vw` volle Viewport-Breite auf kleinen Bildschirmen und die Hälfte auf größeren. Passen Sie es an Ihr CSS-Layout an.
Wie viele Breakpoints sollte ich verwenden?
Fünf bis sieben Breiten von Mobile bis Desktop sind ein guter Standard. Mehr Größen bieten Flexibilität, erhöhen aber den Speicherbedarf. Beginnen Sie mit 320, 640, 960, 1280 und 1920 und passen Sie basierend auf Analysen an.
Was ist mit 2x Retina-Bildern?
Browser wählen aus srcset basierend auf Viewport-Breite und Pixeldichte. Wenn Ihre größte Quelle 1920px ist, könnte ein Retina-Handy die 1280px-Version wählen. Stellen Sie größere Breiten bereit, wenn scharfe Retina-Darstellung wichtig ist.
Wie hilft dies bei Largest Contentful Paint (LCP)?
LCP misst, wie schnell das größte sichtbare Element lädt. Durch kleinere Bilder für Mobile übertragen Sie weniger Bytes und rendern den Hero schneller, was Ihre Core Web Vitals direkt verbessert.
Kann ich diese Bilder mit der Next.js Image-Komponente verwenden?
Ja. Bei Selbst-Hosting legen Sie die Dateien in /public und setzen die Bildquellen entsprechend. Für mehr Kontrolle kann der eingebaute Next.js-Loader auch Größen on-the-fly generieren, aber Vorgenerierung kann die Serverlast reduzieren.
Muss ich zu WebP oder AVIF konvertieren?
Moderne Formate reduzieren Dateigrößen weiter. Sie können in einem separaten Schritt konvertieren oder Squoosh-Tools neben diesem Generator verwenden. Browser, die das Format unterstützen, laden kleinere Dateien, andere fallen auf JPG/PNG zurück.
Bildgröße ändern öffnen
Bereit, responsive Bilder zu generieren? Laden Sie ein Foto hoch und exportieren Sie mehrere Breiten für Ihre Website.
Bildgröße ändern öffnen