What is the quality of the retina-free images that Xcode creates from the @ 2x version?
Since I was told that Xcode will automatically scale the image to non-retina when I only have a @ 2x form in my project, there seems to be no need to create another image. This made me build my apps without non-retina related images.
But I have been discussing this issue lately, and I was told that the image quality (on non-retina devices) would not be as good unless I separately save the non-retina image.
It's true?
source to share
Yes, it's true the quality won't be as good, but it's also nice to just use @ 2x for a couple of reasons.
-
Simple retinal image size may not be the best way to preserve image semantics. For example, an icon might look great at the correct size in @ 2x format, but when downsized, it is difficult to distinguish it from an icon. Such an image at your normal size may be a slightly different icon, that is, lower in resolution, but its meaning is easier to determine.
-
The image is used in memory when used. A @ 2x image is 4x the resolution of a normal image, and as such takes about x4 memory. Devices like the iPad 1 and 3GS (which have retina displays) have limited storage and not much. This way, retinal images will take up a lot more available memory and your app / device won't perform well.
-
Similar to # 1, but resizing for @ 2x images to fit correctly on a 1x screen is very naive and doesn't sample to make the image look good. For example, when compressed, the image can be very smooth and rough. If you have a regular image file that comes from the @ 2x version, you can follow your own sampling and resolution reduction techniques to make sure it looks the way you want it.
source to share
For our iOS app, we have a (overly) obsessive designer who spent a lot of time developing assets on his own for retina and non-retina solutions, and I asked him why he spent so much time on each and not essentially down / up "scaling. It had great points in the lines , if you want your assets to look good on both the retina and the retina, you need a person to make intelligent decisions about your paths / outlines of your assets. .. p>
Take for example a 57x57 button or an icon with a 2px outer border, 4px white inner border, and a drop shadow. If you just scale to 114x114, the "path" or line of those borders is scaled to 4px and 8px, which can cause two problems.
- at the new size 4px and 8px might be too thick, you need to look at the asset and decide that maybe 3px and 5px makes sense
- smoothing corners can no longer look right, they can be too thick or too thin.
He showed me what an asset looks like if you just scale it up / down against it, actually wasting time on disposal, and that was a pretty dramatic difference. Many of his points are well summarized in this article.
source to share