Online Tool Store
Srcset-generator
Schaal een afbeelding met de Canvas API naar meerdere breedtes en genereer bijbehorende <img srcset sizes>-markup plus downloadbare bestanden.
🔒 Deze tool werkt volledig in je browser. Je bestanden worden nooit naar een server geüpload.
Standaard wordt een voorbeeldverloopafbeelding gebruikt — upload je eigen afbeelding om die te vervangen.
Hoe het werkt
- Upload een afbeelding (standaard wordt een voorbeeldverloop getoond).
- Stel je doelbreedtes en een bestandsnaambasis in — previews werken direct bij.
- Pas het "sizes"-attribuut aan zodat het overeenkomt met hoe de afbeelding in je layout wordt weergegeven.
- Kopieer de gegenereerde markup en download de geschaalde bestanden om ernaast te hosten.
FAQ
Wat genereert deze tool eigenlijk?
Het schaalt je geüploade afbeelding naar elke doelbreedte met de Canvas API en schrijft dan de bijbehorende <img srcset sizes>-markup zodat browsers voor elke viewport het juiste bestand kunnen kiezen.
Wat moet ik in het "sizes"-attribuut zetten?
Een CSS-achtige beschrijving van hoe breed de afbeelding bij verschillende viewports wordt weergegeven; bijv. "(max-width: 768px) 100vw, 50vw" betekent dat hij op mobiel de viewport vult en op grotere schermen de halve viewport. Laat het overeenkomen met je werkelijke layout.
Moet ik de geschaalde bestanden zelf uploaden?
Ja — "Alle groottes downloaden" bewaart elke geschaalde JPEG op je apparaat met een bestandsnaam die overeenkomt met de gegenereerde markup (bijv. photo-640w.jpg). Upload ze naar je afbeeldingshost of CDN op dezelfde paden.
Waarom zijn downloads JPEG in plaats van het originele formaat?
JPEG houdt bestandsgroottes klein en voorspelbaar voor responsive fotolevering. Als je PNG- of WebP-uitvoer nodig hebt voor transparantie of betere compressie, schaal daarna met een speciale afbeeldingsconverter.
Wordt mijn afbeelding ergens geüpload?
Nee. Het schalen gebeurt lokaal op een <canvas> in je browser — het originele bestand verlaat je apparaat nooit.
Hoe wij ons verhouden
| Functie | Online Tool Store | Handmatig schalen in een afbeeldingseditor | Automatische afbeeldingsschaaldiensten van CDN's |
|---|---|---|---|
| Genereert automatisch bijbehorende markup | ✓ | ✗ | Hangt van de dienst af |
| Geen account of backend nodig | ✓ | ✓ | ✗ |
| Gratis, geen kosten per afbeelding | ✓ | ✓ | Gebruiksgebaseerde prijzen |
Als je gewoon een eenmalige set responsive afbeeldingen en bijbehorende markup nodig hebt — geen buildstap, geen CDN-account — produceert deze tool beide op één pagina.