Search code examples
javascriptimagepixi.jspointer-aliasing

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

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 Original image

What's wrong ?

I tried the following:

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

  • [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 !