Images for Retina Screen (@2X)

Images for retina screen (@2x)

Example: If you have a 512 x 512 (1x) image and you want it to support (2x and 3x) you have to include those 2 files like this:

yourImage.png       // (512x512 at 1x)
yourImage@2x.png    // (1024x1024 at 2x)
yourImage@3x.png    // (1536x1536 at 3x)

Right @2x for retina 4 hd

Designers usually use the pixel size of the Rendered Pixels. That number is twice the size you use to code because of the Retina.

So when they give you for example some icons that are 100px by 100px and you need to shrink them by half, that is because they design for retina screens. Retina is in theory the same size as you code but it has more pixels so the image looks sharper.

@2x is the old way images were identified to be used either in standard resolution screen or retina screen. Now you might want to check AssetCatalog as it lets you drag and drop different sized images without renaming issues.

@2x retina HD is just totally wrong. as the @2x refers to retina. The @3x is for iPhone 6plus.

You might want to check
Apple's guide for app icon sizes to understand about the different screen sizes.

What is the point of the @2x for Retina display apps?

There are several good reasons for sizing your images correctly, but the main one would have to be image clarity: When resizing images, you often end up w/ artifacts that make a picture look muddy or pixelated. By creating the images at the correct size, you'll know exactly what the end user will see on his or her screen.

Another reason would simply be to cut down on the overall file size of your binary: a 16x16 icon takes up orders of magnitude fewer bytes than a 512x512 image.

And if you need a third reason: Convenience methods such as [UIImage imageWithName:@"xxxx"] produce images of actual size and usually do not need additional frame/bounds code to go along with them. If you know the size, you can save yourself a lot of headache.

How to show in-memory NSImage as Retina (@2x)?

It should be sufficient to simply do [image setSize:NSMakeSize(24, 24)] on an image that has more pixels than that. -setSize: sets its logical size in points. The representations in the image determines how many pixels it has. If the pixel dimensions are greater than the point dimensions, then there's more detail. This detail can be used if the drawing destination is also high-resolution.

If that doesn't work, you can construct the image "manually" by initializing it at the desired size, creating a bitmap image representation with the available detail, set that rep's size and pixel dimensions (separately), and adding that representation to the image.

iPhone: Do I have to have images for both retina and non-retina for all image?

[EDIT1 - SPECIAL CASE]

There is a SPECIAL case however to this problem. Since Apple' current 2x algorithm is essentially a pixel doubling (in each direction), if you images are made of of only vertical and horizontal lines, then I would go about providing those images as the 1x and let the API auto upscale those, an example would be an image for a button that looks like this

As this will have zero problems upscaling and still looking very crisp!!! (Tested on both iPhones, as well as both iPads)

[ORIGINAL]
If you are simply doing it for display, then one way would be to simply provide the image as it should be for the retina only, and allow the UIImageView to scale down the image automatically for the non-retina displays. It WILL do this and will NOT be rejected by apple.

For the retina display, the UIImageView will naturally take up the space of 2x the pixels in each direction, thus when the image is read in for display on a retina display, the API will recognize that no scaling needs to occur!!!

Be careful though!!! Downscaling images lets say for buttons can have effects that make your images or buttons come out looking unclean / pixelated. This is why it is "recommended" to provide both, is with lets say a vector based image, you would be able to generate the highest quality image for a given resolution. Kinda depends on how you want to use the images.

As a side note. I would recommend that if you do choose the resizing option, that you try to recognize the device' screen resolution up front and resize the images (if necessary in my case for the SMALLER resolutions) only once at initialization into the button or UIImageView etc... so that you won't suffer the slower performance each time it needs to be rendered to screen.

iPad retina images - Why use two different image sizes?

Resizing takes time and memory. And resizing while retaining sharpness is hard to do. Which algorithm do you use? Bicubic or bilinear? "But this icon looks better when resized with other-algorithm-here!" How is iOS meant to know that the 1px border you drew is still meant to be a 1px border at half the resolution?

---

Related Topics