Afbeeldingen formaat wijzigen _

Hoe browsergebaseerde afbeeldingsvergroting/-verkleining werkt

Elke formaatwijziging is een kort pipeline dat volledig in JavaScript draait. Er wordt geen codec-bibliotheek gedownload en er is geen server bij betrokken. De Canvas API van de browser decodeert het bestand, hertekent het op de doelgrootte en codeert het opnieuw in het geheugen, waarna u een Blob krijgt die de pagina kan voorvertonen of in een ZIP stoppen. Omdat elke stap in de sandbox van de tab blijft, bereiken 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. Berekent de doelafmetingen uit de gekozen modus — een limiet voor de langste zijde, een exacte breedte en hoogte, of een percentageschaal. De beeldverhoudingsvergrendeling houdt de verhoudingen correct bij het bewerken van één veld.
3. Maakt een offscreen Canvas op de doelgrootte en roept ctx.drawImage(source, 0, 0, width, height) aan om de gedecodeerde pixels opnieuw te tekenen. De browser verwerkt de interpolatie die het geschaalde resultaat egalisiert.
4. Roept canvas.toBlob aan om opnieuw te coderen in het bronformaat. PNG blijft verliesvrij, JPEG en WebP worden opnieuw gecodeerd op hoge kwaliteit. De pagina toont dan een voor/na-kaart en biedt een download per afbeelding of een enkele ZIP die in het geheugen is gebouwd met fflate.

Waarom afbeeldingen van formaat wijzigen?

• Oversized afbeeldingen zijn de meest voorkomende oorzaak van trage pagina's. Een telefoonafbeelding van 4000×3000 die direct in een 600 pixel breed layout wordt geplaatst, stuurt ongeveer 40 keer meer pixels dan het scherm kan tonen. Het beperken van de langste zijde tot 1600 px vóór het uploaden vermindert het paginagewicht drastisch en verbetert de Core Web Vitals LCP.
• Uploadformulieren leggen strikte afmetingen op. Avatarslots, portalen voor identiteitsfoto's, marketplace-vermeldingen en OG social cards vereisen exacte pixelformaten: 1200×630 voor een Open Graph-voorbeeld, 512×512 voor een app-pictogram, 150×150 voor een miniatuur. Het juiste getal halen voorkomt de afgewezen-upload-cyclus.
• E-mail- en chatclients hercomprimeren grote afbeeldingen stilletjes, wat een nette screenshot kan verpesten. Zelf naar een redelijke breedte verkleinen maakt het resultaat voorspelbaar in plaats van het over te laten aan de lossy pipeline van iemand anders.
• Batchconsistentie is belangrijk voor galerijen en catalogi. Een map met foto's van verschillende formaten door één doel van 800×800 halen zorgt dat elke kaart goed uitlijnt in het raster, zonder reuzeafbeelding die de opmaak breekt.

Veelvoorkomende toepassingen

Formaatwijziging is nodig wanneer de bronafmetingen en de verwachtingen van de bestemming niet overeenkomen. Drie patronen komen steeds opnieuw voor.

• Productfoto's voorbereiden voor een Shopify- of WooCommerce-winkel. Een map met 4000 pixel camera-originelen wordt beperkt tot een langste zijde van 1600 px zodat de winkel snel laadt, terwijl de beeldverhouding intact blijft zodat niets uitgerekt lijkt.
• Social media- en app-assets genereren vanuit één masterbestand. Een exacte 1200×630 instellen voor de Open Graph-kaart, dan 512×512 voor een app-pictogram, en elk in een paar klikken exporteren zonder een zwaar bewerkingsprogramma te openen.
• Een batch QA- of ondersteuningsschermafdrukken verkleinen voordat ze als bijlage aan een ticket worden toegevoegd. Een map van 50 afbeeldingen op 50% schalen vermindert de archiefgrootte doorgaans met driekwart voordat het naar de bugtracker gaat.

Een praktijkvoorbeeld: 4000 px foto naar een 1600 px webafbeelding

Een 4000×3000 foto rechtstreeks van een telefoon is een veelvoorkomend bestand dat veel groter is dan een weblayout nodig heeft. Het is een goed referentiepunt voor wat formaatwijziging bespaart.

Sleep de foto naar de uploadzone, laat de modus op Langste zijde beperken staan en stel de waarde in op 1600. De Canvas-pipeline hertekent de afbeelding op 1600×1200 met behoud van de beeldverhouding en codeert deze opnieuw in het originele formaat. De uitvoerkaart toont de nieuwe afmetingen en bestandsgrootte, die voor een typische JPEG daalt van meerdere megabytes naar een paar honderd kilobytes. Klik op Downloaden op de kaart voor het afzonderlijke bestand, of op .zip downloaden als u meerdere afbeeldingen in één run hebt verkleind. De volledige cyclus, van neerzetten tot downloaden, draait in een fractie van een seconde en verbruikt na het laden van de pagina zelf geen bandbreedte.

Welke formaatwijzigingsmodi zijn beschikbaar?

Drie. Langste zijde beperken begrenst de grootste van breedte of hoogte tot een pixelwaarde en schaalt de andere zijde om te corresponderen — dit is de veilige standaard omdat het nooit vervormt. Exacte breedte × hoogte laat u beide getallen typen, met een beeldverhoudingsvergrendeling die het tweede veld herberekent op basis van de bronverhouding terwijl u het eerste bewerkt — zet het slot uit wanneer een formulier een exact niet-proportioneel formaat vereist. Op percentage schalen vermenigvuldigt beide afmetingen met één factor, handig om een hele batch in één keer te halveren of te verdubbelen. Zes voorinstellingen met één klik (van 1920×1080 tot een miniatuur van 150×150) dekken de meest voorkomende doelen.

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, hertekenen en opnieuw te coderen. Er worden geen afbeeldingsgegevens naar een server gestuurd, er is geen tijdelijke upload en geen cloud-retour. U kunt het verifiëren: open DevTools, schakel naar het Network-paneel en voer een formaatwijziging uit. De enige uitgaande verzoeken die u ziet, zijn het initiële laden van de pagina en advertentieaanroepen. Niets in afbeeldingsvorm verlaat de tab, wat dit veilig maakt voor gescande identiteitsbewijzen, medische afbeeldingen en ander materiaal dat u nooit zou willen uploaden.

Zal het wijzigen van het formaat de kwaliteit verminderen?

Een afbeelding verkleinen (downscaling) ziet er uitstekend uit — de browser middelt de bronpixels tot minder pixels, zodat het detail scherp blijft en het bestand veel kleiner wordt. Vergroten voorbij de bronresolutie (upscaling) kan geen detail verzinnen dat nooit is vastgelegd, dus een kleine afbeelding die omhoog wordt geschaald ziet er zacht uit; dat is een beperking van elke verkleiner, niet van deze specifiek. De uitvoer behoudt het bronformaat: PNG blijft verliesvrij, terwijl JPEG en WebP opnieuw worden gecodeerd op een hoge kwaliteitsinstelling zodat het visuele verschil met het origineel moeilijk te zien is.

Welke bestandsformaten ondersteunt het?

Aan de invoerkant wordt elk formaat geaccepteerd dat de browser kan decoderen: PNG, JPEG, WebP, GIF en BMP dekken bijna elk bestand dat een telefoon, camera of schermopnametool produceert. De uitvoer behoudt het bronformaat waar de Canvas-encoder dit ondersteunt — PNG, JPEG en WebP werken rechtstreeks. GIF en BMP, die de Canvas API wel kan decoderen maar niet opnieuw kan coderen, worden opgeslagen als verliesvrij PNG. De bestandsnaam van de verkleinde afbeelding bevat de nieuwe afmetingen (bijvoorbeeld foto-1600x1200.jpg) zodat een batch gemakkelijk te sorteren is.

Sleep uw afbeeldingen, kies een formaat, wijzig het. Alles draait in uw tabblad. Geen upload, geen account, geen wachten in een serverwachtrij.