I like pixel-art games, and it's also the only kind of art I can kind of do myself. So I like to make my games in pixel-art too. The problem I have with that is that the pixels when displayed in Phaser don't have the same sizes anymore.

My issue becomes very obvious with the images:

The first picture is what it looks like in Phaser and the second image is what it's supposed to look like. As you can see the spots on the mushroom in Phaser have different sizes, even though they're supposed to be just one pixel with the same size. I don't understand this at all, and I can't find anything on the internet about it. I tried all different possibilities with scaling or no scaling and changing the game size, but nothing seems to fix it. This happened in every game I've made. There's no point in showing a specific example of a game, but I can show the game config

var config = {
width: 768,
height: 448,
pixelArt: true,
scale: {
    mode: Phaser.Scale.FIT,
    autoCenter: Phaser.Scale.CENTER_BOTH
},
scene: [BootScene, StartScene, MainScene, InventoryScene, InstructionsScene],
physics: {
    default: "arcade",
    arcade:{
        //debug: true,
        gravity: {y: 980}
    }
}

}

I can only imagine it has something to do with my config. Because I add the images as normal sprites/images in Phaser. This perticualt spriteis animated, but other images (and text too btw) that aren't animated share the same problem. This image also has scale 2, but as I mentioned changing the scale doesn't help.

Does anybode have any idea what's causing this? Maybe I'm just overlooking something totally obvious, but this has been bothering me for months now and I just can't figure out how to solve it.