How to correctly resize images to retain quality in Phaser 3

Question

I am making a game in Phaser 3. I have downloaded high quality (1100x1000px) images from the internet to use. But whenever I shrink them (to roughly 80x70px) they lose quality (either become pixelated or have a weird appearance). How do I correctly re-size the images to retain quality?

I re-sized the image using image.setDisplaySize() but the image looked weird. I am not sure why but the image contrasting has changed. Exact Code-

gameState.team_player_icon = gameState.screen_team_group.create(100, 130, (gameState.all_player_team[0].skin))

gameState.scale_size = gameState.team_player_icon.displayHeight/70
gameState.team_player_icon.setDisplaySize(gameState.team_player_icon.displayWidth/gameState.scale_size, 70)

I have already resized using canvas in paint editor 3 and the image looked fine but I want to know how to do it in Phaser 3 to save having to re-edit all the images for my game. Here it is below-

Phaser 3 image here-

Canvas Edited here-

In case it is not clear I want the image to look like the bottom image but using phaser 3. Thanks for any help in advance.

Answer 1

var config = {
  type: Phaser.AUTO,
  width: 800,
  height: 600,
  loader: {
    baseURL: 'https://raw.githubusercontent.com/nazimboudeffa/assets/master/',
    crossOrigin: 'anonymous'
  },
  pixelArt: true,//here
  //antialias: false,
  scene: {
    preload: preload,
    create: create
  }
};


var game = new Phaser.Game(config);

function preload ()
{
    this.load.image('alien', 'sprites/phaser-alien.png');
}

function create ()
{
    sprite = this.add.image(50, 50, 'alien');

    sprite.setScale(2);

}

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/phaser.js"></script>