Blurry images when scaling down with css

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