siga
5/4/2016 - 12:22 PM

The image-rendering CSS property provides a hint to the browser about the algorithm it should use to scale images (and therefore make them l

The image-rendering CSS property provides a hint to the browser about the algorithm it should use to scale images (and therefore make them look less blurry when scaled). Experimental. Modern browsers only! https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering Another method for Firefox: http://stackoverflow.com/questions/5918595/why-is-firefox-so-bad-at-resizing-images/14308227#14308227

image-rendering.css
content_copyfile_download
/* applies to GIF and PNG images; avoids blurry edges */

img[src$=".gif"], img[src$=".png"] {
                   image-rendering: -moz-crisp-edges;         /* Firefox */
                   image-rendering:   -o-crisp-edges;         /* Opera */
                   image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
                   image-rendering: crisp-edges;
                   -ms-interpolation-mode: nearest-neighbor;  /* IE (non-standard property) */
                 }
                 
div { 
        background: url(chessboard.gif) no-repeat 50% 50%;
        image-rendering: -moz-crisp-edges;         /* Firefox */
        image-rendering:   -o-crisp-edges;         /* Opera */
        image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
        image-rendering: crisp-edges;
        -ms-interpolation-mode: nearest-neighbor;  /* IE (non-standard property) */
}