This is a screen that has the same physical size of the left one but the resolution is doubled. On the right we have the same picture presented on a retina display. We can see that there's a lot of spacing around each of the dots that compromises the image quality. On the left we have an image presented of the non-retina one.
Macbook ios paintcode mac#
non-retina photos" and is the magnified photo of two Mac displays.
The image above was taken from the article "Real retina vs. While the original has a 165 ppi, iPhone 4 had an stunning 326 ppi!īut what does this means in practice? A picture still worth a thousand words (no pun intended). So in the example above either the original iPhone and the iPhone 4 had an 3,5' inch display. The higher the density the better the quality of the image because with more pixels the image can more detailed. Its normally measured by ppi, or pixels per inch, that is the quantity of dots or pixels that fits into an inch of that screen.
iPhone 4 had a 480圆40 screen solution with a whoping 307200 pixels!.The original iPhone had a 240x320 screen resolution, with a total of 76800 pixels.The amount of pixels on a given screen is the product of this two numbers. They are defined by how many pixels we have on the horizontal axis (the width) by the quantity of pixels on the vertical axis (the height), which forms a matrix. Resolution: refers to how many pixels we have on a given screen.The screen size by itself normally don't specify its aspect ratio (the ratio between its width and height that defines its actual dimensions). Screen Size: referes to the physical size of of a screen that's normalized measured by its diagonal inches.Given our problem space, let's learn about screen densities! But first there is a few concepts to recall: They're what this post is about! 😎 Understanding Screen Densities Of course that tools were created to help with this new problem. Then came iPhone 6 Plus, that trippled the resolution, iPads, Retina Display Macs and, well, you got the idea. This is when image asset management hell was the born on iOS projects! For now own we needed to provide variations of the same image to match with the screen resolutions.
Macbook ios paintcode software#
Software upscaling was possible, but wouldn't produce that sharp edges that users were looking for.Īnd Apple, being Apple, started sometime to force apps to be compatible with the retina display, otherwise they would be rejected on the review. To take advantage of such high resolution our apps needed to adapt the layout of the apps and provide images that doubled its own density or they would look so small on the screen that would be impossible to interact with. But it comes with its own issues to developers. That bump on the screen quality was very impressive and had a very good customer reception. The idea was that with such high res you couldn't notice the spacing between pixels and rounded edges would be naturally smooth. 😌īut enough is never enough, so circa 2010 we've got iPhone 4 and its retina display that doubled the resolution keeping the same screen size. For developers the fixed resolution made it very easy to design for iPhone in that very early years, and everyone was happy. The iPhone display by contrast was very sharp and beautiful. Smartphone displays of that era was crappy, ugly and pixelated. A screen of 3,5` with 240x320 resolution was a big deal. When Apple launched iPhone in 2007 they set the landscape for the "glass" shaped smartphones where we are today. But what are the problem with they so? Well, a little history will make things clear. You might ask, why do I need to care about image assets? Aren't they just plain images that I render on my layout? It used to be that simple, but not anymore. In this post we'll explore how image assets works on iOS. No matter how crudiest the UI could be, you'll probably need some icons or small image resources to compose your layouts. When developing apps you'll come to the point where you'll need to deal with image assets.
0 kommentar(er)
