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.

Other glossary terms

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Hmm…we couldn’t find any results. Try a different search term or reset the filter.
Reset the filter
Load more