Responsive website images turn blurry on iPhone (iOS)

Question

I have built responsive website which works great on all devices except iOS. On iOS devices, my background images get blurry.

Here is link to my website. http://www.idynxschool.com/vesco/

You can view it on iPhone and you will find blurry images. Is this something to do retina ready images?

Any solution will be really appreciated.

Thanks

for iPhone use images with double pixels compared to normal one... — Rajeev Ranjan, Aug 08 '17 at 11:59
For svg images, if you are using an svg image with tag, this issue could happen as well. By changing it to use inline svg can fix the issue. — Will Kim, Mar 04 '23 at 00:52

Aleksandar Zoric · Answer 1 · 2017-08-08T12:08:03.820

In Safari on iOS, there is a known limitation when displaying large PNG and GIF images. The issue is triggered by the overall number of pixels in the image, so even if an image is narrow, you can experience blurriness if the image is tall enough.

This affects both the iPad and iPhone and affects all models of device. However, the exact image size that triggers the issue varies from iPhone to iPad and between models. For example, if you’re creating an image for iPhone 6 Plus that is 1080px wide, then the image can be up to ~4800px tall before blurriness would occur.

If you use JPG instead of PNG or GIF, then you may see less blurriness since the limit is increased for JPG images. For PNG or GIF images, however, the only way to work around this issue at current is to reduce the dimensions of the image until they’re below the limit that causes the issue.

Answer found: https://support.invisionapp.com/hc/en-us/articles/204660949-Why-are-my-images-in-iOS-blurry-

Please post the link as well, where you found the answer. https://support.invisionapp.com/hc/en-us/articles/204660949-Why-are-my-images-in-iOS-blurry- — Shobhit Srivastava, Aug 08 '17 at 12:04

Responsive website images turn blurry on iPhone (iOS)

1 Answers1