Menu icon Foundation
Blurry images

Is there a reason Foundation blurs images that are resized due to the size of the column (container)? This is an occurrence on most of my images.

Are there best practices I should follow when exporting my photos and images?

Screen shot 2014 02 11 at 1.16.56 pm

Is there a reason Foundation blurs images that are resized due to the size of the column (container)? This is an occurrence on most of my images.

Are there best practices I should follow when exporting my photos and images?

Screen shot 2014 02 11 at 1.16.56 pm
Brandon Arnold almost 6 years ago

Images are set to 100% the width of the parent container, so i'd assume its because your images are smaller than the parent and are being stretched. You can fix this by making the images larger.

Barry Hood almost 6 years ago

In addition to Brandon's answer, if you can't resize the images (i.e. you don't have larger assets available) and you know the optimal width you could always set a max-width on them in the CSS (then they'll scale properly when the container is less than their maximum width but they won't stretch beyond it).

Charlie Hinojosa almost 6 years ago

Hmm... Well, I've tried making the images larger (almost twice the size) with the same result. Does Foundation prefer a certain type of jpg/png export from Photoshop?

Gale K. almost 6 years ago

My images are 635 px 256 px save as .jpg. They look fine.

Brandon Arnold almost 6 years ago

Hmm, can you share with us some code and maybe the set up you have?

One problem might be that I work on a Retina macbook pro with a thunderbolt display. On the thunderbolt (not hi dpi) images look fine, but on retina they look blurry. Images need to be twice as big for retina than with regular images.

Brandon Arnold almost 6 years ago

Not looking blurry over here in OSX and Chrome 32.

https://www.dropbox.com/s/qjk18opgcy03f4v/Screenshot%202014-02-18%2011.40.20.png

Maybe its the browser or computer you're rendering in. I'd love to get that setup.

PhilW over 5 years ago

I think all you are seeing is the browser anti-aliasing of the image due to it not being at 100% size. If you change your browser window size to make some responsive image resizing happen you will see the image look a little rough during the transition but when you stop the browser will anti-alias again.

This is preferable to a jagged looking image that you might have got a few years ago due to not being at 100% size.

You'll definitely notice it more on a graphic or logo like your chart than you would in a photo but it will be happening in both.

Nothing to worry about. Just ensure your images are large enough to cope with an enlargement rather than reduction...

Susanna Moore over 5 years ago

As far as blurry images, the best thing you can do in order to maintain image sharpness is to resize and optimize your images. If you feel you are not getting good results, then please feel free to experiment with different sizes.

For web display, the maximum size doesn't need to be more than 1280 pixels wide or tall and 72ppi. Anything larger is a waste of space and bandwidth for those waiting for the images to load.

http://www.rasteredge.com/dotnet-imaging/