O'Reilly Forums: Blurry Images On Website (Iphone) - O'Reilly Forums

Jump to content

Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

Blurry Images On Website (Iphone)

#1 User is offline   Mr. Meticulous 

  • New Member
  • Pip
  • Group: Members
  • Posts: 2
  • Joined: 03-February 12

Posted 18 February 2012 - 11:14 AM

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!
0

#2 User is offline   AverageJake 

  • Active Member
  • PipPip
  • Group: O'Reilly Author
  • Posts: 36
  • Joined: 04-October 10
  • Gender:Male
  • Location:Seattle, WA

Posted 21 February 2012 - 02:00 PM

View PostMr. 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
0

#3 User is offline   Jonyy 

  • New Member
  • Pip
  • Group: Members
  • Posts: 1
  • Joined: 31-May 12

Posted 31 May 2012 - 11:20 AM

View PostMr. 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!


Hi,
This is indeed probably due to retina display. Could you test with another smartphone, or an older iPhone firmware? If this is the case, there are many ressources on the Internet to adapt a website to retina display.
And I also think, if your website deserve it, it could be better to create an app directly on the iPhone/Android. This could be better for user experience. It is up to you.
Cheers,
Rémi
http://itunes.apple.com/us/app/easy-group/id461469079?mt=8
0

#4 User is offline   Cyber World Uk Ltd 

  • New Member
  • Pip
  • Group: Members
  • Posts: 2
  • Joined: 29-February 12
  • Gender:Male
  • Location:uk

Posted 03 April 2013 - 02:14 AM

I've been scanning the web for answers, but only found solutions for the blurry photos in the Camera app, not a website issue.
0

#5 User is offline   richroberts972 

  • New Member
  • Pip
  • Group: Members
  • Posts: 1
  • Joined: 09-April 13

Posted 09 April 2013 - 10:26 PM

It can be related to retina. you should have your phone checked, maybe your phone is not updated also
0

Share this topic:


Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

2 User(s) are reading this topic
0 members, 2 guests, 0 anonymous users