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: /)

$(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=".png">

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/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/png/vihainen.png">

• javascript
• jquery
• html
• css

Share Improve this question Follow edited May 11, 2016 at 12:29 Raidri 17.6k1111 gold badges6666 silver badges6868 bronze badges asked May 11, 2016 at 10:21 WaltariWaltari 1,25933 gold badges3636 silver badges6868 bronze badges 2

• 5 Not really...no, other than using SVG images, – Paulie_D Commented May 11, 2016 at 10:39
• Do you need to do that with css? Solution with jquery would give you better image quality. For example jsfiddle/w9o2chmn/15 – Jakob Commented May 11, 2016 at 20:08

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 1

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

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

both fixes are only works in chrome!

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 pletes, 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

I would just use a thumbnail and set an onclick to load your larger image. You can format both the thumbnail and regular image separately this way using CSS if you don't wanna do it in jquery. But even more simple would be to save two versions previously edited.

It might be better to take the image and resize it in any photo editing application. I have found that if i need to resize the image and dont want a grainy and pixelated photo to do it in a third party app. If you want a transition when the images are clicked or hovered you could you the original image and make a second copy of the image in the desired size. Then, you can use another transition so when the photo is clicked it transforms the size of the image while looking normal even though it is two different images.