Max-width:100% makes my images blurry on mobile devices

[nicolat]

Hi everyone,

I've been racking my brain with this one, when I add max-width:100% to my sites images then it makes them blurry. Especially on div boxes that have a % width.
When I upload an image that is bigger than the box width then it shrinks the image size down and blurs it?

http://www.fathimasstudio.com/

Any suggestions?

[WhiteleyDesigns]

Can you provide a specific page/image where this is an issue?

---

Matt Whiteley – WhiteleyDesigns, GitHub
Designing, Developing & Creating with WordPress

[nicolat]

Hi,
Sometimes the images are clear on bigger screens but when you view it on mobile devices it looks all blurry ie http://www.fathimasstudio.com/portfolio

On this page its the three boxes at the bottom with the yellow background

About Me

[WhiteleyDesigns]

Hey Nicolat,

I see they look a tiny bit blurry, but I don't think it's anything code-wise. My assumption would simply be because the pixel density on mobile devices is so much better that the images seem like they are a bit blurry. My suggestion would be to upload a larger image (maybe twice the size) and see if that resolves the issue. I know you want images to be to scale, but with retina devices that is tough.

I use SVGs for images whenever possible as they scale without losing quality, but in your case that wouldn't work.

Cheers,

Matt

---

Matt Whiteley – WhiteleyDesigns, GitHub
Designing, Developing & Creating with WordPress

[Author]

Posts