Hoe browsergebaseerde afbeeldingsconversie werkt
Elke conversie is een vierstappijplijn die in uw browser draait. Voor JPEG en PNG zorgt de eigen Canvas API van de browser direct voor de codering. Voor WebP op Safari en AVIF op elke browser laadt de pagina op verzoek een lichte WebAssembly-codec — nog steeds allemaal lokaal, uw afbeeldingen verlaten nooit het apparaat.
- 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.
- Roep
canvas.toBlob(callback, targetMimeType, quality)aan om de pixels opnieuw te coderen voor PNG, JPEG en Chrome/Firefox WebP. Voor Safari WebP en AVIF-codering wordt een WebAssembly-codec-worker geladen bij het eerste gebruik en verzorgt de codering in een achtergrondthread. PNG-uitvoer is altijd verliesvrij; JPEG, WebP en AVIF respecteren de kwaliteitsschuifregelaar, die direct wordt toegewezen aan de kwantiseringsinstelling van de encoder. - 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?
Aan de invoerzijde wordt elk formaat dat de browser kan decoderen geaccepteerd: PNG, JPEG, WebP, GIF en BMP dekken vrijwel elk bestand dat een ontwerper of screenshot-tool produceert. Uitvoerformaten zijn PNG (altijd verliesvrij), JPEG, WebP en AVIF. AVIF-uitvoer wordt ondersteund via een WebAssembly-encoder die op verzoek wordt geladen in elke browser — geen native Canvas-encoder nodig.
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.
Hoe werkt AVIF-uitvoer?
AVIF-codering maakt gebruik van een WebAssembly-codec die op verzoek wordt geladen wanneer u voor het eerst het AVIF-formaat selecteert — geen plugin, geen browserflag, geen wachten op een toekomstige Chrome-release. De WASM-binary wordt geserveerd vanaf onze eigen oorsprong, codeert uw afbeelding volledig in een achtergrondthread en retourneert een standaard image/avif blob die klaar is om te downloaden. Het enige netwerkverzoek is het eenmalig ophalen van de codec zelf; er verlaten nooit beeldgegevens uw apparaat. Eenmaal geladen blijft de encoder voor de sessie in de cache, zodat volgende conversies sneller zijn. AVIF-bestanden zijn doorgaans 20-30% kleiner dan WebP en 50% kleiner dan JPEG bij gelijkwaardige kwaliteit, waardoor ze de beste keuze zijn voor prestatiegevoelige sites.
Sleep uw afbeeldingen, kies een formaat, converteer. Alles draait in uw tabblad — geen upload, geen account, geen wachten op een server.