Designing a site involves optimizing the quality of the assets such as images, videos, and other content that can be embedded into the site.
In our experience, many users find it challenging to get the preferred clarity or fit (frame) for their content, like image, video, or HTML package, within the tile or section because of the wrong dimensions and/or proportions. Sometimes, the clarity (resolution) is sacrificed just to compensate in rendering the content the right or preferred frame, and vice versa.
In this case, quality is influenced not just by the dimension of the content (height, width, resolution) but also by the proportion of these dimensions. Where should it be made proportionate with? The content should be proportionate with the device or screen resolution where the site will be rendered on!
That said, it makes the most sense to refer to the commonly used screen resolutions in the current market, though the content can always be optimized for any preferred or target screen resolution, for a better viewing experience.
To better assist you in keeping your content up-to-date with the market, we will summarize related statistics, at least every 6 months, and published them in this article.
Desktop screen resolution statistics
The top desktop screen resolution as of May 2021 market is 1366x768 at 23.42% share.
From the same chart, we can gather the following:
78.17% of the screen width is between 1280px and 1920px
67.56% of the screen width is between 1360px and 1920px
77.60% of the screen height is between 768px and 1080px
Mobile screen resolution statistics
The top mobile screen resolution as of May 2021 market is 360x640 at 24% share.
The statistics are from a third-party fact sheet published by Statcounter Global Stats.