Skip to content

Instantly share code, notes, and snippets.

@markjaquith
Created April 11, 2019 17:29
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save markjaquith/55aedbe2bec178099e36eb161d8e01e7 to your computer and use it in GitHub Desktop.
Save markjaquith/55aedbe2bec178099e36eb161d8e01e7 to your computer and use it in GitHub Desktop.
Identify images that are displayed wider than their natural width (which results in them looking blurry)
  1. Paste this into your browser console.
  2. Start resizing the window.
  3. Any images that are ever displayed in a blurry fashion will throw an error and get faded out to 0.05 opacity.
window.addEventListener('resize', () => {
Array.from(document.querySelectorAll('img')).forEach(img => {
if ((img.clientWidth * window.devicePixelRatio) > img.naturalWidth) {
console.error(img);
img.style.opacity = '0.05';
} else {
img.style.opacity = '1';
}
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment