In iphone4 images are not showing in high resolution its shows low resolution images.
How to change high resolution images for iphone4 using css?
To clarify, we are developing in phonegap using html and jquery The high-res images end up pixelated in the application. The .png images have the designation of #2x.png and the raw files match the png files.
We have utilized the practices in
http://aralbalkan.com/3331
and
http://davidehlers.com/2011/03/iphone...
The images appear slightly smaller than the raw images are, and significantly pixelated. I have attached an overlay of the issue that Venky is referring to. This is the buttonsml#2x.png on the right, placed on top of the screenshot of the app from an iPhone4.
Not sure about CSS but in normal way you can append "#2x" to normal image name and that would be goes for Retina Display. So may be you don't need to mention that in CSS and just put #2x in image and add it in to the project. For example for icon.png it would be icon#2x.png.
Hope this help.
I've gotten this to work by using the #2x versions in the image tags, and specifying a width/height that's half the size of the #2x image. For example, with a 200 x 80 "item#2x.png", I'd use:
<img src="item#2x.png" width="100" height="40">
It works well inside a UIWebView. Not sure about doing it with CSS though.
You have to use high resolution images. The SDK will automatically select the high resolution version (#2x) if you load the image in code (UIImage imageNamed), but if you are doing through any other method you will have to do it yourself.
Related
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!
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.
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.
I have this UIWebView on my app that shows a local html file. Do the images on that web view follow the #2x rule? I mean, if I build both, the regular and the #2x images will the webview load the retina ones for the iPhone 4?
remember that the images are being loaded by the HTML tag , not by any UIImage method.
thanks.
Nope. It's not too hard to roll your own though, as WebKit supports this CSS rule:
#media only screen and (-webkit-min-device-pixel-ratio: 2) {
/* this is a retina display device */
}
You can also use the -webkit-background-size and the usual width and height selectors to ensure the images display at the correct physical size.
Jonathon Grynspan is correct. I recommend reading Aral Balkan's tutorial on the topic. This was what I read when I implemented #2x graphics for a recent mobile site:
How to make your web content look stunning on the iPhone 4’s new Retina display
No, I just tried an experiment and the UIWebView did not pick up the #2x image.
Maybe my answer to a similar question is interesting UIWebView and iPhone 4 retina display. It uses Javascript to load scaled images and set the width properly.
The best solution i.m.o is to always load a retina image, and set the size to 50% for the image. It will look good on retina and non-retina displays. Should be sufficient.
I have an app and would like to make it retina display friendly.
How exactly does the process work? What images need to be added apart from what I have?
I know the sizes should be different, but am not sure on the details?
What else needs to be done to handle retina display?
Should the device be detected and use other images if the device supports retina display?
What if there are a lot of images? And how will this effect the app size?
Thanks
A good guide to this can be found here: http://mobile.tutsplus.com/tutorials/iphone/preparing-your-iphone-app-for-higher-resolutions/
In general you just create 2 sets of images. Your original and then a new one twice as big with #2x in the name. So for image.png at size 32x32 you would have one that is twice the resolution called image#2x.png at size 64x64. In your app just always use the image.png in Interface Builder and when loading in code.
There is no need to detect the device. These images will automatically be picked up by the OS and subbed in as necessary.
good articles if you're using sprites
http://weedygarden.net/2012/04/hi-res-retina-display-css-sprites/
The main thing about working with retina image is that image name convention.
And the size of image should be 2times greater than regular1.
Example- if your icon name for regular is icon.png then it should be icon#2x.png for
retina.And second thing is size for regular is 72*72 then it should be 144*144 for Retina.
It might be helpful for you.
Thnks
I am creating an app that has images in a picker view, but I have noticed that these images appear pixelated. Currently, I have the resolution set at 72 pixels/inch. I have increased it to 300 pixels/inch, but have not noticed a change. Has anyone run into the issue?
If you are creating these images in Photoshop, changing the DPI won't change the image file. A 4x4 image will have 16 pixels. When you change the DPI, it simply changes how large those pixels are on your display. In the case of the retina display, You need to create an image that is double the size (e.g. 8x8).
YOu need to provide the same file as a "#2x" file with double the size. For example, if you have:
myImage.png #32x32
Then you also need:
myImage#2x.png #64x64
When calling the resource, you can use the same way and ignore the #2x part of the filename. IOS will do the right thing. On high density devices, it will choose the bigger file, otherwise it will choose the smaller one.
[UIImage imageNamed:#"myImage.png"]
You dont need the png, but it works with or without it. This code works on all OS's. If it is a retina display, it will use the big image, otherwise not try it.
I am having a problem in iphone 4. The images used in iPhone less than 4 are fine but when I upgraded to iphone 4 the images looks distorted.
Here is the link.
The image size I have used is 320 x 480.
http://img822.imageshack.us/img822/8431/download22.png
Thanks.
The fact is that the resolution of iPhone4 is 960x640 instead that 480x320 so the image is scaled with linear (or bilinear, not sure) filtering.. the result is what you get: a blurry image.
Just redo the image with the proper resolution to solve the problem, you mainly notice these kinds of artifacts because you have rasterized text on an image..
You obtain this effect whenever you resize an image to fit a wider area of pixels: the missing pixels must be filled somehow and filtering comes into play. So you will have to consider also that part of the screen is used by the top bar to have an exact sized picture.
Create a #2x suffix to each of your png that you use.
example:
Icon.png
Icon#2x.png
The runtime environment will choose the double-resolution on retina display devices.
It looks like your original image is 480x320, but you aren't accounting for the fact that the status bar is compressing your image slightly (or perhaps it does on the iPhone4 but on the older iPhones it is cropping instead).
I'd check the image view settings for that background image.