My pixijs app 'destroy' pixel when I downsize a big jpeg

Question

I use Pixi.js and I want to down-size a big JPEG but the quality of the picture is affected.

I load the picture like this:

this.App = new PIXI.Application({ background: 'black', resizeTo: window, antialias: true })
this.ironing = await PIXI.Assets.load('/ironing.jpg')
this.Container = new PIXI.Container()
this.Painting = PIXI.Sprite.from(this.ironing)
this.App.stage.addChild(this.Container)
this.Container.addChild(this.Painting)
await gsap.to(this.Container, {
    width: 2577,
    height: 3200,
    x: -930,
    y: -650,
    duration: 0.6
})

In the picture I downloaded, the painting on the left is the pixi rendering with bad quality and on the right there is the preview on a normal image preview app.

You can test my code here: https://virages.io

What's wrong ?

I tried the following:

antialias: true, resolution: window.devicePixelRatio || 1

i dont know very much about that tool but it appears to have a number of render options you could experiment with. I agree the picture looks very grainy on the zoomable version. Something isn't right. Perhaps also try experimenting with the 'ROUND PIXELS' option - that should at least make the yellow box have more clearly defined edges https://pixijs.download/dev/docs/PIXI.settings.html — diopside, Jul 12 '23 at 01:37
Hi diopside ! I try Round Pixels but it doesn't change the image aspect. But it help me trying other things related to the device pixel ratio :) Indeed, I manage to make the picture really better on big pixel ratio screens (touchable devices) with 'autoDensity: true' and resizing the Sprite by it scale and not its height & width. — ricardo, Jul 18 '23 at 11:50

ricardo · Accepted Answer · 2023-07-18T14:31:16.183

[results][1], on this pictures bottom are high density screens and top are normal screens, right are normal resolution & right are device pixel ratio resolution + autodensity.

Thanks to this videos & repos : https://www.youtube.com/@CJGammon/search?query=pixi https://github.com/diving-in/pixijs here's my code :

    const renderer = new PIXI.Renderer({
      resolution: window.devicePixelRatio,
      autoDensity: true
    })

For normal screens, the rendering is little bit aliased even with the antialias option but for hight density pixel screens that do the trick !

My pixijs app 'destroy' pixel when I downsize a big jpeg

1 Answers1