CODEWITHSUNDEEP
iphoneiosmobile-safari
willdanceforfun
willdanceforfun

Reputation: 11240

Why is a picture appearing blurry on the iphone (no scaling)

I have been doing a bit of testing with images today and found that I could not make a blurry PNG image, which looked fine on my desktop appear non-blurry on the iphone without doing some strange things.

It wasn't until I made the images twice the resolution, then resized them within the iphone that they appeared crisp on screen. Is that normal practice?

What say if you have a background image that you want to be non-blurry? I don't see how I can do something like upload a background image and tell it to run at half the size...

Thanks for any pointers!

Upvotes: 1

Views: 4394

Answers (2)

willdanceforfun
willdanceforfun

Reputation: 11240

I found the answer.

It turns out that pixels are not the same on the iphone and are actually at a higher resolution.

In order to make images non-blurry, I needed to basically upload images 2-3 times regular size and then make their size smaller within the CSS.

For example, if I wanted a 50px image, I uploaded a 100px image and styled in within css to have a width of 50px.

It looks like the new iPads have even higher resolutions which means you may even want to upload higher resolution images to cater to those.

A bit lame I think, but it does look nice.

Upvotes: 5

danh
danh

Reputation: 62676

I might be misunderstanding you, but if you'd like to present a crisp image on a retina phone, you can place it in a UIImageView half it's size and set the contentMode to scale to fill.

Upvotes: 0

Related Questions