If I append the #2x suffix to my own images, will iOS 4 automatically replace my images with the Retina compatible ones, or does that only apply to Apple defined images? (Icons, for example.)
Yes, of course. If you display a myimage.png in your app, you may add a retina ready myimage#2x.png, so it is shown on retina devices.
See this guide for further information.
From the documentation:
The bundle- and image-loading routines
automatically look for image files
with the #2x string when the
underlying device has a
high-resolution screen.
So using for example [UIImage imageNamed:#"MyImage.png"] will automatically look for MyImage#2x.png when running on a device with retina display.
Related
I'm currently developing an application for iPhone with iOS7, only.
From what I read, for iPhone with iOS7, there is no support for older devices than iPhone4.
If that's the case, when it comes to images, all I need is retina images (#2x).
Can I submit to the App Store, an app with only retina images, since the app's minimal requirement is retina devices ?
Thank you.
Possible duplicate of Can I dump my non-Retina Images for a iOS7 only app?
Anyway, as long as I know you don't need #2x version of your images as long as you don't support old displays, but remember that your images as to be double width and height, then if you have a 100x100px UIImageView, you need to load a 200x200px image to meet retina resolution.
EDIT: To explain in deep.
Actually, iPad 2 and iPad mini 1st generation run iOS 7 and doesn't have retina display. Anyway using #2x images it is not mandatary. You can just use double size images and set your UIImageViews' contentMode to UIViewContentModeScaleToFill to fit your needs.
PROS -> smaller bundle
CONS -> worst performaces
I have some image files for iPhone 5 size 640x1136, i have previously implemented retina images for iPhone 4 & 4S using #2x suffix, so what will be the suffix for images in iPhone 5, we can user the same as is #2x or it has to be changed.
It’ll still use #2x images where they’re available. There’s a -568h suffix you can use for the launch image, as in Default-568h#2x.png, but that’s currently the only place it’s supported; see Leo’s answer for a way to get that working elsewhere.
See my answer here. Some useful macros to help you with dealing with images.
For the iPhone Retina 4-inch (iPhone 5) it's still the #2x suffix because the density is the same as the iPhone Retina (iPhone 4 and 4S). The screen is bigger but have the same density.
The -568h suffix will work only in for the default image because it's the only place you really need it (just to tell the system that your app have been optimized for this new screen size, and it can stretch your views).
The naming convention Default-xxx.png is just here to provide the right image while the app is launching but I think it's non sense to try to replicate the same to load other images in imageViews. It's like the Default-(landscape|portrait).png on iPad. You never need this convention to load images yourself.
The only rule is:
# is for density (2 density exist right now, normal and 2x)
~ is for device (2 different devices exist right now, iphone and ipad)
To adapt images/imageView on the 4-inch iPhone you should play with your imageView content mode and the autoresizing configurations.
I am confused on the differences between using #2x or -hd
Is one more efficient or quicker than the other?
I am using Cocos2D.
I'm pretty neither is quicker than the other
In my case, since I like using Cocos together with UIKit, I use the -hd suffix for all the Cocos related images (textures and such), and #2x for images that will be used with UIKit.
#2x is used before CCDirector is loaded..so the #2x is a must for the loading screen and icons
if the CCDirector is already loaded (aka..you're in game) you can use either #2x or -hd but if i remember corectly -hd is slightly slower and you have to enable retina display in app delegate... remove comments of:
if (![director enableRetinDisplay:YES]) CCLOG(#"Retina Display Not supported");
you don't need to enable retina display if you're using #2x
Like the other poster, I've never heard of an "-hd" suffix for image names in iOS.
Where did you see that? App names for retina devices or for the iPad sometimes have -hd as part of the name, but as far as I know there's no formal meaning to a "-hd" suffix in iOS.
You should set up your program to use standard images. To support Retina devices, you should save 2 versions of each image, "anImage.png", and "anImage#2x.png", where the one with the #2x suffix is twice as big in height and in width.
I have icons inside my application for uibutton & on uitable cell. Lets say I have image named "sampleImage.png". Can my app use the image named "sampleImage#2x.png iphone with retina display automatically provide it is in my app bundle ?
If yes how can write code for it because I have code like
cell.imageview.image = [UIImage named:#"sampleImage.png"];
Does it work even if I hardcoded the image name?
Any kind of help is appreciated.Thanks
Yes, UIImage will automatically use the #2x version of an image on a retina display.
Searching for an answer of your question I came across this: what is the code to detect whether ios app running in iPhone, iPhone Retina display, or iPad?
One of the answers mentions this:
There's often no need to determine directly whether you're on a retina display because UIImage handles that automatically when you use imageNamed and append "#2x" to your high resolution image file names (see Supporting High-Resolution Screens in the Drawing and Printing Guide for iOS).
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.