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. 

Visit Webflow University to learn more about how image resolution and breakpoints contribute to responsive design.

A new way to learn and to build for the web

Get the best, coolest, and latest in design and no-code delivered to your inbox each week.

Shoot, something didn't work. Try again later, bud.