Blurry look on images while applying CSS transform & scale can be improved using the CSS image-rendering property.
While applying CSS transform on an image, and scaling it, a common problem comes up that the image becomes blurred. This may give a bad look to the page.
However the CSS image-rendering property can be really helpful to improve the quality of the image in such a situation.
image-rendering property sets the scaling algorithm of the image when it is scaled up or down. Browsers have a choice as to which algorithm to apply for image rendering when the size of the rendered image is greater than or less than the actual size of the image. With image-rendering CSS, we can choose a specific algorithm ourselves.
image-rendering can have 5 values :
smooth : This value specifies that the image is to be scaled using an algorithm that maximizes the appearance of the image.
This is indended for normal photos.
image-rendering: smooth;high-quality : This value is similar to smooth, but image rendered is of higher quality. This uses more computational power and is meant for specific images, not all. This should be sparingly used.
image-rendering: high-quality;crisp-edges : This value specifies that image is to be scaled using an algorithm that preserves contrast and edges.
This is indended for pixel art, line drawings, QR codes.
image-rendering: crisp-edges;pixelated : This value will preserve the pixelated look of the image.
image-rendering: pixelated;auto : This is the default value. Browser will render image as per the situation and its default algorithms.
image-rendering: auto;