17

When I'm trying to view pixel art up close, chrome starts blurring the image. I want to make it so that even when the image is zoomed in, I can still see the pixels in crisp detail, not a blurred one.

5
  • 1
    At the moment I don't think you can disable the smoothing algorithm that chrome uses that smooths out the edges of the images when you zoom in them. Unless there's an extension that does so or someone knows something that I don't know as of yet. Jan 9, 2013 at 7:50
  • By zooming do you mean ctrl/cmd and +?
    – booyaa
    Jan 9, 2013 at 16:49
  • @booyas, yes, that's what I mean.
    – Propeller
    Jan 10, 2013 at 14:40
  • 1
    Things have improved, now this is a possible duplicate of stackoverflow.com/questions/7615009/… . In particular, see namuol's answer and jsfiddle at jsfiddle.net/namuol/VAXrL/1459 which demonstrates what I think you are wanting. TL;DR for chrome: "image-rendering: pixelated;" on img and canvas elements.
    – Don Hatch
    Jan 24, 2016 at 23:44
  • Not your question, but is it possible to store the images in higher quality at least, and then would the zoom use the extra detail?
    – Xonatron
    May 30, 2019 at 18:05

4 Answers 4

21

Update

As per the comments:

it is now possible in Firefox: image-rendering: optimizeSpeed; – Arnaud

Original

This isn't possible directly from the browser.

The smoothing is applied via an algorithm and most modern browsers do similar and in IE, Firefox and Chrome there is no way to turn this off.

http://productforums.google.com/forum/#!topic/chrome/AIihdmfPNvE

You do have other options, here are the 2 main points from the link above, both are Chrome addons.

image-resizer
imagezoom

You could apply the CSS code below in the browser, which will turn it off!

img { 
    image-rendering: optimizeSpeed;             /*                     */
    image-rendering: -moz-crisp-edges;          /* Firefox             */
    image-rendering: -o-crisp-edges;            /* Opera               */
    image-rendering: -webkit-optimize-contrast; /* Chrome (and Safari) */
    image-rendering: pixelated;                 /* Chrome as of 2019   */
    image-rendering: optimize-contrast;         /* CSS3 Proposed       */
    -ms-interpolation-mode: nearest-neighbor;   /* IE8+                */
    }
7
  • 1
    Unfortunately this doesn't work on Chrome (except on OSX).
    – lapo
    Oct 7, 2014 at 12:58
  • How/where exactly would I need to 'apply' this in Chrome?
    – Nyerguds
    Dec 10, 2014 at 22:10
  • 4
    Have you just said it's not possible and then pasted a working code to actually do it? Feb 24, 2016 at 10:36
  • 2
    image-rendering: -webkit-optimize-contrast; working in chrome
    – wp student
    Aug 30, 2016 at 12:11
  • 1
    @wp-student not anymore
    – Arnaud
    Nov 10, 2019 at 3:00
4

Possible in 2019 with the following CSS: image-rendering: pixelated;

3

I made this bookmarklet to disable smoothing. I keep the link in my bookmark bar and tap it when I want to disable the antialiasing on a page, usually for pixel art or classic gaming:

javascript:(function pixelate() {
  const sheet = document.createElement('style');
  sheet.innerHTML = 'img { image-rendering: pixelated; }';

  document.head.appendChild(sheet);

  for(let i = 0; i < frames.length; ++i) {
    frames[i].document.head.appendChild(sheet);
  }
})()

The reason a bookmarklet was appealing is that I don't like giving extensions the "read and change all your data on the websites you visit" permission.

2

I've noticed some issues with Chrome and Firefox when using GPU rendering with images. E.g.:

img {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

If you have any CSS statements with the following, try removing them and see if your image quality increases.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .