Image downscaling browser issues

Responsive design forces us to scale images. We are typically going to have two or three image sizes to work with suited for desktop, large retina and small retina screens. Sometimes we can just use desktop size for small retina screens. In the past year/s while implementing large scale systems that serve images of different size I’ve noticed some inconsistencies in performance between the largest browsers. If an image is scaled down too much, it will be jagged in Explorer. If it’s scaled down too little (i.e. just a bit) it will be blurry in FireFox. There is an obvious dilemma here as I can not find a size that accomodates both. Just now though I found this amazing css hack.

Prented that you are rotating the image, and Firefox will clear right up.

.image-scale-hack {
transform: rotate( 0deg );

This means I can stick to scaling only as much as absolutely needed which is what works best in Explorer, while the images stay fresh in Firefox. On top of this, users won’t have to load large images on desktop because they look better. Haleljuah.