This question already has answers here:
Not including non-retina display images in an iPhone project
(3 answers)
Closed 9 years ago.
I have an app that runs on iPhone and iPad, most of the intended devices for this app will be retina devices except for the iPad mini. I have a lot of images to include in this app.
My question is, if I decide to go with the #2x images only, will iOS downgrade them to non retina devices? so I ship only retina images? If that is correct is it a bad idea to implement?
iOS will not downgrade those images. But if you are setting the frames of your imageviews carefully, it will not create any problem.
If your image view have contentMode = scale your images will be scaled to display correctly on non-retina
But there is some problems:
1) if you display scaled retina image on non-retina device you will have blurred edges on image. So if you want to use this images for UI - it will be bad idea.
2) Sometime xCode storyboards does not scale correctly image if you have only #2x image (for example in uibuttons)
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.
Related
I'm a bit confused here. If, say, I want to set an image as background (full screen) for my ios app (iphone), what are the sizes for the image I have to make? I googled and found no clear answer yet.
Using image assets gives no explanation either. I tried creating new image set, it just shows 3 slots for 1x, 2x, and 3x. How the xcode differentiate between what image to use for iphone 5 and iphone 6 (different ratio)?
EDIT
I seem to be unclear about my question. If the image for iphone 5 and 6 is the same, doesn't the aspect ratio differ? It will be stretched on one device or vice versa on the other and I don't want that. Back before the iphone 6, I just create image .png, #2x.png, and -568h#2x.png with the size 320x480, 640x960, and 640×1136. So my question is, for iphone 6 and 6+, what is the naming and size for my images?
If, say, I want to set an image as background (full screen) for my ios app (iphone), what are the sizes for the image I have to make?
You can use [UIScreen mainScreen].bounds's width & height to setup your view frame.
it just shows 3 slots for 1x, 2x, and 3x
They're not used for handling ratio of displaying, just for display solution (retina or not). You can just use xxx.png in your code, and it'll choose to use xxx#2x.png or xxx#3x.png appropriately.
How the xcode differentiate between what image to use for iphone 5 and iphone 6 (different ratio)?
UIImageView has an instance method called -setContentMode:, you can use UIViewContentModeScaleAspectFill mode for displaying in different devices w/ different ratio, i.e., some parts will be cut off.
This link should give you an overview of the differences between the 1x, 2x and the 3x image assets which we get once we create a new image asset.
http://9to5mac.com/2014/08/29/support-for-3x-image-assets-found-in-latest-ios-8-beta-ahead-of-larger-display-iphone-6/
Also when you create a new image asset, you can select image for specific devices such as (iPhone and iPad), if you are only developing for certain devices.
Select the devices as "Device Specific" from the Image Set Shown on the right side of the image.
As for you question, iPhone 5 and iPhone 6, xcode will take the same image assets i.e. 2x, for iPhone 6 Plus it takes the 3x image.
App Icon and Launch Image
Now for the App icon and the Launch image, this following link will guide you through.
http://www.iphonelife.com/blog/31369/unleash-your-inner-app-developer-managing-images-xcode-5-asset-catalogs
https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/IconMatrix.html
for the launch image there are different options available, such as you can individually set images for the landscape and portrait images for different devices.
I'm targeting iOS8 to release an application. So it'll be available on 4S, 5's, 6, 6+, and iPad 2+.
I have a ViewController where, I present a UIImageView that is the entire size of my UIViewController's View.
My question is... what sizes do I need the image in. Am I going to need it in a special size for each device? Or does the 4s/5/6 all use the same ratios for example, while the 6+ has its own unique ratio? Or do I just use 1 image size and let it auto scale it (or will that stretch/skew the image)?
Also, what's the minimal size the image should be? If it's smaller than the native size of the iPhone 6+ for example, won't the quality of the image deteriorate?
In iOS8, you can use different size classes for different screens
use this post to begin.
Also refer this for more info about using different graphics for varying resolution.
The image in Imageview in 4s/5/6 devices render at #2x while that in 6+ it renders at #3x.So take an image and name it as Demo#2x.png and other image for 6+ having higher resolution , name it as Demo#3x.png.So When the image is placed in imageview , It will automatically takes Demo#2x.png for 4s/5/6 and Demo#3x.png for 6+.
you need special size for each device by using image.xcassets.And this will help you alot -
https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/IconMatrix.html
In my app I am using images of size 155*155pts so I am supplying it with an image of 310*310px resolution. I know that I can use image.png image#2x.png and image#3x.png and then [UIImage imageNamed: image] to select the image appropriate for the resolution. My question is do I really need to include a lower resolution version of size 155*155px, won't the UIImageView it's displayed in just scale it appropriately? A similar question for the iphone6+, if I don't include the #3x version will it just use the #2x and display it as clearly as a standard retina screen would?
Even though there are plenty of answers at SO discussing this topic
(Google them) e.g. How to handle image scale on all the available iPhone resolutions?
Its just a recommendation to to use scaled up images with #2x and #3x in your app. You don't have to create them. From my experience in making apps, in almost all of them I have never used multiple images. I create one UIImage and use it for all the phone sizes. I then either use auto layout or manually adjust the width height of UIImages myself.
There is a reason I do that is lets say one of your sample1.png image is 1MB then you will need to create 3 of them.
sample1.png
sample1#2x.png
sample1#3x.png
You just doubled or tripled your binary size which is bad for downloads. There always be users running non-retina devices and it would be shame to not support them. Can you only make retina enabled apps, of course you can and Apple will approve those as they will be testing your apps on the latest devices but the best approach is to support all devices.
It depends, if you only support non-retina devices you don´t have to add the normal image size anymore.
The scaling for the 6+ works with the #2x images but i guess you will see a quality difference
When i started working on my game app i didn't know i should create retina/non-retina #2x, #3x, #1x images. I just created the images with no #1x, #2x, #3x at the end of png file. So since my images are currently called image.png, it's considered a non-retina image i know now. Example is I made an image 25x35 in png. In Storyboards i decided to resize the image and i made it 35x40 because it looks better for iPhone5 than 25x35. My issue is even for 1x i'd have to re-create 40 images from scratch for #3x first and then use Prepo app to automatically downsize to #2x #1x scales. I tested my non-retina images on iPhone 4s/5/5s/6/6+ simulators and iPad 2, Air, Retina simulators and they all look the same and great, and app works well. No blurs or issues. Can I just use my image.png for Retina device as well? Would Apple allow this?
If this is an in-app image, and not the application icon, then yes, you can just use Any resolution image. You can use UIImageView and set contentMode on it to perform AspectFit, ensuring the image will be the same size on every screen type, and also will not get stretched.
myImageView.contentMode = UIViewContentModeScaleAspectFit;
Example: The simplest way to resize an UIImage?
This will preserve the aspect ratio of the image when fitting it to the image view container.
I would provide the image itself with the highest resolution required (#3x), but without #3x in the name, and let UIImageView scale it down to the required size for the other two resolutions.
There is a performance hit in doing this. If it doesn't degrade your scroll performance, go for it.
So basically: start with a high res image and scale down. Do not scale up a low res image, because it won't look crisp. And keep the same aspect ratio so it doesn't stretch.
You will not get rejected for doing this to in-app images.
If all of your assets have the #3x postfix then the App Store recognizes your app as being optimized for the iPhone 6 (together with correctly sized startup images or .xib / .storyboard). Using bigger images for non-retina or normal retina screen causes your RAM usage to increase and slightly taxes your GPU more but for simple apps this isn't a real concern.
I'm releasing a new update for one of my apps and I was disappointed to see that it just barely surpasses 20MB estimated size (20MB is the point where it can no longer be downloaded over cell data).
My app contains a lot of images, so I could greatly reduce the size if I didn't have all those non-retina images. I know that there are some non-retina devices that will be running my app. So here are my questions:
How will a non-retina device react if I have an image with the #2x suffix but no non-retina image without it.
If I use a retina sized image without the #2x suffix and scale it down to the size I want to display it at programmatically and/or
through interface builder, will it still maintain full quality on
retina devices? Will the quality be worse on a non-retina device
than using an image I downscaled from the original using GIMP
instead?
How will a non-retina device react if I have an image with the #2x suffix but no non-retina i
image without it.
I use that approach on a couple of apps of mine and it works flawlessly. I am not able to detect any performance or visual issues on non-retina display devices (concretely, iPad 1/2 and mini).
I am not sure what can happen on older iOS version, since I only support iOS5+ on those apps.
If I use a retina sized image without the #2x suffix and scale it down to the size I want to display it at programmatically and/or through interface builder, will it still maintain full quality on retina devices? Will the quality be worse on a non-retina device than using an image I downscaled from the original using GIMP instead?
This comes down to how you set interpolation options while doing the scaling. See this other question for more details on how interpolation quality affects scaling down an image. In GIMP or Photoshop you also have control on the interpolation to be used for scaling, btw.
But in the end I don't think you need to go this way.
Most importantly, that bandwidth limit has been raised to 50MB.
OK.
If you only provide one image then you have one of two possibilities.
The image is a non-retina image. This will look fine on the non-retina. It will look identical on a retina device. But will look low quality next to a retina image.
The image is a retina image. On the retina device it will still load as a retina image. It will look fine. However, on the non-retina device it will have to scale down the image. This takes extra cycles of the CPU so could affect performance and it may not look how you want. It may shrink the image using a different method than you want and so may make the image look odd.
This is the same with or without a suffix.
The best solution is to create retina images and then use your editor of choice to create the standard versions. Nothing will stop you only providing one image but it may lead to a look and performance that you don't want.
On a side note. The size for downloading over cellular data was increased to 50MB.
Try these things using the simulator and find out for yourself.
I think the answer is that UIImage will ignore the #2x choice if you're relying on [UIImage imageNamed:#"without2xSuffix.png"] and not find anything, but I haven't tried it. Deliberately requesting the #2x file will work, but whether the image will be scaled, tiled, stretched or centered (or something else) is up to the place where it's used.
Note that the documentation says that unless you use the name without the #2x suffix and let iOS find the 2x version for you, it will set the scale of the image to 1.0 rather than 2.0, which complicates drawing. You'd have to load the image using imageWithData:scale: to fix this.