In één sprong verkleinen is wat afbeeldingen goedkoop laat ogen

Het verkleinen op een canvas van een browser is een bilineaire bemonstering: voor elke uitvoerpixel leest hij een kleine, vaste omgeving van de bron. Van 4000px breed naar 400px in één tekening betekent dat elke uitvoerpixel bepaald wordt door ruwweg vier van de honderd bronpixels die hij bedekt, en dat de andere zesennegentig helemaal nooit gelezen worden. Dat is aliasing, en daarom maakt verkleinen in één sprong van fijn detail moiré en van schone randen gruis.

Herhaald halveren repareert dat voor niets. Bij elke halvering is de omgeving die de bemonstering leest precies het gebied dat hij vertegenwoordigt, dus elke bronpixel draagt bij aan het resultaat. Vier extra tekenrondes op een foto van 12 megapixel kosten milliseconden in enkele cijfers, en het verschil is bij dezelfde uitvoergrootte gewoon te zien. Deze pagina meldt het aantal stappen per bestand, en het is het ene implementatiedetail in dit stuk met een zichtbare opbrengst.

Passen, vullen en uitrekken zijn drie verschillende antwoorden

Met beide zijden ingesteld kan een 4:3 foto geen 16:9 vak worden zonder iets op te geven. Passend maken houdt de hele afbeelding en landt binnen het vak, dus het resultaat is op één as kleiner dan het vak. Vullen bedekt het vak en loopt op één as over, en dat is wat een omslagafbeelding wil. Uitrekken dwingt beide zijden en vervormt, en dat is bijna nooit goed en staat hier omdat het af en toe wel klopt.

De hoogte op 0 laten omzeilt de vraag: de hoogte volgt de breedte en de beeldverhouding blijft exact behouden. Dat is de instelling die de meeste presets gebruiken.

Veelvoorkomende problemen

De uitvoer is wazig. Vergroten kan geen detail verzinnen. Een afbeelding van 400px naar 1600px opblazen geeft je een waas van 1600px; de enige oplossing is een grotere bron.
Het bestand werd groter na het verkleinen. Een PNG van een foto die op een kleiner formaat opnieuw als PNG gecodeerd wordt kan nog steeds groter zijn dan een kleine JPEG. Gebruik de compressor en wissel van formaat als het om de grootte gaat.
Tekst en schermafbeeldingen zien er zacht uit. Elke herschaling maakt harde pixelranden zachter. Verklein schermafbeeldingen naar een exacte hele breuk, een half of een kwart, waar het bemonsteringsraster uitlijnt. Of verklein ze helemaal niet.
De foto kwam gedraaid terug. Sommige camera's slaan het beeld op zijn kant op met een EXIF-vlag voor de oriëntatie. De decoder van de browser past die vlag toe, dus de uitvoer hier staat rechtop en heeft hem niet meer nodig, en daarom kan het er anders uitzien dan wat een bestandsbeheerder je liet zien.

Veelgestelde vragen

Hoe groot hoort een webafbeelding te zijn?

Niet breder dan twee keer zijn weergavebreedte, en zelden meer dan 1600px voor alles wat geen hero over de volle breedte is. Een foto van 4000px in een kolom van 600px kost je bezoekers de volledige download voor detail dat hun scherm niet kan tonen. De presets hier dekken de gangbare doelen, en de tweederde van het beeldgewicht die de meeste sites verspillen komt hiervandaan.

Verandert verkleinen het formaat?

Nee. Elk bestand komt terug in het formaat waarin het binnenkwam, dus een PNG blijft een PNG. Gebruik voor een ander formaat de compressor, die codeert naar een formaat dat jij kiest en laat zien wat elk formaat zou kosten.

Hoeveel afbeeldingen kan ik tegelijk doen?

Dertig. De grens is geheugen, geen beleid: een gedecodeerde afbeelding heeft breedte × hoogte × 4 bytes nodig, ongeacht zijn bestandsgrootte, dus een batch foto's van 20 megapixel is gigabytes als ze allemaal tegelijk vastgehouden worden. Ze worden om dezelfde reden één voor één verwerkt.

Wordt er iets naar een server gestuurd?

Nee. Het decoderen, het verkleinen en het coderen gebeuren allemaal in een Web Worker op je eigen apparaat, en de pagina doet tijdens het werk geen enkel verzoek. Dat is te controleren en niet alleen beloofd: open het netwerktabblad en kijk.