5

this is my first attempt at a responsive design so excuse me if this is a stupid simple question.

I have created an image and set its max-width to no larger than the actually width of the image since I know that scaling up an image will result in blurry nastiness.

What I am a bit confused on is that as I contract the window and the img begins to shrink, it gets blurry as well...

Is this correct behavior and is there some way around this?

Any help appreciated!

Stefan
  • 772
  • 4
  • 9
  • 22
  • 3
    where is your code ??? I think it needs improvement – Baba Apr 04 '12 at 12:46
  • When you are contracting the window does the image shrink as well? I'm guessing you have the image width set as a % and then added a max width? – Philip Kirkbride Apr 04 '12 at 13:21
  • yes it does shrink, i have the wrapping div set to a percentage and the img tag set to width: 100%; height: auto; max-width: 480px; – Stefan Apr 04 '12 at 14:49
  • Not sure what changed but it seems as though the images display correctly now. – Stefan Apr 04 '12 at 14:50

1 Answers1

5

If your using Fire Fox it has been reported to have problems scaling down images.

Why is Firefox so bad at resizing images?

Firefox blurs an image when scaled through external CSS or inline style.

Apparently adding the following to the CSS has fixed the problem for some

image-rendering: -moz-crisp-edges;
Community
  • 1
  • 1
Philip Kirkbride
  • 21,381
  • 38
  • 125
  • 225
  • 2
    I am using Firefox and actually it seems as though when I view in Safari it displays correctly. It does seem to be firefox specific however adding the rule above did sharpen the images, but too much making it worse actually. – Stefan Apr 04 '12 at 14:53
  • I think for the time being its acceptable but I will need to figure out a better way to display images in a flexible layout like this. Thank you for the help. – Stefan Apr 04 '12 at 14:54
  • Nice, though the problem is also in webkit, at least Chrome – Dominic Nov 21 '12 at 11:33
  • 1
    In case anyone else comes here: "image-rendering: optimizequality" helped me without going nearly as sharp as "-moz-crisp-edges" did. – Will Jul 11 '14 at 18:48
  • In case anyone else comes here again: Chrome only supports `pixelated` though it recognizes `optimizeQuality` and `optimizeSpeed` however it does nothing (at least not when using `background-resize`). – oriadam Dec 21 '15 at 17:21