Scaling down images with css makes them blurry.

[sheadawson]

Anyone have any insights as to why this would be happening? I need the images to scale like this for fluid responsive design…

http://jsfiddle.net/ygutz4wm/2/

Thanks in advance :D

[shaneisme]

Well 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 and picturefill.

[sheadawson]

Thanks for that insight. I am using picturefill but it’s not practical to have a different size image generated for every image size required inside a fluid width element. Is there any best way you can advise on saving out the image?

[shaneisme]

Under normal circumstances you’d have one for each break point, and normally you should only have a couple. Then, you’d need a few for high dpi screens.

As for creating them, you can automate that if that’s not the case for you:

http://addyosmani.com/blog/generate-multi-resolution-images-for-srcset-with-grunt/

As for saving them out, if you’re using Photoshop just save for web and adjust the quality. If you’re saving out a .jpg make sure the progressive box is checked. If you’re not using Photoshop I’m afraid I’m not sure!

For me personally, I try to never put text in raster images I always try to keep it live. I understand you can’t always, but you might want to try.

[deeve007]

Text like that in images is simply not going to work, end of story. If you can’t actually build a layout combining images & text (which wouldn’t be that hard) you’re going to have the problem whatever responsive image “solution” you try.

[sheadawson]

@deeve007 the images are screenshots of websites, for a design agency portfolio, so they kinda have to be images. Thanks for the help guys :)

[deeve007]

That’s simple then, simply have a max sized image for different screen sizes.

Smallest image 300px wide
Screens 600px to 800px get a 550px image.
800 to 1200 = 750px
…etc

Have 4 or 5 different versions for each.

[sheadawson]

I do have an arrangement like that. But it doesn’t help the fact that an image at any size scaled down even 2px smaller than its natural size gets blurry/defected.

[deeve007]

But don’t scale it down. Once a screen size gets to a certain size, display the next image down. The image should always be at 100%.

[sheadawson]

Ah right, that’s not really an option with this design unfortunately as the layout is fluid, meaning the image needs to scale px for px.

[deeve007]

Then you have what we call a design challenge. If you need to show that image within a layout, and at a quality that responsive images do not provide, then you need to revise the layout to address that technical limitations.

Or change the image to allow for the technical limitations that exist.

[sheadawson]

Yes indeed. Thanks :)

[__]

you could combine the breakpoint approach with images that never scale. it would take some planning and design work. something like so:

http://codepen.io/adrian-enspired/pen/VYwGBR

[sheadawson]

Good suggestion, might be a good one for other cases but cropping isn’t really an option with this design. I think we might just have to put up with slightly blurry images.

[scragz]

To anyone coming across this same problem years later, this is how you can fix it:

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

[Author]

Posts