Mr. Meticulous, on 18 February 2012 - 11:14 AM, said:
Hi there everyone!
I'm currently stuck in a bit of a situation at the moment, I'm designing a responsive website for iPads/iPods/iPhones. I've created it and now coding it, but when I view the website on my mobile (iPhone 4) the images are blurry, they look crisp and solid on a desktop PC, yet not on my iPhone.
I've been scanning the web for answers, but only found solutions for the blurry photos in the Camera app, not a website issue.
If anyone has experienced this issue and found a fix for it, I'd be grateful if you posted the solution!
If it's any help, my iPhone is running on 5.0.1 firmware.
Thanks!
Great question.
This sound like an issue with having a standard def image being displayed on the iPhone 4's retina display. The iPhone 4's display has more pixels per inch than the older iPhone models so when it tries to display the image you're using it effectively has to scale the image bigger which causes it to appear blurry. You'll need to do 2 things to fix this.
1. Create a version of the image that is twice as wide and twice as tall. Obviously just taking the same image and making it bigger won't work (that's what is already happening). You'll need to take your highest quality version of this image and shrink it down to double the width and height of the one you already have. (i hope that make sense)
2. You'll need to use some mechanism for switching out the image when you're on a hi-def display. You could use javascript or CSS. It just kind of depends on how your displaying the image. If you're using CSS already to display the image (perhaps using background-image) you could just add the following:
.foo {
background-image: url(normal_image.png);
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
.foo {
background-image:url(big_image.png);
}
}
Another thing you might try is just using the bigger image by default and using css or html to resize the image down to the size it should be on screen. This way you don't have any odd code forks, and it will "Just Work" on both. Problem with this approach is that you'd be loading the big image (using more bandwidth) for devices that couldn't take advantage of the higher quality image.
Hope that helps,
Jake
