Online Tool Store
Srcset-Generator
Skalieren Sie ein Bild mit der Canvas-API auf mehrere Breiten und erzeugen Sie passendes <img srcset sizes>-Markup samt Dateien zum Download.
🔒 Dieses Tool läuft vollständig in Ihrem Browser. Ihre Dateien werden niemals an einen Server hochgeladen.
Standardmäßig wird ein Beispiel-Verlaufsbild verwendet – laden Sie ein eigenes hoch, um es zu ersetzen.
So funktioniert es
- Laden Sie ein Bild hoch (standardmäßig wird ein Beispiel-Verlauf gezeigt).
- Legen Sie Ihre Zielbreiten und einen Basis-Dateinamen fest – die Vorschauen aktualisieren sich sofort.
- Passen Sie das "sizes"-Attribut an, damit es widerspiegelt, wie das Bild in Ihrem Layout dargestellt wird.
- Kopieren Sie das erzeugte Markup und laden Sie die skalierten Dateien herunter, um sie daneben zu hosten.
FAQ
Was erzeugt dieses Tool eigentlich?
Es skaliert Ihr hochgeladenes Bild mit der Canvas-API auf jede Zielbreite und schreibt dann das passende <img srcset sizes>-Markup, damit Browser für jeden Viewport die richtige Datei auswählen können.
Was soll ich in das "sizes"-Attribut schreiben?
Eine CSS-ähnliche Beschreibung, wie breit das Bild bei verschiedenen Viewports dargestellt wird, z. B. bedeutet "(max-width: 768px) 100vw, 50vw", dass es auf Mobilgeräten den Viewport füllt und auf größeren Bildschirmen den halben Viewport. Passen Sie es an Ihr tatsächliches Layout an.
Muss ich die skalierten Dateien selbst hochladen?
Ja – "Alle Größen herunterladen" speichert jedes skalierte JPEG mit einem Dateinamen, der zum erzeugten Markup passt (z. B. photo-640w.jpg), auf Ihrem Gerät. Laden Sie sie unter denselben Pfaden auf Ihren Bild-Host oder Ihr CDN.
Warum sind die Downloads JPEG statt im Originalformat?
JPEG hält Dateigrößen klein und vorhersehbar für die Auslieferung responsiver Fotos. Wenn Sie PNG- oder WebP-Ausgabe für Transparenz oder bessere Kompression brauchen, skalieren Sie danach mit einem eigenen Bildkonverter.
Wird mein Bild irgendwohin hochgeladen?
Nein. Das Skalieren geschieht lokal auf einem <canvas> in Ihrem Browser – die Originaldatei verlässt Ihr Gerät nie.
So schneiden wir ab
| Merkmal | Online Tool Store | Manuelles Skalieren in einem Bildeditor | Automatische Bildskalierungs-Dienste von CDNs |
|---|---|---|---|
| Erzeugt passendes Markup automatisch | ✓ | ✗ | Hängt vom Dienst ab |
| Kein Konto oder Backend nötig | ✓ | ✓ | ✗ |
| Kostenlos, keine Kosten pro Bild | ✓ | ✓ | Nutzungsabhängige Preise |
Wenn Sie nur einmalig einen Satz responsiver Bilder und passendes Markup brauchen – kein Build-Schritt, kein CDN-Konto – erzeugt dieses Tool beides auf einer Seite.