I understand there is a file naming convention for standard images and retina (higher resolution) images. This is achieved by naming the file as <filename>#2.jpg, as an example.
Now I just ran a test on the iPad simulator that seems to suggest that it would be better to just use the higher resolution, period. The test was this: I had one full-screen image and one retina full-screen image. The low-res image simply has a "1" on it. The hi-res image shows "2" on it. Then I had the hi-res image load to fill the entire screen of the iPad simulator.
Result: It seems like the entire retina image was displayed in the screen.
Expected result: I expected the hi-res image to be partly cropped - I assumed the screen was too small to display the entire retina image.
Obvious questions:
Is my test flawed (am I missing something)?
And if this test can be verified, then why should we include 2 sets of images (standard and retina) if we can simply use retina? The only thing I see is that the retina images consume more memory, so it might be too much for devices that don't have retina displays.
Whether or not the retina (#2x) image is used depends ONLY on the scale factor (the amount of pixels per point) of the screen. Both iPad and iPhone have the same behavior.
You never reference the retina images directly. Instead you load them by saying
[UIImage imageNamed:#"myImage"];
If you are on a retina display the retina version of the image (myImage#2x.png) will be chosen for you. In either case the image takes up the same number of points on the screen. Both the retina and non-retina displays have the same number of points.
Related
I know that 2x images are for retina display.
But i want to know that how can we identify that my device is using 1x image or 2x image?
and one more thing
I have one image name stackOverflow.png of size 50x50 and its 2x with name stackOverflow#2x.png of size 100x98.
My question is that device will select retina image with name or size???
To check which one has been loaded, you can use this code:
UIImage *image = [UIImage imageNamed:#"image"];
NSLog(#"scale: %f", image.scale); //this will be 2.0 for retina image
Or just simply use two different images, as #MidhunMP suggested in comments.
It's usually not hard to tell just by looking at them-- especially in the iOS simulator. Set the simulator to retina mode and take a look. Non-retina images will be visibly blurry compared to retina images.
As for the image size, if your 2x image is not actually 2x the size of the original image, you are doing it wrong. Fix one image or the other, or both. Retina images are selected by name. If the size is wrong, the image will be stretched to fit. That will ruin the high-resolution retina effect you're trying to get with a 2x image.
I am using 2 images: image.png and image-hd.png and it works fine for retina and non-retina too.
But what I want to do now is to remove all non-retina images and leave only retina images. I heard that a non-retina device will scale the image down itself. I tried it but it didn't work :( How I do this? What name should I give to the image that it will show picture its actually size on retina and for non-retina will be scaled down?
No, Retina images are not scaled down automatically.
Only using Retina images and using them scaled down on standard resolution display devices is a bad idea.
Non-Retina devices have far less memory than Retina devices, but you're forcing them to load the Retina resolution images. In other words: device has half the memory, but is forced to load images that consume four times as much texture memory as need be.
Non-Retina devices have slower GPU & CPU. But you're forcing them to work on four times the number of pixels. Performance suffers.
You probably need to scale it down manually. I'm not sure if thats the best idea.
But I think you can just scale down the images to 0.5 if in retina device.
About images, its important to remember that each image is taking memory according to the size of the next power 2 dimensions. Which means that 20X20 pic will take the same memory as 32X32, and 130X260 will take 256X512.
So sometimes just handling your image sizes better or using something like Sprite Sheet.
I have an iPhone Xcode project that currently only contains images for retina display (twice the size as normal and with a #2x.png suffix). When I run the app on the iPhone Simulator (non retina) the images are still being displayed. Does this mean I don't need to worry about including two sets of images: retina and non-retina?
This all seems a bit odd. I would assume that no images would appear on a non retina device if there are no non-#2x files included.
Note: I have not tested my app on a non retina device. Just the simulator.
I'm pretty sure that iOS will just use the #2x and scale it down if you don't have a non-retina graphic. Although that's sub-optimal since you're letting iOS do the scaling at runtime which will be slower than including the non-retina graphic and also iOS might not do as good a job as scaling as your graphics editor of choice.
Even if it works, it's not good practice, and if you have a media heavy app definitely it would impact performance and battery life and memory foot print and ....
By the way, is it just that you don't have the 1x graphics available to you or you are concerned about your apps (download size) or ...
If you are assigning the images in Interface Builder, and you set the image property on a UIImageView to image#2x.png, for example, iOS will not know that it's a high resolution "2x" image. In fact, on a retina display, iOS will look for an image named image#2x#2x.png. Since it won't find it, it will set the scale factor of the image to 1.0.
The contentMode property (just "mode" in XCode) will decide if any scaling of the image occurs to fit the constraints of the UIImageView. You may wish to set the mode to "Aspect Fit" to get the high resolution image to scale as needed for both retina and non-retina displays. In general, the image will display as seen in Interface Builder.
If you are using UIImage's imageNamed or similar function to load the image, and just specify image (where "image.png" doesn't exist, but "image#2x.png" does), then iOS will actually find the image on a non-retina display, though the scale factor will be 1.0. As previously, you'll need to scale it to fit your view. The image will work normally on a retina device, and the scale factor will be set to 2.0, since iOS looks for a "2x" image first, and it doesn't matter if the other file exists or not.
This is from Apple's documentation on imageNamed:
On a device running iOS 4 or later, the behavior is identical if the
device’s screen has a scale of 1.0. If the screen has a scale of 2.0,
this method first searches for an image file with the same filename
with an #2x suffix appended to it. For example, if the file’s name is
button, it first searches for button#2x. If it finds a 2x, it loads
that image and sets the scale property of the returned UIImage object
to 2.0. Otherwise, it loads the unmodified filename and sets the scale
property to 1.0. See iOS App Programming Guide for more information on
supporting images with different scale factors.
If at all possible, you really should include both retina and non-retina images. Using higher-resolution images than necessary negatively affects memory and performance.
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.
According to Apple's website, the iPhone 4 is 960-by-640-pixel resolution at 326 ppi. I made an image with these specs, however when I put it onto my iPhone as a background for one of my applications, it is way too big and you can only see the upper left corner of the image. How do I make it fit and how do I make a high resolution iPhone 4 background?
You need to give it the name "someImage#2x.png" with the important part being #2x so they can apply the scale correctly.
Realize though that you also need "someImage.png" which is half that size for devices without the retina display.
I always use the "someImage.png" file as the initial image and then the OS will automagically switch to the #2x image during runtime so don't worry about that. Just set it to the standard 320x480 or 480x320 and let the OS do the rest.
Are you using an UIImageView? You should have two versions of your images
image.png - normal 320x480 image for older phones
image#2x.png - for iphone4 with the 640x960 resolution
When you set the file location (be it programically or in Interface Builder) just tell it about the 'image.png'. The iPhone4 will automatically look for the '#2x' version.