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
Related
My query is in two parts:
1) plain and simple, how do we decide the 1x, 2x and 3x image sizes ?
I found this SO question closest
what-should-be-3x-images-of-100x100 size UIimageView or UIButton
but there is no accepted answer in this so I am a little confused if that is really how it is
So if I have a UIImageView of size, say, 17 X 21
So will my 1x be 17X21, 2x be 34X42 and 3x be 51X63 ?
2) If it is so what the sizes would be in case my UIImageView size also varies as per screen size.
So for iPhone 4s 320X480 if my UIImageView was 17X21, for iPhone 6 375X667 it would be 20X29
So how do I decide my image sizes (1x, 2x & 3x) which are fit for all device sizes?
PS:
Really a big thanks in advance, coz this might sound a very basic question but I have really banged my head a lot over it but can't find a concrete satisfactory answer even after searching and reading a lot.
You should think in points, not pixels.
1
If your UIImageView has the size of 17x21 points then you'll need to provide 3 images 17x21 pixels, 34x42 pixels and 51x63 pixels. The OS will pick the correct one depending on the pixel density of the device the app is running on.
2
One way to decide the size a UI element is using a software like Graphic. You can draw a rectangle representing the screen and the UI element only thinking in points. This should make things easier.
It is a bit late but I understand your problem.
First you need to know the difference between point and pixel.
The point is when you in Xcode.The pixel is when you have the actual size of iPhones screen as pixel.
In 4s, 1 px equal 1 point.
In 5, Se, 6 , 1 point 2 px
in 6s, 7s , 1 point 3 pixel.
I am gonna give you 2 different example to understand this.
Example 1
You want you image 100x100 for all iPhones in Xcode.So you should make :
1x size 100x100 pixel in Ps or Sketch.
2x size 200x200 pixel in Ps or Sketch.
3x size 300x300 pixel in Ps or Sketch.
Another example answers you question.Because you have aspect radio.That means you want your image to be scaled.
You have 17x21 point for 4s then it should be 17x21 pixel.
You have 20x29 point for iPhone 6. It should be 40x58 pixel.
You have something for 6s and 7s so it should be 3 X something.
Because you have aspect ratio and scaled.It does not matter as long as you keep 1x for 4s, 2x for 5, 6, SE, 3x for 6s and 7s.
So you have 40x58 instead 34x42 (17x21) x 2 for iPhone 6.
40x50 for better resolution which Apple recommend.When you use aspect ratio, it sometimes be hard to choose the image size.If you used 32x42 instead 40x58 , there is nothing wrong with this but resolution would be less than 40x58.
Hope It works.
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.
The designers on a project I am responsible for developing (one of my first iOS projects) designed the app using a Photoshop canvas set at 1242x2208 pixels, which is the number of pixels that the iPhone 6+ uses. I've scoured the internet and am just getting more and more confused by all the conversions for 1x, 2x, 3x and to further the confusion, apple downsizes to 1080x1920.
Anyways, how do I cut the assets correctly for #1x, #2x, #3x? When I crop the element I want, I save it out at 3x. But what do I divide by to get the 2x and 1x versions?
Here's secondary question and a hypothetical situation: There is a button that is designed to be the full width of the screen in portrait, so the designer made it 1242x100. If I save it out at 3x, then scale it down for 2 and 1x, will this button fit all the different screen sizes all the way down to iPhone 4/4s, which has a smaller pixel dimension and different aspect ratio?
Confused, any help appreciated!
Example:
If you original artwork is 960px by 1704px, just save you image including "#3x"
image#3x.png // (960 x 1704)
Then you have to resize it to 640x1136 and save including "2x"
image#2x.png // (640x1136)
And then you have to resize it to 320x568 and save as 1x
image.png // (320x568)
Indeed the Retina sizes are confusing, but this is what auto resize is used for in Xcode.
But The API which Apple give us, chooses the #3, #2 and 1 sizes by itself. There isn't anything that the developer/designer needs to do but provide all three images. An example is:
ObjC:
+ (NSImage *)imageNamed:(NSString *)name]
Swift:
init?(named name: String) -> NSImage
Would just use the name of the image without the # etc... So, myImageName#3x.png myImageName#2x.png myImageName.png would just be referred to as "myImageName"
The API handles the rest :)
I have had the same problem. What I did was, after cutting all images for iPhone 6+(#3x), I just resized the PSD to iPhone 5's width which is 640px, (height would be 1138 px if you keep aspect ratio) and cut #2x images. For the 1x images, again resized to 320px width.
Just, iPhone 6+, iPhone 6 and iPhone 5 have almost same aspect ratio.
Good Luck!