Resolution is a metric measuring clarity and detail through the number of pixels displayed on a screen or used to render an image. Pixels are arranged horizontally and vertically in a grid, with resolution typically measured in width and height. For example, a 1,920 x 1,080 screen resolution houses 1,920 horizontal and 1,080 vertical pixels, resulting in 2,073,600 total pixels. Similarly, an image resolution of 1,024 x 768 has 786,432 pixels. The more pixels a screen has, the higher its resolution, with the total number of pixels determining the screen resolution.
However, screen resolution and screen size are distinct concepts. Size refers to a display’s size from corner to corner, such as 6", 10", 17", and so on. For example, an Apple iPhone 14 has a 6.1" display with a screen resolution of 2,532 x 1,170. Since different devices have varying screen sizes and resolutions, both are essential considerations in responsive design.
Get the best, coolest, and latest in design and no-code delivered to your inbox each week.