Menu

Blurry edge or white halo after resizing a cutout PNG? They are two different problems
📰

Blurry edge or white halo after resizing a cutout PNG? They are two different problems

DEV Community: javascript·yue xing·about 8 hours ago
#7Vhjm0h6
#devtojavascript#devto#dev#alpha#pixels
Reading 0:00
15s threshold

When I shrink a cutout PNG and blow it back up, two things go wrong at the edge, and it is easy to file them under one name: "resizing makes the edge blurry". After comparing the channels separately, I think they are two effects with two causes. The soft edge comes from interpolation. The bright or dark fringe comes from how the colour channels are averaged when alpha is not taken into account. Only the second one depends on the premultiplied-alpha convention.

The test image is a portrait from Wikimedia Commons (CC BY-SA 4.0, by Dmitry Makeev), scaled to 1330×2000 and cut out with the AI background removal in ImgIng, which I ran in a desktop browser at https://imging.ai/ . In the run where I watched the network tab, I saw only model file downloads. Every number below is one image per type, one Apple M4, one run, Chromium 149 and sharp 0.35.5.

Alpha does not care which convention you use

I shrank the exported PNG 4× with an area average and enlarged it back with bilinear, twice.…

Continue reading — create a free account

Join HashtagPLUS to read full articles, follow hashtags, vote, and join the conversation.