Hoe browsergebaseerde afbeeldingsconversie werkt
Elke conversie is een vierstapspijplijn die volledig in JavaScript draait. Er wordt geen codec-bibliotheek gedownload — de Canvas API van de browser verwerkt het decoderen en opnieuw coderen.
- Leest elk geüpload bestand als een Blob en maakt een object-URL aan zodat de browser het kan decoderen zonder bytes naar een server te kopiëren.
- Tekent de gedecodeerde afbeelding op een offscreen Canvas-element, waarbij eventuele formaatbeperkingen worden toegepast met behoud van de oorspronkelijke beeldverhouding.
- Roept
canvas.toBlob(callback, targetMimeType, quality)aan om de pixels opnieuw te coderen. PNG-uitvoer is altijd verliesvrij; JPEG en WebP respecteren de kwaliteitsschuifregelaar. - Toont een voor/na-miniatuur met de uitvoerresoluties en bestandsgrootte, en biedt vervolgens een downloadknop per afbeelding of een enkele ZIP voor de hele batch.
Waarom afbeeldingsformaten converteren?
- Overstappen van PNG naar WebP vermindert typische bestandsgroottes met 25–35% zonder zichtbaar kwaliteitsverlies bij 0,8 kwaliteit, wat de paginagrootte direct verlaagt en Core Web Vitals LCP-scores verbetert.
- PNG behoudt transparantie die JPEG verwerpt, dus PNG→JPEG rendert transparante pixels op wit — nuttig wanneer de bestemming (e-mail, oude CMS) geen PNG accepteert.
- Sociale platforms en advertentienetwerken hebben strenge formaatsvereisten: Facebook en LinkedIn geven de voorkeur aan JPEG voor foto’s; Twitters OG-voorbeeldpijplijn verwerkt WebP; sommige advertentieservers weigeren niet-JPEG-creatieven.
- Een batch gemengde afbeeldingsformaten (PNG-schermafdrukken, JPEG-foto’s, WebP-exports) standaardiseren naar één formaat vóór upload naar een CMS of DAM elimineert de complexiteit van formaatverwerking in de opnamepijplijn.
Veelvoorkomende toepassingen
Formaatconversie is nodig wanneer het bronformaat en de verwachtingen van de bestemming niet overeenkomen.
- Productfoto’s voorbereiden voor een Shopify- of WooCommerce-winkel — JPEG-originelen geconverteerd naar WebP op 0,85 kwaliteit voor de winkelgevel, PNG bewaard voor drukklare exports.
- Door de designer aangeleverde PNG-exports converteren naar JPEG of WebP vóór insluiting in een React- of Next.js-build, zodat de afbeeldingsoptimalisator van het framework met een kleinere bron start.
- Een map met schermafdrukken van een QA-testrun batchgewijs verwerken — PNG naar JPEG op 0,9 kwaliteit om de archiefgrootte te verkleinen vóór bijvoeging aan een bugtrackerticket.
Een praktijkvoorbeeld: 2 MB PNG → 300 KB WebP
Een PNG-hero-afbeelding van 2 MB bij 2400×1600 pixels is een veelvoorkomen payload op marketinglandingspagina’s.
Sleep de PNG hierheen, kies WebP als doelformaat, stel de kwaliteit in op 0,8, en stel optioneel de maximale breedte in op 1200 om de pixelresolutie te halveren. De canvas-pijplijn tekent de afbeelding op 1200×800 (beeldverhouding behouden), codeert opnieuw naar WebP, en de uitvoerkaart toont het resultaat — typisch 280–320 KB, een reductie van 85%. Klik op Downloaden op de kaart of download batchgewijs een ZIP als u meerdere afbeeldingen hebt geconverteerd.
Welke formaten worden ondersteund?
Bronafbeeldingen: elk formaat dat de browser kan decoderen — PNG, JPEG, WebP, GIF en BMP worden allemaal geaccepteerd. Uitvoerformaten: PNG (verliesvrij), JPEG en WebP. AVIF-uitvoer wordt nog niet ondersteund omdat de Canvas API-encoder alleen beschikbaar is in Chrome 105+ en ontbreekt in Safari en Firefox; een WASM-gebaseerd AVIF-pad is gepland voor een toekomstige release.
Gebeurt dit op mijn apparaat?
Ja. De pagina gebruikt de native Canvas API van de browser en de Web File API. Er worden geen afbeeldingsgegevens naar een server gestuurd; de conversiepijplijn draait volledig in uw browsertabblad. U kunt dit verifiëren door DevTools te openen en het Netwerk-paneel te controleren — er zijn geen uitgaande verzoeken nadat de pagina is geladen.
Wat is de kwaliteitsafweging tussen PNG en JPEG?
PNG is een verliesvrij formaat — elk pixel overleeft de codeercyclus exact. JPEG gebruikt DCT-compressie en verwijdert fijne details die het oog zelden opmerkt; kwaliteit 0,8 is een gangbaar optimum waarbij het visuele verschil met het origineel voor de meeste kijkers niet waarneembaar is, maar het bestand 4–6x kleiner is dan PNG. WebP kan zowel in verliesvrije als verliesloze modus werken; de kwaliteitsschuifregelaar hier stuurt de verliesloze encoder, en kwaliteit 0,85 presteert doorgaans 25–30% beter dan JPEG 0,85 op natuurfoto’s.
Wanneer komt AVIF-ondersteuning?
AVIF-codering via canvas.toBlob(…, 'image/avif') werkt vandaag alleen in Chrome 105+; Safari en Firefox ondersteunen het niet. Een toekomstige release voegt een opt-in AVIF-pad toe met een lichtgewicht WebAssembly-encoder zodat de functie in alle browsers werkt. Tot die tijd wordt de AVIF-optie weergegeven als ’binnenkort’ en is de WebP-encoder (universeel ondersteund in moderne browsers) het aanbevolen alternatief van de nieuwe generatie.
Sleep uw afbeeldingen, kies een formaat, converteer. Alles draait in uw tabblad — geen upload, geen account, geen wachten op een server.