Blurry images when scaling down with css

Jan 15, 2017
admin
css tricks

Rastered images when scaled in either direction are going to have some anomalies. When you make them bigger, it’s obvious – things get pixelated quickly. When you shrink them down, whatever is rendering it has to guess on what pixel goes where.

When you come across things like text when you’re dealing with thin lines going every which way, things get messed up quickly. How you save out the image from the original matters too. If you want to do it right, use srcset but if you wanna make a fluid layout here’s a quick fix:

 

image-rendering: -moz-crisp-edges;         /* Firefox */
image-rendering:   -o-crisp-edges;         /* Opera */
image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
image-rendering: crisp-edges;
-ms-interpolation-mode: nearest-neighbor;  /* IE (non-standard property) */

 

Tags:

No comments

Leave a Reply

Your email address will not be published. Required fields are marked *