# Image Is Pixelated When Scaled Down

**URL:** <https://phaser.discourse.group/t/image-is-pixelated-when-scaled-down/6394>\
**Category:** Phaser 3\
**Created:** [May 22, 2020, 2:00am UTC](https://phaser.discourse.group/t/image-is-pixelated-when-scaled-down/6394 "2020-05-22T02:00:48Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Programmer](https://avatars.discourse-cdn.com/v4/letter/p/779978/32.png) [@Programmer](https://phaser.discourse.group/u/Programmer)\
**Post date:** [May 22, 2020, 2:00am UTC](https://phaser.discourse.group/t/image-is-pixelated-when-scaled-down/6394/1 "2020-05-22T02:00:48Z")

</div>

I added an image to the canvas as a sprite, and scaled it down using `.setScale(0.36)`.  
The problem is that the image looks pixelated (while the image file itself is in high res).  
Before I scaled down the image it looked just fine. The problem only occurs after the scaling.

This is the image file that I imported into phaser 3 (scaled, in the image viewer of my computer):

 ![image](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/f/f2fee18bb3753f915fa518e7eda33d96de30afcf.jpeg)

And this is how it looks on the canvas in phaser (the tint here is different, but it doesn’t matter):  
 ![image](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/c/c55acfc707bf45dd91a2203bd4885ab1bc45f164.png)

As you can see, the result is very pixelated.  
How can I overcome this?  
Thanks a lot in advance 🙏

Here is a shortened version of my code:

```
var config = {
  backgroundColor: "#ffb3c9",
  type: Phaser.WEBGL,
  width: 600,
  height: 600,
  parent: "pageContent",
  physics: {
    default: "arcade",
    arcade: {
      gravity: { y: 200 },
    },
  },
  scene: {
    preload: preload,
    create: create,
  },
};
var game = new Phaser.Game(config);
function preload() {
    this.load.image("img", "img.png");
}
function create() {
    var sprite = this.add.sprite(50,50,"img").setScale(0.36);
    sprite.tint = 0x000000;
}
```

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [May 22, 2020, 3:59pm UTC](https://phaser.discourse.group/t/image-is-pixelated-when-scaled-down/6394/2 "2020-05-22T15:59:44Z")

</div>

Can you compare the scaled and unscaled sprites (screenshot)?

---

<div class="post-metadata">

**Author:** ![Programmer](https://avatars.discourse-cdn.com/v4/letter/p/779978/32.png) [@Programmer](https://phaser.discourse.group/u/Programmer)\
**Post date:** [May 23, 2020, 3:11am UTC](https://phaser.discourse.group/t/image-is-pixelated-when-scaled-down/6394/3 "2020-05-23T03:11:23Z")

</div>

@samme sure!  
Here is the image before scaling down:  
 ![image](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/6/6b2367abf7ad90f2c9bb1e53fa278d5ef4897372.png)  
And after (the scale here is roughly 0.1):  
 ![image](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/c/c55acfc707bf45dd91a2203bd4885ab1bc45f164.png)

---

<div class="post-metadata">

**Author:** ![Programmer](https://avatars.discourse-cdn.com/v4/letter/p/779978/32.png) [@Programmer](https://phaser.discourse.group/u/Programmer)\
**Post date:** [June 8, 2020, 10:26pm UTC](https://phaser.discourse.group/t/image-is-pixelated-when-scaled-down/6394/4 "2020-06-08T22:26:41Z")

</div>

@samme

# Update

I discovered that this problem occurs because of the use of the HTML canvas. However, there are ways to overcome this:

- Writing manually certain algorithms for better resizing.
- Using `ctx.imageSmoothingQuality = "high";`, which supports at least 76% of the cases.
- Preventing Phaser from resizing the image, by doing it manually with the actual image (which is a really bad solution in most cases).

But still, when using Phaser3, I didn’t manage to enable the `imageSmoothingQuality` option (since `canvas.getContext("2d")` is `null`.

Thanks again in advance 😊.