Image downscaling with CSS … Images are blurry in several Browsers

Question

I'm having issues with downscaled IMGs in several browsers… The Images need to be downscaled because they're responsive to the browser size… This is my code:

#pic-holder img {
    -moz-transform: rotate(0deg);
    /*image-rendering:-webkit-optimize-contrast;*/
    max-width: 70%;
    width:900px;
    height: auto;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index:1;

}

The -moz-transform: rotate (0deg); lets the image get sharper in several versions of firefox. Chrome looks perfect, no problems… But Safari 7 looks very shitty… Does someone have an idea what i could do? Using a JS to change images for Retina Display? That it doesn't have to downscale so much information? I know that downscaling isn't a very smart solution, but what else could I do to have responsive images that get scaled while chaning the browsers width and height?

Thank You!

Answer 1

You can try to use the image-rendering property, as seen here: https://developer.mozilla.org/de/docs/Web/CSS/image-rendering

Syntax:

• image-rendering: auto
• image-rendering: crisp-edges

• image-rendering: pixelated

• image-rendering: inherit

Here is an example demo: http://jsfiddle.net/UNLes/

Like seen in the demo, the first picture is not using the property at all, the second one is crisp and the last one should be pixelated but this seems not to work.

(Photo was taken from: http://lorempixel.com/)

The Browser-Support seems to be rather bad, but it should work for current Firefox, Safari and Opera. (Taken from the mozilla docs)

This was the CSS used on the images:

/*container for each image*/
div
{
    width: 200px;
}
img
{
    max-width: 100%;
}
img.sharp
{
    image-rendering: -moz-crisp-edges;
}
img.pixelated
{
    image-rendering: pixelated;
}