how to scale up .png in compose multiplatform? I ...

# compose

[jQrgen]

how to scale up .png in compose multiplatform?

I have a 12x12 png that easily resized in browser but in Compose its pixelated and ugly

[Alexandru Caraus]

You need a vector image instead, 12x12 px looking poxelated is expected

[Alexandru Caraus]

Svg or xml

[jQrgen]

Users can upload .pngs to the system if they like, so would I have to convert the .pngs to SVG or XML?

[Timo Drick]

What do you mean by easily resized in browser? Maybe you can provide some samples.
What you can do is changing the the filtering of the bitmaps maybe to have it less pixelated. But at the end there is not magic to increase resolution.

[Colton Idle]

if it resized in the browser maybe it was an svg? and the issue you're hitting is that the svg is being rendered... and then you're resizing it which is causing the artifacts (i think i heard fo someone having that issue in the past when trying to resize an svg)

but yeah. too little info in the question to know for sure or maybe you're mistaken about the format of the image.

[jQrgen]

It’s a .png that is resized in a browser without pixelating it:

Original:

https://testnet.niftyart.cash/nftyc/0e38fbf897c1d10bcce33883d40acb28fa7a37cc0733598526a[…]7cc918e3e4374dcbb3e815556c42d5333e232ce8b1b79eda/cardf.png▾

Resized: https://testnet.niftyart.cash/nft/0e38fbf897c1d10bcce33883d40acb28fa7a37cc0733598526aec[…]0004ec8d827cc918e3e4374dcbb3e815556c42d5333e232ce8b1b79eda

[Timo Drick]

Maybe you could define what you understand by pixelating

[Timo Drick]

Maybe a screenshot where we see what you expect and what it looks like in compose

[Timo Drick]

Do you mean that the resize in the browser do not have this hard edges and pixelated look?
Than this is because of filtering.

[Timo Drick]

Not sure if it is possible in Compose Multiplatform but maybe when you draw the bitmap using a canvas. Than you can define a painter with image quailty setting.

[Colton Idle]

you can't resize a bitmap (png/jpeg/etc) without causing pixelation. you can resize an svg tho

[Colton Idle]

I'm pretty sure nifty is doing some weird stuff to intercept right clicks and give you an image that's not really the image. lol. hence leading to a small image when you really want the large one.

[Colton Idle]

probably part of their attempt to make these "non fungible" lol

[Colton Idle]

i have a feeling nifty takes the small image and just redraws its pixels individually.

but again. this is all weird stuff because its an NFT and they're trying to make it non copyable because thats what an NFT stand for. non fungible. sorry my man. they're doing some weird stuff there.

[efemoney]

Not necessarily weird stuff, check the css in devTools, the effect is image-rendering: pixelated; if you turn that off or on it changes the rendering https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering#pixelated

[Colton Idle]

wait whaaaaa? lol. im an android dev. theres a css flag for image-rendering? gotta try that now lol

[Colton Idle]

lmao. yep. you're right. so if you take that flag off you get the same png scaled up that I would actually expect. distorted beyond belief. lol

[Colton Idle]

thats hillarious. so they're just applying a css effect to like a 10 x 10 pixel image. interesting!

[efemoney]

Also an android dev who did trial and error until I figured out why 😂

[Timo Drick]

So this is maybe gaussian interpolation. If you want to have maximum control you can do this with sksl shaders to have the same result on all platforms.

[jQrgen]

@Timo Drick can I write sksl shaders for Kotlin multiplatform?

[Timo Drick]

Yes it is very close to the AGSL from Android. But a little bit different API. But it will work than on all platforms (Desktop, Android, iOS, Web)

[Timo Drick]

I do not have any recommendation for documentation. But search for RuntimeEffect.makeForShader