I want to add high res images in my iOS4 app. I already read this http://developer.apple.com/iphone/library/documentation/iphone/conceptual/iphoneosprogrammingguide/SupportingResolutionIndependence/SupportingResolutionIndependence.html#//apple_ref/doc/uid/TP40007072-CH10-SW2 and a lot of other pages but I did not find the answer which ppi my image should have.
Currently, I have an image for example button.png with 160ppi and 50x30px. Now I want to create a high res image named button#2x.png. Is it correct to use 326ppi and 100x60px?
I already had a look at other iOS open source apps but each app did it on a different way. Most apps used 72ppi for normal and high res. What is correct?
Thanks for your answers
Walter
To be quite frank, I've not found a need to adjust pixel resolution for my images (i.e. I leave my Photoshop templates at 72 ppi and they're OK). If you just provide the correct dimensions for each format, the system will know how to deal with your images appropriately depending on the resolution of the device it's on.
Related
When i create an image for an ImageView to iPhone, iPhone retina, iPad, iPad retina, should i create 4 images ?
For example for a coin image that i use ->
coin.png
coin#2x.png
coinIpad.png
coinIpad#2x.png
Can i create just the most-size image (imageIpad#2x.png) and inside Xcode select Aspect Fit ?
[UIImage imageNamed:#"imageIpad#2x.png"];
Which is the common way to do this?
To answer you question as you asked it: Yes you can just use the highest resolution image only and have it fitted to the size that each device currently needs. You can to that by just initializing the UIImage with the named resouce, as you suggest, and assign that to an UIImageView with an appropriate frame in each device type.
Would I advice doing so? No!
Why?
The naming conventions (~ipad and #2x) make it easy for you as programmer to provide perfectly fitted artworks for each resolution.
You or your designer respectively are in full control over how the artworks will be displayed
It saves memory and cpu and therefore even a bit of battery power.
When it comes to very detailed or small graphics that don't rezise well, then you can consider creating slightly different ones for the lower resolutions that suit better for their current resolution
So if you just want to downsize a high-res image then download something powerful but cheap like gimp and reszise it once yourself (instead of having thouthands of mobile phones do it again and again), save them with poper names and include them in the boundle.
Creating only one image and relying on the device to resize it is:
Inefficient - you're going to be using a lot of resources at runtime that should be busy doing other things
Not the intended way - you should create 2 images (retina and non-retina). If you wish to use another set of images for iPad, you should either check which device you're running on at runtime by using:
[[UIDevice currentDevice] userInterfaceIdiom] == UIUserInterfaceIdiomPad
or by splitting your project into 2 separate targets and adding the 2 sets of images separately to their correct target.
All you need to do is to put coin when you want to call it.
For example:
[UIImage imageNamed:#"coin"];
But when put the images in the resources folder, name it as coin#2x.png for retina image and coin~ipad.png for ipad images.
Xcode will call the appropriate image accordingly.
If you just want to have resizable assets that you can create once and use in different situations - have a look at this UIImage+PDF category that helps you use a PDF, which as a vector format can be scaled to whatever size without loss of quality.
Cacheing has been recently added, which should be a help as well.
The landing page for an ipad retina (i.e 1536 x 2048) is about 2MB. Apple seems to mandate using a PNG for landing pages. Is it possible to reduce this file size? (my landing page is really simple already)
actually the byte size of image not only depends upon the resolution but also on bit depth.
e.g. 100x100 PNG 16bit/24bit
you can reduce the bit depth of the png if you feel like it is not affecting the image quality and if you do find the image quality becomes unacceptable on reducing bit depth then your image is not that simple.
you can also use colors/gradient instead of an image so that you can completely remove the image
you can also use the tiled image (if it suits you) and can keep a small image in the resources.
see... you have lots of choices my friend..!!
I am using ImageOptim to reduce all my images. Works great and fast. Just download, open and drag and drop a folder or all your images onto the interface.
http://imageoptim.com/
There is even a case study on how well this tool can be used to shrink your iOS-Apps:
http://imageoptim.com/tweetbot.html
Use Image Optimiser. You can optimise image online.
Wondering if both a high res and low res image are required for iPhone Apps.
Having a duplicate copy increases file size which is something I need to cut down.
I've built apps in the past and only used high res, without #2x appended to the file name. The apps look great on Low res and High res devices. so...
Let me know
It is not required to have both image types. However, since the resolution is different for the Retina display you might build a Default image that looks nice on the iPhone 4 showing lot of details, but will look different on the other iPhones due to lack of correct resolution. Furthermore the image will be downsampled and if your UI fetish is big enough you rather provide two images than only one very good and take an accaptable sampled image.
I'm not sure if it is the best approach to skip one image just to reduce file size because most of the time the Default images are not the most relevant media part, since icons, sound files etc tend to use more space.
To conclude: I would suggest using both images and try to reduce the App size somewhere else.
According to Apple, the iPhone 4 has a new and better screen resolution:
3.5-inch (diagonal) widescreen Multi-Touch display
960-by-640-pixel resolution at 326 ppi
This little detail affects our apps in a heavy way. Most of the demo apps on the net have one thing in common: They position views in the believe that the screen has a fixed size of 320 x 480 pixels. So what most (if not all) developers do is: they designed everything in such a way, that a touchable area is (for example) 50 x 50 pixels big. Just enough to tap it. Things have been positioned relative to the upper left, to reach a specific position on screen - let's say the center, or somewhere at the bottom.
When we develop high-resolution apps, they probably won't work on older devices. And if they do, they would suffer a lot from 4-times the size of any image, having to scale them down in memory.
According to Supporting High-Resolution Screens In Views, from the Apple docs:
On devices with high-resolution screens, the imageNamed:,
imageWithContentsOfFile:, and
initWithContentsOfFile: methods
automatically looks for a version of
the requested image with the #2x
modifier in its name. It if finds one,
it loads that image instead. If you do
not provide a high-resolution version
of a given image, the image object
still loads a standard-resolution
image (if one exists) and scales it
during drawing.
When it loads an image, a UIImage object automatically sets the size and
scale properties to appropriate values
based on the suffix of the image file.
For standard resolution images, it
sets the scale property to 1.0 and
sets the size of the image to the
image’s pixel dimensions. For images
with the #2x suffix in the filename,
it sets the scale property to 2.0 and
halves the width and height values to
compensate for the scale factor. These
halved values correlate correctly to
the point-based dimensions you need to
use in the logical coordinate space to
render the image.
This is purely speculation, but if the resolution really is 960 x 640 - that's exactly twice as high a resolution as the current version. It would be trivially simple for the iPhone to check the apps build target and detect a legacy version of the app and simply scale it by 2. You'd never notice the difference.
Engadget's reporting of the keynote included the following transcript from Steve Jobs
...It makes it so your apps run
automatically on this, but it renders
your text and controls in the higher
resolution. Your apps look even
better, but if you do a little bit of
work, then they will look stunning. So
we suggest that you do that
So I infer from that, if you use existing APIs your app will get scaled up. If you take advantage of new iOS4 APIs, you can get all groovy with the new pixels.
It sounds like the display will be ok but I'm concerned about the logic in my game. Will touchesBegan positions return points in the new resolution? The screen bounds will be different, these types of things could potentially be problems for me.
Scaling to a double resolution for display purpose is straight forward, but will this scalling apply to all api's that input/output a screen coordinate? If not things are going to break aren't they?
Fair enough if it's been handled extensively throughout the framework.. I would imagine there are a lot of potential api's this effects.
For people who are coming to this thread looking for a solution to a mobile web interface, check out this post on the Webkit blog: http://webkit.org/blog/55/high-dpi-web-sites/
It seems that Webkit has solved this problem four years ago.
Yes it is true.
According to WWDC it appears that apple has build it some form of automatic conversion so that the resolution for applications will not be completely off. Think up-convert for dvd to HDTV's.
My guess would be that apple knows what most of the standards developers have been using and will already be using these for an immediate conversion. Of course if you are programming an application to take advantage of the new resolution it will look much nicer than whatever the result of apples auto-conversion is.
All of your labels and system buttons will be at 326dpi but your images will still be pixel doubled until you add the hi-res resources. I am currently updating my apps. If you build and run on the iPhone 4 sim then it is presented at 50%, go to Window > Scale > 100% to see the real difference! Labels are smooth, my images look shocking!
Does anyone know what will happen with existing apps when they run on the iPhone 4.0 in terms of the new screen resolution? I am assuming, just like developing for the iPad that there should be no hard coded screen resolutions in your code.
I'd also like advice on the best way of writing robust code to work well on any device. For instance, detecting the screen resolution is not enough - on the iPad the screen is physically bigger so you can display more items on it. On the new iPhone the screen is the same physical size but higher resolution, so the likely thing is that you wont want to display more items, just higher resolution versions of them.
Any help would be useful,
Regards
Dave
EDIT: I have read the other similar posts, I guess what I really would like to know is what is the recommended way to write code for all App Store devices in a robust way so they a) all work b) make best use of the device.
UIKit has be redesigned so that old apps just work unmodified in the iPhone 4. There are then several things you can do, some programmatic and some by just adding higher resolution images to you app bundle.
Firstly, and most simply you can include new double res images that are used by your app with a suffix of #2x in the name. i.e., Event.png as well as Event#2x.png. [UIImage ImageNamed:] will automatically look for the a file with this suffix if it is running at the higher res.
All the other UIKit stuff now uses points instead of pixels. So for both old and new apps full screen is still 320 x 480 points. This pretty much means everything will work including touches, etc. Although they may now return fractions of a point.
The only real gotcha so far seems to be if you use CGBitmapContextCreate as this uses pixels and requires some jiggery - pokery.