I am developing an iOS application for iPad. Currently I am using images of resolution 2048×1536 px (iPad3 resolution). If I run this app on iPad2 or iPad1 will it get fitted to its resolution (1024×768 px)? Or should I use a 1024×768 images and specify image#2x for iPad3?
Since I only have iPad3 , cannot know how the images will be seen in the lower resolution devices. But it should work perfectly on them too.
Any help greatly appreciated. Please cite your sources.
You could try this in the simulator if you don't have a non-retina device.
It's certainly possible and will usually look fine (at least for photos, text and icons may look worse when scaled down), but you are wasting quite a lot of memory which is pretty scarce on an iPad 1 (it only has 256 MB), so you should usually also include non-retina images.
Automatically scaling down images typically results in visual artifacts, which is why the SDK includes an easy way to include different versions of any image, instead of just a single big one.
As far as I know, all iOS devices (within the same family) have resolutions that are multiples of each other so automatic scaling artifacts are somewhat mitigated, but it is still best to include the correct resolution.
Related
Im building multiple apps in React-native and I know that there its possible to put in multiple images that have a different density. React-native selects them automatically in the tag. I know for native Android and iOS they do the same.
I get it if you want to have some changes for lower density devices. Maybe a other design of a icon or something like that. But what if you have the 3x and then resize it to a 2x and 1x. Then you have the same image but with a smaller file.
Now my question is does it really matter to add the 2x and 1x if I already have the 3x? I don't see any performance of quality issues with that.
I guess (but not sure) it can give a RAM issues with large amount of images shows simultaneously.
Plus a famous android developer says that Android has an issue with downscale big images.
Cocoa uses a drawing system (user coordinate space) measured in "points" which are resolution independent...sounds great
While we need to be concerned with our app running in many resolutions, Cocoa is going to take care of that for us in (1) above...sounds too good to be true!
It does scale our controls as resolution changes...this is good.
BUT the screen size increases as my resolution increases...this is not good, I though we had a drawing canvas that was independent of the resolution!
What if the controls shrink to silly small levels as the resolution increases - should I be concerned about this?
To summarize: is their a "standard" resolution I should design for and then all automatic scaling by Apple will automatically look fine?
[Confused while reading the Apple Progammer Guide on the topic of Drawing]
You do not need to be concerned about this. The user is only allowed to select resolutions which make sense given the physical size of the display, so the standard controls will always be "large enough". You just need to test your app on Retina and non-Retina displays (and ideally both at the same time, with an external 1x monitor plugged on a 2x machine ; move your windows between the two screens and check that your images update accordingly).
I'm currently optimizing my iOS app for the new iPad. Unfortunately by adding launch images for the iPad retina display the size of my ipa grows from 1.2MB to 5.5MB, mainly because of the two PNG images in 1536 x 2008 (portrait) and 2048 x 1496 (landscape). The size of these images are respectivly 1.9MB and 1.7MB.
The portrait can be seen here: http://uploads.demaweb.dk/iPadPortrait.png.
As you may notice, the background is a fixed pattern but sadly it seems that this is not very compressible. I've further tried to compress the images using ImageOptim, but it does not make any difference after Xcode has compressed the images during the archive. Searching the web I've noticed, that some people are dissuading to turn off PNG compressing in Xcode.
Are there anything I can do? It is not a solution to change the pattern in the image to a solid color, as it should look like the background in my iOS view. But it seems odd, that supporting the new iPad increase the size by ~4MB.
I was able to get it down to 633KB with pngquant (64 colors with slight dithering, which is barely noticeable on regular screen, and should be absolutely invisible at Retina resolution) and ImageOptim.
Yes, you will need to disable Xcode's conversion to avoid Xcode inflating files by converting them to ARGB.
NB: the article quoted in the accepted answer provides no benchmarks at all for the claimed speed difference.
It also contains correction that it is possible to optimize images with ImageOptim for iOS apps.
I'm using a great tool called ImageOptim
It incorporates a number of tools inside which crush your png files significantly (in my case it was between 25% to 50%).
One thing to remember is to disable Xcode's PNG optimization (as explained on the website)
EDIT:
Simply drag the images to the imageOptim window and the optimization will start automatically
Ive struggled with this too, unfortunately not much can be done.
In an effort to dramatically increase drawing performance of iOS apps,
Xcode re-compresses PNG files as it builds. It premultiplies the alpha
channel and byte swaps the red, green and blue channels to be
sequenced blue, green and red. The result is optimised for iOS’s
purpose, but as a side effect, ImageOptim’s work gets undone…
Source
I am developing a cocos2d game. I need to make it universal. Problem is that I want to use minimun amount of images to keep the universal binary as small as possible. Is there any possibility that I can use same images I am using for iphone, retina and iPad somehow? If yes, how can I do that? What image size and quality should it be? Any suggestion?
Thanks and Best regards
As for suggestions: provide HD resolution images for Retina devices and iPad, provide SD resolution images for non-Retina devices. Don't think about an all-in-one solution - there isn't one that's acceptable.
Don't upscale SD images to HD resolution on Retina devices or iPad. It won't look any better.
Don't downscale HD images for non-Retina devices. Your textures will still use 4x the memory on devices that have half or even a quarter of the memory available. In addition, downscaling images is bad for performance because it has to be done by the CPU on older devices. While you could downscale the image and save the downscaled texture, it adds a lot more complexity to your code and will increase the loading time.
There's not a single right answer to this question. One way to do it is to create images that are larger than you need and then scale them down. If the images don't have a lot of fine detail, that should work pretty well. As an example, this is the reason that you submit a 512x512 pixel image of your app icon along with your app to the App Store. Apple never displays the image at that size, but uses it to create a variety of smaller sizes for display in the App Store.
Another approach is to use vector images, which you can draw perfectly at any size that you need. Unfortunately, the only vector format that I can think of that's supported in iOS is PDF.
I'm working on a simple iOS game that's always drawing 5 to 10 layers of 32bit png images which requires enough memory to crash on the ipod touch 4g when retina enabled. On other devices it works just fine. I'm not even getting memory warnings. So I was trying with lower quality images, like RGB5_A1 format, but it looks really bad because I need alpha transparency and lots of gradients.
Since all the images are exports from Illustrator I was thinking that maybe i could just export a vector image and draw in on iOS. From what i was researching hardly anyone tried this and the only option I've come across was to implement a SVG parser for Quartz.
Did I miss anything?
Also I'm worried about performance, but I couldn't find any benchmarks.
Without knowing specifics of your game, I'm going to make a few assumptions based on normal use...
You are not going to want to use straight vector graphics for this. Stick with your raster graphics.
If you are talking about 32 bit color space for your PNG images, then you need to scale back. iOS uses 24 bit images and that includes 8 bits each for red, green, blue, and alpha. As it stands, you have an extra byte for every pixel shown.
If you are using Adobe products, import the Illustrator file into Photoshop and use the "Save for Web..." option. Choose PNG-24 and you'll be all set.