Afbeeldingen comprimeren _

Hoe browsergebaseerde afbeeldingcompressie werkt

Elke compressiestap draait volledig in JavaScript. Er wordt geen codec-bibliotheek gedownload en er is geen server bij betrokken. De Canvas API van de browser decodeert de afbeelding, codeert die opnieuw met lagere kwaliteit en levert u een Blob die de pagina kan voorvertonen, downloaden of in een ZIP stoppen. Omdat elke stap in de sandbox van de tab blijft, raken de originele bestanden nooit het netwerk.

1. Leest elk geüpload bestand als een Blob en maakt een object-URL aan zodat de browser het lokaal kan decoderen, zonder bytes naar een server te kopiëren of naar schijf te schrijven.
2. Tekent de gedecodeerde afbeelding op een offscreen Canvas-element op zijn oorspronkelijke pixelafmetingen, klaar voor hercodering.
3. Roept canvas.toBlob(callback, mimeType, quality) aan om de pixels opnieuw te coderen. In kwaliteitsmodus wordt de schuifregelaarwaarde direct gekoppeld aan de kwantiseringsinstelling van de encoder; in doelgrootte-modus halveert de pagina de kwaliteitswaarde totdat de output-blob onder uw byte-budget past.
4. Toont een voor/na-overzicht met de originele grootte, de gecomprimeerde grootte en het besparingspercentage, en biedt vervolgens een download per afbeelding of een enkele ZIP voor de hele batch. De ZIP wordt in het geheugen gebouwd met fflate, een bibliotheek van 8 KB die bij eerste gebruik wordt geladen.

Waarom afbeeldingen comprimeren?

• Kleinere afbeeldingen laden sneller. Een hero-afbeelding van 4 MB terugbrengen naar 600 KB verbetert de Largest Contentful Paint direct, een van de Core Web Vitals die Google gebruikt voor ranking. Op een pagina met meerdere foto's telt de besparing op tot een snellere eerste weergave.
• Upload- en bijlagelimiten zijn overal. Veel CMS-platforms, ticketingtools en e-mailsystemen weigeren bestanden boven 1 of 2 MB. Een snelle compressiestap brengt een foto onder de limiet zonder dat u een volledige editor hoeft te openen.
• Bandbreedte en opslag kosten geld op schaal. WebP op kwaliteit 0.8 versturen in plaats van PNG op volledige grootte kan de afbeeldingslast met een derde of meer verminderen, wat de CDN-egresskosten en het mobiele datagebruik van uw bezoekers verlaagt.
• Privacy is belangrijk voor gevoelige afbeeldingen. Omdat alles in uw browser draait, blijven ID-scans, medische afbeeldingen en interne schermafdrukken op uw apparaat — geen upload naar een externe server zoals TinyPNG om u zorgen over te maken.

Veelvoorkomende toepassingen

Compressie komt aan de orde wanneer een afbeelding groter is dan de plek waarvoor ze bestemd is. Drie patronen die we steeds opnieuw zien.

• Productfoto's voorbereiden voor een webwinkel. JPEG-originelen worden gecomprimeerd naar kwaliteit 0.8 (of een doel van 200 KB) zodat de winkelgevel snel laadt en de Core Web Vitals op mobiel haalt.
• Schermafdrukken verkleinen voordat ze worden bijgevoegd aan een bugtracker of wiki. Een batch PNG-opnames geconverteerd naar JPEG op kwaliteit 0.85 daalt vaak van tientallen megabytes naar een paar.
• Een foto onder een uploadlimiet brengen — een vacatureportaal dat bestanden boven 1 MB weigert, een e-mailsysteem met een strakke bijlagelimiet, of een forumavataar die in een byte-budget moet passen.

Een praktijkvoorbeeld: 4 MB JPEG naar 400 KB

Een JPEG van 4 MB recht van de camera van een telefoon is een veelvoorkomend bestand dat uploadlimieten overschrijdt en pagina's vertraagt. Een goede maatstaf voor wat compressie bespaart.

Sleep de JPEG naar de uploadzone, laat het formaat op JPEG staan, en sleep de kwaliteitsschuifregelaar naar 0.7 of schakel over naar de doelgrootte-modus en typ 400 KB. In kwaliteitsmodus codeert de Canvas-pijplijn één keer opnieuw en toont het resultaat, doorgaans 500 tot 700 KB afhankelijk van de foto. In doelgrootte-modus probeert de pagina enkele kwaliteitswaarden, kiest de hoogste die nog onder 400 KB past en rapporteert het besparingspercentage. Klik op Downloaden op de kaart om het afzonderlijke bestand te pakken, of klik op .zip downloaden als u meerdere afbeeldingen tegelijk hebt gecomprimeerd. Het hele proces draait ruim onder de seconde voor een afbeelding van deze omvang en verbruikt geen bandbreedte meer nadat de pagina zelf is geladen.

Wat is het verschil tussen kwaliteitsmodus en doelgrootte-modus?

Kwaliteitsmodus geeft u één schuifregelaar van 0.1 tot 1.0 die correspondeert met de kwantiseringsinstelling van de JPEG- of WebP-encoder — lagere waarden betekenen kleinere bestanden met zichtbaardere artefacten. Doelgrootte-modus keert het probleem om: u geeft een grootte in kilobytes op en de pagina halveert de kwaliteitswaarde, codeert een paar keer totdat de hoogste kwaliteit gevonden is die nog in uw budget past. Doelgrootte-modus is handig wanneer een hard limiet telt (een uploadlimiet van 1 MB, bijvoorbeeld); kwaliteitsmodus is sneller en beter wanneer u gewoon een voorspelbaar visueel resultaat wilt. PNG is verliesvrij, dus geen van beide modi is van toepassing.

Gebeurt dit op mijn apparaat?

Ja, volledig. De pagina gebruikt de native Canvas API van de browser en de Web File API om elke afbeelding in het geheugen te decoderen en opnieuw te coderen. Er worden geen afbeeldingsgegevens naar een server gestuurd, er is geen tijdelijke upload en geen cloud-retour. U kunt het zelf verifiëren: open DevTools, schakel naar het Network-paneel en voer een compressie uit. De enige uitgaande verzoeken die u ziet, zijn het initiële laden van de pagina en advertentieaanroepen. Niets in afbeeldingsvorm verlaat de tab.

Waarom krimpt een PNG soms nauwelijks bij compressie?

PNG is een verliesvrij formaat, dus de Canvas API kan geen details weggooien om het kleiner te maken — het kan alleen dezelfde pixels opnieuw verpakken. Voor foto's is een PNG al groot en bespaart de verliesvrije hercodering weinig. De echte winst komt van het omschakelen van het uitvoerformaat naar JPEG of WebP, die lossy compressie gebruiken die geschikt is voor foto's en routinematig 4 tot 10 keer kleiner uitkomen. Gebruik PNG alleen wanneer u verliesvrije kwaliteit of transparantie nodig heeft; kies anders JPEG voor foto's of WebP voor de beste verhouding grootte-kwaliteit.

Welk formaat moet ik kiezen?

Voor foto's biedt WebP op kwaliteit 0.8 de beste verhouding grootte-kwaliteit en wordt ondersteund door elke browser die sinds 2021 is uitgebracht; JPEG is de veilige universele terugvaloptie wanneer een bestemming ouder of restrictiever is. Kies PNG alleen wanneer u verliesvrije kwaliteit of een alfakanaal nodig heeft — lijnkunst, UI-schermafdrukken, logo's met transparantie. Als u optimaliseert voor paginasnelheid en uw publiek moderne browsers gebruikt, is WebP bijna altijd de juiste keuze; als u een oude CMS of een printpijplijn voedt die WebP weigert, blijf dan bij JPEG.

Sleep uw afbeeldingen, kies een kwaliteitsniveau of een doelgrootte, comprimeer. Alles draait in uw tab. Geen upload, geen account, geen wachten in een serverwachtrij.