Have you run into the issue where chrome is automatically compressing, resizing, or otherwise ruining the quality of images on your website? You sit there and see full resolution in safari or other browsers, and find yourself asking “Why is chrome making my images blurry?”
Good news! the team here at Axiom have figured out a little hack around this issue that we can share with you.
Here is the process we used to kill the pixilation:
1) Inspect the image using chrome or Firefox “inspect element” developer tool
2) Remove attributes until you see the image return to its original quality without pixilation. In our Case this turned out to be be the attribute ( srcset ).
3) Remove that attribute from the image using vanilla JavaScript for faster execution. Insert the following script in the header of your website. In certain scenarios it may not work in the header, then insert it in the footer.
<p>
<script>
/* Kill Chrome Pixelation */
var imageToChange = document.getElementsByClassName('wp-image-148');
imageToChange[0].removeAttribute("srcset");
</script>
4) Clear your cache and refresh the page and you should be good to go.