Is it possible to avoid blur when scaling down image with transform?

Question

I have a background-image set on a div at 100%.

<div style="width: 990px; height: 742px; background-image: url('http://images.nationalgeographic.com/wpf/media-live/photos/000/913/cache/deadvlei-africa-namibia_91343_990x742.jpg'); background-size: 100%; background-repeat: no-repeat;"></div>

When I scale that image down by editing the width/height of the element, it retains its quality.

<div style="width: 247.5px; height: 185.5px; background-image: url('http://images.nationalgeographic.com/wpf/media-live/photos/000/913/cache/deadvlei-africa-namibia_91343_990x742.jpg'); background-size: 100%; background-repeat: no-repeat;"></div>

However, when I scale the image down using transform: scale, the image loses quality.

<div style="width: 990px; height: 742px; background-image: url('http://images.nationalgeographic.com/wpf/media-live/photos/000/913/cache/deadvlei-africa-namibia_91343_990x742.jpg'); background-size: 100%; background-repeat: no-repeat; transform: scale(.25);"></div>

Here is a demo of the results.

The image only seems to lose quality in webkit browsers. Chrome is worse than Safari.

Does anyone know why the image loses quality using transform: scale and if there is a way around it?

There is (transform: scale(.25)), it's just declared as an inline style. — colmtuite, Nov 15 '15 at 15:57
Possible duplicate of [Using transform: scale results in blurry images](https://stackoverflow.com/questions/27060690/using-transform-scale-results-in-blurry-images) — Adam, Aug 22 '17 at 04:45

score 0 · Answer 1 · edited May 23 '17 at 12:15

0

This question has been already asked. Simply set blur filter to 0. Check -webkit-transform: scale / blurry images

edited May 23 '17 at 12:15

Community

1
1

answered Nov 15 '15 at 19:01

Rea

298
3
9

Is it possible to avoid blur when scaling down image with transform?

1 Answers1