What dimensions should images be for an App for iPad?
This is for a children's picture book; each page will be a single image, and I'll be putting the pages together in Adobe Flash and then converting to iPad format.
So I'm looking for the dimensions that I should make each full-page image.
The dimensions for iPad and the two orientations are as follows:
Portrait:
768 * 1024 pixels
Landscape:
1024 * 768 pixels
Hope this helps!
Related
I'm having a hard time putting all the information on image sizes for #1x, #2x, and #3x together. I've been using the scene editor in XCode with the scene size being 1334x750 (pixel dimensions of the screen of the iPhone 6). So when I size an image for a sprite in that scene, is that the size I should use for the #2x?
From what I've read in the documentation CGSize uses points, not pixels, so if I have an image that is CGSize(width: 50, height: 50), is this independent of my scene size in the scene editor?
Bottom line question: How does the CGSize dimensions translate to how I export my images for #1x, #2x, and #3x in pixels and what should the PPI be when I export?
Xcode can handle vector images, so you can forget about #2X and #3X images if you are able to export your images as PDF e.g. in Sketches export panel one of the options for export format is PDF, so create your artwork #1X and export as PDF, then in Xcode when you add the image to Assets.xcassets, you can set the images Scales attribute to Single Scale. Xcode will generate the required #2X and #3X images from your vector PDF at build time.
The concept is simple. The size in Storyboard or Interface Builder should be the size of you asset in #1x format.
The retina display ( or the iPhone 6+ #3x size ) does not mean than you have much space than before, it means that you can draw 2 ( or 3 ) pixels where you draw 1 before.
So for a 50x50 px Image View, cou should have 3 assets :
- Image#1x.png ( 50x50 px)
- Image#2x.png ( 100x100 px)
- Image#3x.png ( 150x150 px)
Suppose you have created an image in your assets library consisting of 3 sets of same image, #1x.png having size 50x50 pixels, #2x.png of size 100x100 pixels and #3x.png size 150x150 pixels.
you don't needs to worry about which one to use in your storyboard(because storyboard automatically using #1x.png), and which one to use for the targeted device like as iPhone6, or iphone7, or iPad(because by default programing all hardware finds out their pixels relative required image among those #1x.png, #2x.png and #3x.png)
for further instructions you needs to study Auto layout Programing Guide
you can also view their apple's tutorial videos regarding Auto layout.
mysteries of auto layout part1
mysteries of auto layout part2
#1x and #2x used to relate to the retina graphics change when iPhone 4 came out.
iPhone 3GS was 320x480, iPhone 4 was 640x960. This meant that the points per inch were literally the same, but the ppi was doubled, hence the #2x. When the iPhone 5 came out, the only thing that changed was the height, so the ppi was the same for the width, no problems here.
Then we hit the 6 and 6+. At this point, apple said screw it, try to keep ppi that correlate to previous iPhones without having keep the previous iphones usable area, or provide bigger screen pixels for bigger devices. Now #2x has lost its original meaning
But, to really throw us off, they made the iPhone SE, which went back to the ppi screen size of the iPhone 5, so #2x makes sense again.
Basically, when thinking of the #2x graphics, think about the 1st iPhone resolution size.
Now, you have a choice to make. You can give your apps more/less usable area, you can black box the extra usable area, or you can scale and take some kind of quality loss due to game pixels not being 1:1 with the screen pixels anymore.
I need a few icons for my navigation and tab bars on Xcode 6, so I downloaded a few icons from:
https://icons8.com/web-app/new-icons/all
Yet once I download them and open the file, every size seems pixelated and not as clear cut and sharp as it looks on the actual website.
Why is that? What would be a method to download it just as how it looks and resize it to use it for iOS mobile application? Any insight or help would be appreciated.
Try placing them in the 2x or 3x size in your .xcassets
The 1x size is equal to the amount points on your screen (not pixels). The iPhone 3GS has 320 points in the width so the amount pixels are also 320. The iPhone 4 which has a Retina display also has 320 points, but the actual pixels are 640. So retina needs 2x and the image file needs to be 2 times larger than you expect them in points on your screen. Same for 3x.
I usually work with vectors, you can use them in Xcode as .pdf file, you can scale them as you like without getting blurried images.
I have this image called image.png - I have created it in the 3 differen't sizes.
image#3x.png - 1001x132px
image#2x.png - 668x88px
image.png - 334x44px
What I dont understand is how come the #2x is 668px in width, when the iPhone 5&5S are only 640px wide?
I have designed the #3x using iPhone 6+ screen size.
Could someone please explain?
Let me explain you the difference between the iPhone screens, so you will understand the need of these #?x suffixes.
The first iPhone, and the two after it (3G and 3GS) had the standard display with dimensions w:320, h:480. With the introducing of iPhone 4, Apple also introduced the so called Retina display, which "packs" 4 physical pixels in 1 logical pixel (also called "point"), i.e.:
Now, even though the pixel dimensions of the iPhone 4 are w:640, h:960 (and iPhone 5/5C/5S w:640, h:1136), you still have screen size of w:320, h:480 points (respectively w:320, h:568 for 5/5C/5S). But because the coordinate system of the display uses points instead of pixels, the dimensions and position in points of all UI elements remains the same for every device.
What about the prefixes?
Now, the ratio between point and pixels is called "scale". UIScreen, UIView, UIImage, and CALayer classes have a property called scale, and when you load image with prefix #2x, the scale will be 2.0 and the display will fit 2x2 bitmap pixels from the image in one point. iPhone 6+ uses the #3x suffix because of the Retina HD display, which has scaling factor 3 and the image is afterwards downscaled from rendered 2208 × 1242 pixels to 1920 × 1080 pixels (points on the screen).
The downscaling ratio is 1920 / 2208 = 1080 / 1242 = 20 / 23. That
means every 23 pixels from the original render have to be mapped to 20
physical pixels. In other words the image is scaled down to
approximately 87% of its original size.
(source).
Required image sizes
For example if you want to have an image of green circle in a black square with dimensions w:100, h:100, you will need two more images: one with dimensions w:200, h:200 and one with w:300, h:300, as the system will scale them according to the suffix.
Where to go next
Here is some stuff to read (if I didn't explain it right or easy to understand). My advice: check the link above and the official Apple documentation for further knowledge:
Apple documentation: Supporting high-res devices
Apple documentation: Points vs. Pixels
#2x is using for retina display, like iphone 4, 4s, 5, 5s, 6, ipads ....
The image has 668px in width, I think it use for a view that could have extra area for view, like horizontal scroll view, tutorial pages, or for ipad ... ... or something like that ..
And yes, you're right about the width of retina display, it is just 640px.
Hope this may help.
I designed an image on Adobe Illustrator that has H: 100 px and W: 2000 px. When the device is in landscape left, this asset should run across the bottom the of screen and completely cover it from end to end.
As far as I know, the iPhone 6+ is 1080 x 1920. An asset with the width of two thousand should comfortably fit on the bottom, so I must be missing something big here.
I used Prepo to covert my 3x (the one with width of 2000), into 2x and 1x.
The figures are as follows:
3x: 2001 x 102
2x: 1334 x 68
1x: 667 x 34
This set:
Fits: 5s, 5, 4s
Too Short: iPad Retina, iPad Air, iPad 2, 6+, 6
I'm assuming I'm missing some critical aspect of image xcassets because I'm sort of at a loss.
Thank you, and I'm happy to update this with any other details needed.
First thing...
The iPad Air resolution is 2048x1536 and so your image of 2001 pixel width will not fit. Also, iPhone 6+ resolution is 1242x2208 so again that won't fit.
Second...
You shouldn't only be relying on the image size to fit to the screen. You haven't shown what the image is but I imagine that something of that size will be some sort of gradients or something that spreads across the bottom of the screen.
In that case you should be using a sliced image that will resize to be any size regardless of the device resolution.
Third...
If you do rely on the image size then what guarantee do you have that in the future there will not be a device with an even bigger resolution that will break the image again?
Hint... The near future is guaranteed to have a device with a bigger resolution that will break your display.
Summary
Use a resizable image that will stretch to the required size no matter what it is.
Use something like AutoLayout so that the frame of the image view is set by the screen size rather than being set by the image size.
I need to implement some photo uploading function, but I'm a little bit confused because of the pixel/size dimension of the images. I need to display a square cropped image which size in IB is 320 x 320.
I've made a little research, but couldn't find an exact answer. I've checked Instagram, and it uses 640 x 640 pixel images everywhere. How is that possible? The iPhone 6 Plus's screen resolution is bigger then the Full Hd, the width of the screen is 1136 px while an Instagram image is 640 px wide (and doesn't pixelated) . I don't think that they save images for every devices separately.
So UIImageView can display non-retina images on retina screens like this? Or what's the reason why the 640 px is enough?
UIImageView can scale the image you pass to it. So if you were to pass a 640x640 pixel image into a UIImageView that was displayed larger on screen, it would be scaled to fit appropriately. It would scale up and you would lose quality when displayed that way.
As for the IB size being 320x320 points, that doesn't directly translate to pixels. Older devices worked that way, but newer (retina) devices scaled at 2x (including the iPhone 6). So a 320x320 pt UIImageView in IB would actually render at 640x640 pixels. The 6 Plus renders at 3x, so 960x960 pixels.
I'm not sure how you concluded that Instagram was using 640x640 on all devices, but if that is the case, the 6 Plus is scaling images to 960x960 pixels and losing quality. It's possible that the loss isn't noticeable in most cases, but I would guess they request larger images for the larger screen.
http://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions