title: How to correctly resize images to retain quality in Phaser 3
body: <p>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?</p>
  <p>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-</p>
  <pre><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)
  </code></pre>
  <p>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-</p>
  <p>Phaser 3 image here-</p>
  <p><a href="https://i.stack.imgur.com/3NLk4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3NLk4.png" alt="enter image description here" /></a></p>
  <p>Canvas Edited here-</p>
  <p><a href="https://i.stack.imgur.com/ojNMd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ojNMd.png" alt="enter image description here" /></a></p>
  <p>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.</p>