Afbeeldingscaler: wil je een upscaler of een resizer?
Een resizer interpoleert pixels en een upscaler reconstrueert ze. Welke je nodig hebt, met gemeten 2x en 4x resultaten en de werkelijke browserlimieten.
"Afbeeldingscaler" omvat twee tools die tegenovergestelde dingen met een bestand doen. Een resizer hermonteert de pixels die je al hebt, zodat 4000 px breedte 1080 px breedte wordt en de details gemiddeld worden samengevoegd in minder monsters. Een upscaler laat de afbeelding door een getraind model lopen dat randen en textuur reconstrueert die het origineel nooit heeft opgeslagen. Beide veranderen het getal in het dimensievak. Slechts één van hen kan detail toevoegen, en het biedt alleen 2x of 4x aan.
Beide draaien binnen de browsertab. De upscaler downloadt zijn model eenmaal naar je machine, daarna wordt elke tegel daarna berekend op je eigen GPU. Niets wordt ergens gepost, omdat er geen API-route is om naar te posten en geen serveractie in de codebase (dat is de hele architectuur, beschreven op onze privacy pagina). Elke andere scaler in deze categorie uploadt je bestand en belooft het dan een uur of twee later te verwijderen.
Wat is het verschil tussen resizing en upscaling?
Resizing is interpolatie. Onze resizer geeft het werk aan de browser, hetzij via createImageBitmap met `resizeQuality: "high"` of via een canvas `drawImage` met imageSmoothingQuality ingesteld op hoog. Hoe dan ook, de uitvoerpixel is een gewogen gemiddelde van de invoerpixels eromheen. Gemiddelde waarden kunnen geen rand produceren die niet in de brongegevens aanwezig was, dus vergroten door interpolatie geeft je een grotere, zachtere kopie van dezelfde informatie.
Upscaling is reconstructie. De onze draait Real-ESRGAN realesr-general-x4v3, een generatief model dat is getraind om plausibel detail te hallucineren bij 4x, beschreven in het 2021 artikel. Het verwerkt de afbeelding in tegels van 256 px met een overlap van 16 px aan elke kant, zodat een tegel altijd de context van zijn buren ziet voordat het kerngebied wordt geschreven. Het model raadt. Die raden zijn meestal correct bij gezichten, stof en tekst, en ze kunnen ernstig fout zijn bij fijne herhalende patronen.
Welke wil ik eigenlijk?
Als de doelformaat kleiner is dan de bron, wil je de resizer en daar is niets over te discussiëren. Als de doelgrootte groter is, is de vraag of je de onderstaande beperkingen kunt veroorloven. Hier is wat de twee tools daadwerkelijk doen in onze build, genomen uit de code in plaats van de marketingtekst.
| Resizer | Upscaler | |
|---|---|---|
| Richting | Elke doelformaat, omhoog of omlaag | Alleen 2x of 4x |
| Methode | Browser canvas interpolatie | Real-ESRGAN realesr-general-x4v3 |
| Uitvoerformaat | Bronformaat behouden (GIF en AVIF komen als PNG) | Altijd PNG |
| Kwaliteitscontrole | PNG verliesloos, alles andere opnieuw gecodeerd op kwaliteit 90 | Geen, PNG heeft geen kwaliteitsinstelling |
| Batchlimiet | 10 bestanden, 50 MB totaal | 1 bestand |
| Invoertop | Alleen de batchlimiet | Ongeveer 32 MP met WebGPU, ongeveer 1,1 MP zonder |
| Voorinstellingen | 15 sociale formaten plus 25/50/75 procent | Geen, alleen de 2x en 4x knoppen |
Eén rij verdient een waarschuwing. De resizer staat standaard ingesteld op "niet vergroten" dat aangevinkt is, wat elke ingevoerde doelgrootte beperkt tot de oorspronkelijke afmetingen. Een benoemde sociale voorinstelling overschrijft opzettelijk die beperking, omdat een beperkte 1080x1920 verhaal kader helemaal niet overeenkomt met een platform specificatie.
Hoeveel groeit het bestand als ik upscale?
Veel, en PNG is de reden. We hebben small.png, 400x269 en 177,1 KB, door beide instellingen gehaald. Bij 2x kwam het uit op 800x538 en 782,8 KB. Bij 4x kwam het uit op 1600x1076 en 2,7 MB. Dat is ongeveer 15x de invoerbytes voor 16x de pixels, wat is hoe verliesloze uitvoer eruit ziet wanneer het model net elk vlak gebied heeft gevuld met nieuwe microtextuur. De upscaler schrijft PNG in elk geval, dus er is geen kwaliteitsregelaar om tegen te ruilen.

Stuur het resultaat naar de compressor voordat je het ergens gebruikt. Onze PNG "geen compressie" modus is oxipng niveau 3, echt verliesloos, en het bracht een 942,4 KB alpha.png terug naar 383,9 KB. De paletmodus (imagequant) bracht hetzelfde bestand naar 98,3 KB, wat prima is voor vlakke graphics en verkeerd voor een fotografische upscale.
Waarom ziet de 2x optie er zachter uit dan 4x?
Omdat 2x geen apart model is. realesr-general-x4v3 heeft precies één uitvoerschaal, en dat is 4x. Wanneer je 2x kiest, voeren we de identieke inferentie uit en schalen we vervolgens elke tegel terug naar de helft van de grootte met de canvasinterpolator op hoge gladheidskwaliteit. Dus het GPU-werk is hetzelfde voor beide knoppen, en 2x is reconstructie gevolgd door hermonteering in die volgorde. De downscale gebeurt per tegel, wat betekent dat de volledige 4x afbeelding nooit in het geheugen bestaat tijdens een 2x taak. Als je de ruwe uitvoer van het model wilt, kies dan 4x en verklein het zelf later in de resizer. De bronbreedte die elke vermenigvuldiger nodig heeft om 3840 px te bereiken wordt apart berekend.
Waarom accepteert de upscaler mijn 24 MP foto niet?
Het hangt volledig af van of je browser WebGPU start. Met WebGPU actief, accepteert een 4x taak ongeveer 32 megapixels aan invoer. Zonder het, valt onnxruntime-web terug op single-threaded WASM en daalt de invoertop naar ongeveer 1,1 megapixels, kleiner dan bijna elke telefoonfoto. Dat is geen willekeurige limiet. CPU-inferentie op dit model duurt minuten per megapixel, en een 24 MP taak zou de tab de rest van de middag vastzetten. Altijd één bestand tegelijk.
Wat verandert de resizer nog meer naast het aantal pixels?
Meer dan mensen verwachten. Een PNG-bron blijft PNG en blijft verliesloos. Alles andere wordt opnieuw gecodeerd, standaard op kwaliteit 90, dus het resizen van een JPEG is ook een recompressie, of je dat nu wilde of niet. Een GIF-bron komt uit als PNG, en als die GIF geanimeerd was, verlies je elk frame behalve het eerste. AVIF-bronnen komen ook uit als PNG. De drie pasvormmodi zijn belangrijk wanneer de bron- en doelaspectverhoudingen niet overeenkomen: cover center-crops, stretch distorts en contain verkleint het canvas naar het passende gebied in plaats van het met balken te vullen. Als je een specifieke regio nodig hebt in plaats van een specifieke grootte, is de cropper de juiste tool, hoewel het één bestand tegelijk neemt en verliesgevende formaten opnieuw codeert op een hardcoded kwaliteit van 92.
Wat moet ik nu met mijn bestand doen?
Controleer eerst de lange rand. Onder ongeveer 1600 px en je hebt het groter nodig, open de upscaler, voer 2x uit en duw de PNG daarna door de compressor in verliesloze modus. Boven dat, of al op de resolutie die je nodig hebt, gebruik de resizer en kies een sociale voorinstelling zodat je de afmetingen niet hoeft op te zoeken. Als het doel een feed is, is de vier vormen die Instagram accepteert en het 1080 px plafond daarachter de lijst om mee te werken.