Super User is a question and answer site for computer enthusiasts and power users. It's 100% free, no registration required.

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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.

share|improve this question
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. – DuckDuckGoose Jan 9 '13 at 7:50
    
By zooming do you mean ctrl/cmd and +? – booyaa Jan 9 '13 at 16:49
    
@booyas, yes, that's what I mean. – Propeller Jan 10 '13 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 at 23:44

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: optimize-contrast;         /* CSS3 Proposed       */
    -ms-interpolation-mode: nearest-neighbor;   /* IE8+                */
    }
share|improve this answer
    
Unfortunately this doesn't work on Chrome (except on OSX). – lapo Oct 7 '14 at 12:58
    
How/where exactly would I need to 'apply' this in Chrome? – Nyerguds Dec 10 '14 at 22:10
    
Have you just said it's not possible and then pasted a working code to actually do it? – Petr Peller Feb 24 at 10:36
    
No @petrpeller, I clearly wrote it isn't possible directly with the browser. I then go on to explain that a plugin is required ... Why are you asking this question when you can read the post?!? – Dave Feb 24 at 19:46

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.