iOS app non-retina and retina images concept
Solution 1
The main purpose of using non-retina images is the performance enhancement and image quality on older devices due to the required down-scale operations.
So for older devices performance you should use non-retina images.
Solution 2
In ios Concept of image its also clear if you read this doc Custom Icon and Image Creation Guidelines
For Example if you want to create image
100 x 100 px so it must with 163 Resolution ppi submit.png NON-retina device
200 x 200 px so it must with 326 Resolution ppi [email protected] Retina device
FOR iPad:-
400 x 300 px so it must with 264 Resolution ppi submit@2x~ipad.png Retina iPad device
200 x 150 px so it must with 132 Resolution ppi submit~ipad.png Non-retina iPad device
Take a Look this Image:-
Image source from This
We inculcated @2x when we want to specify different versions of an image for iPad and iPhone. The inclusion of the @2x modifier for the high-resolution image is new and lets the system know that the image is the high-resolution variant of the standard image.
That is the key change required for the OS to size the window to fill the iPhone 5 display.has posted a writeup on this and other size-related tweaks you might need to make.
Hope this is useful info for image resolution and it's size.
Solution 3
Yes, you can use just the retina images for both retina and non-retina devices. If you use them in imageviews
, buttons, etc, make them scaletofill/aspectfill/aspectfit
or whatever you want.
But the problem with this is that the unnecessary larger sized images will be loaded in memory, and the resizing of images is going to need some processing as well.
Using separate images does increase the App Bundle size, but reduces the actual ram usage by the application when running.
Solution 4
The reason as to why we have to provide 2 images is because there are still people running the early devices that do not support retina display. They are lacking in the pixel amount as people running the retina, so we provide the normal amount. The thing with the iphone 5 requiring the @2x in the image file is because the @2x filename is the standard convention dealing with the retina display images.
That is why when you asked why don't we just put the 200x200 image in the 100x100 button. Well, if you're running a retina device, the image in that button will look like what you drew; however, if you're running something like a 3gs, that has no retina, then your image in that button will most likely come out to be pretty blocky, or blurry as the pixels are not matching the device's ratio.
Hope that helps clear anything up!
Related videos on Youtube
Irfan DANISH
Apart from my current role of Assistant Project Manager, I try my maximum to keep in touch with latest technology trends and have been always engaged with hands on development as Programming is my first love :) Whatever crosses your mind, I can code or have already coded it and implemented across cloud, web & mobile space. Built over strong IT academics and then highly prolific research & analysis skills, it’s my 9+ years’ hands on and heads in experience with multiple platforms and technologies that makes me code disruptive digital apps & systems across heterogeneous IT environments including cloud, web, mobile & Big data. My biggest pride is my rapid adaptability for modern technology and capacity to always leverage abstract ideas and architectural skills into innovative solutions. In my coding arsenal, I bag technologies (1, 2, 3, …..) and with keying them I have developed 50+ websites, enterprise web apps, e-commerce solutions, iOS apps and system softwares, over last 9 years. Moving over my career ladder starting from PHP developer, today I am Assistant Project Manager and technical head of development department whereby managing complete life-cycle of enterprise level projects across various business verticals including Health & care, Banking & Finance, Retail & Shopping, Learning & Education and Lifestyle & Entertainment. Feel free to contact me at Skype: irfan.danish Here is my stackoverflow profile: http://stackoverflow.com/users/story/1058406 Zend Certified Engineer
Updated on June 04, 2022Comments
-
Irfan DANISH almost 2 years
I am asking this question just for information and to clear my concepts about images in
iOS
application (Retina
andnon-retina
devices).What I currently do is
When I develop an
iPhone
application and I have to show an image lets say onUIButton
usingInterface builder
I take two images lets suppose submit.png button image of following sizes- 100x100 px (submit.png)
- 200x200 px ([email protected]) for retina display
And in
Interface builder
I will set the size ofUIButton
100x100 px and its just works perfectly.Question:
Why don't we place only single image lets say submit.png
- 200x200 px (submit.png)
And set
UIButton
size 100x100 px ininterface builder
and same image will be used in bothretina
andnon-retina
devices.What is the actual reason of using two images rather than one single image of retina size?
Another similar question,
iPhone 5
is only available inretina
display but we have to place itsDefault
images as[email protected]
. Why at 2x? -
Bhavin_m almost 11 yearsIs there any solution for we can use only one image for older and newer version. I mean can we do it with any type of code or something ??
-
Nishant Tyagi almost 11 yearsI think NO. because we need non-retina images for older devices. And if we use retina images then performance degrades.
-
Bhavin_m almost 11 yearsIt means we must have two type of image one is non-retina, another is retina if app need to support in older device.
-
Irfan DANISH almost 11 yearsCan you please tell me from where you got information about resolutions? like 163 and 326 resolutions for iPhone. As my designer design at 72 DPI in retina size and then make image smaller with same DPI and convert images to non-retina size.
-
Nitin Gohel almost 11 yearsapple.com/iphone/specs.html take a look this there is ratine apple iphone5 product 1136-by-640-pixel resolution at 326 ppi so non ratine conraint it half 163
-
Irfan DANISH almost 11 yearswhat does that mean? we should design app at 320x480 px size with 326DPI for retina and 320x480 px size with 163 DPI for normal device? or we should design 320x480 px in size in 72DPI for normal and 640x960 px in size in 72 DPI for retina?
-
Nitin Gohel almost 11 yearsi am tanlking about ** PPI** we should design app at 320x480 px size with 326 ppi for retina and 320x480 px size with 163 PPI do you knw what is Diffrent in DPI and PPI...? check this:-imagescience.com.au/kb/questions/31/… ask about it your designer for mor info about DPI and PPI
-
SSS over 9 yearsWhats the difference between those 2 images. Just resolutions difference. But with todays new devices. Do we actually need a non-scaled image as well?