Screen Size and Aspect Ratio Guide for Images, Video, and Layouts

Design assets break when the aspect ratio is wrong. A banner crops awkwardly, a thumbnail cuts off text, or a video letterboxes because the source dimensions do not match the target frame.

The mistake is treating width and height as independent guesses. Once the ratio is fixed, changing one dimension determines the other.

Choose the frame before exporting

Start with the place where the asset will appear: hero image, social preview, video player, product card, or mobile layout. Each target has a different preferred ratio and safe area.

• Write down the required width, height, and ratio before opening the design tool.
• Use ratio locks when resizing source images.
• Create separate exports for square, landscape, and portrait placements.
• Avoid placing important text near crop edges.

Preview at real sizes

A layout can look balanced at desktop width and fail on a phone. Preview the asset at the smallest expected size and check whether the subject, text, and whitespace still work.

• Check 16:9, 4:3, 1:1, and vertical variants if the asset is reused.
• Use high enough resolution for dense screens without exporting huge files.
• Confirm thumbnails remain readable.
• Keep source files uncropped when future ratios are likely.

Calculate instead of guessing

Use an aspect ratio calculator when resizing or creating alternate versions. Enter the known width or height and let the ratio determine the matching dimension.

Good responsive media starts with correct proportions. The calculator prevents small rounding mistakes that become visible in production layouts.