CSS3 animation image quality on scale

Question

I have downscaled images that onclick scale to the images original size. The image quality is very poor when the images are in a scaled down state. Any way to improve this?

(Here is a jsfiddle: https://jsfiddle.net/w9o2chmn/7/)

$(document).ready(function() {
    var zoomed = false;
    var card = $("#card0");
    card.click(function() {
        zoomFunction();
    });

    function zoomFunction() {
        if (zoomed) { //card flipped so front is invisible and back is visible. 
            zoomed = false;
            card.removeClass('zoom');
        } else { //card not flipped so front is visible and back is invisible
            zoomed = true;
            card.addClass('zoom');
        }
    };
});

html {height: 100%;}
.zoom {transform: scale(1.0);}
img {
  transform: scale(0.5);
  transform-style: preserve-3d;
  transition: 1s;
}

<img id="card0"  src="http://valtterilaine.bitbucket.org/png/vihainen.png">

Answer 1

• add backface-visibility: hidden https://jsfiddle.net/w9o2chmn/12/

• use zoom:50% instead of transform: scale(0.5): https://jsfiddle.net/w9o2chmn/11/

both fixes are only works in chrome!

Answer 2

Try adding the following properties for the img tag. They may help, depending on the image.

img{
    image-rendering: -moz-crisp-edges;          /* Firefox */
    image-rendering:   -o-crisp-edges;          /* Opera   */
    image-rendering: -webkit-optimize-contrast; /* Webkit  */
    image-rendering: crisp-edges;
    -ms-interpolation-mode: nearest-neighbor;   /* IE      */

    will-change: transform; // will consume additional memory
}

The will-change:transform property will make scaled down images look better on it's own on Chrome due to the work being done on the GPU and, typically, improve speed (smoothness) of the transform animation. It will, however, take up device memory which might be a concern if there are a lot of cards, especially on mobile.

Another, more "guaranteed" solution would be to use the performant scale transition only while animating, and when the animation completes, remove the scale property and set the width to half of the original width.

The basic algorithm for scaling down would be, for example:

1. Set a transition that only affects transform (transition:transform 1s;)
2. Scale the image down with transform:scale(0.5). The image now looks bad.
3. Remove the transition:transform 1s; property so that transforms are instant, then remove the transform:scale(0.5) property. The image now looks good but is of original size.
4. Set the width of the image to half at the same time the scale property is removed, so that the width change is invisible. The image is now half of the size and looks good.

This is better illustrated by the following modified jsfiddle