data:image displays image incorrectly on smaller screen

data:image displays image incorrectly on smaller screen

I got this snippet that loads 2 images with data:image.
However, it only works correctly if the image is shown at 100%. But
with a smartphone, images will be resized which results
in an incorrect display.

You can see for yourself (change ur browser window to a smaller size and select a color):

fiddle.js

So my question is: Is there a way to maybe a way to 're-load' the image that checks the
window scale / viewport or such? And so, what the right way to do this?