Resolution independence - Prepare Images & Icons for different densities and resolutions

Question

I am quite confused in a way of designing interface elements (icons for example) for different resolutions and densities for Iphone apps for instance. I would be grateful to anybody who can put lights on these questions:

1. On this link have been mentioned all Iphone devices and each resolution: http://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions. If we are designing an icon, do I understand right that for Iphone 4s (326 ppi) and Iphone 6 (also 326 ppi) we will use the same icon (with the same dimension) and we don't need to resize it?
2. Do we have to resize design element only when device has resolution difference? It doesn't make sense in a case when there is a difference in device dimensions only.
3. Take a look on this article: https://www.smashingmagazine.com/2010/11/designing-for-iphone-4-retina-display-techniques-and-workflow/. Vector is definitely a necessity for perfectly quality all the time.

But, when reading that article I can't understand, why vector-based images tends to be more resource-hungry and lacks pixel level control?

What is the perfect practice to design icons and handle widely different resolutions and pixel densities?

I thought that the best practice is to create vector graphics and export as SVGs or create an icon font. Since the pixel density of devices change, we can't easily plan for them all so you'll be providing many duplicate images at different sizes.

But, for now I've got lost absolutely.

I also found that Photoshop allows for greater flexibility in layering effects (for drop-shadows, gradients… for an embossed look).

What if icon has to be designed in photoshop? In this case we must built each icon for specific devices, at specific resolutions: bespoke designs for each required size. It’s more work, but pre-rendering images ensures everything always looks as good as possible. Am I right here.

P.S.: Please, I am appealing to all UI specialists here. Could you bring an order in this issue.

Answer 1

If you are making graphics, make Scalable Vector Graphics (SVG) because you cannot necessarily know the pixel size your graphics will be rendered at. Generally speaking, the way you support multiple displays and pixel resolutions is by scaling. That is why SVG is so popular today.

Where you have to use bitmap images — for example, photos — you have to include one photo for each pixel density:

• 1x pixel density means the display shows 1 pixel of your photo on 1 pixel of the display

• 2x pixel density means the display shows 1 pixel of your photo on 4 pixels of the display, because the 2x works in both width and height.

A key thing to understand is the concept of “virtual pixels.” You still do your layout in 1x pixels as we have done for decades now, but today they are virtual pixels, not real pixels. They may be shown at 1x and match up to real pixels, or they may be shown at 2x and not match up to real pixels.

So, for example, if your layout calls for a photo to be displayed at a maximum size of 960x540, you have to provide 2 photo files:

• a 960x540 version called “photo.jpeg” for 1x displays

• a 1920x1080 version called “[email protected]” for 2x displays.

What is confusing here is that you refer to them both as being “960x540” photos. The 1x one is a “960x540 photo at 1x pixel density” (960x540 in real pixels) and the 2x one is a “960x540 photo at 2x pixel density” (1920x1080 in real pixels.)

Note that pixel densities can go higher than 2. So you follow the logic up as you support screens with additional 3x assets.