{"id":24414,"date":"2024-09-09T06:09:19","date_gmt":"2024-09-09T13:09:19","guid":{"rendered":"https:\/\/www.uxpin.com\/studio\/?p=24414"},"modified":"2026-03-03T17:04:34","modified_gmt":"2026-03-04T01:04:34","slug":"aspect-ratio","status":"publish","type":"post","link":"https:\/\/www.uxpin.com\/studio\/blog\/aspect-ratio\/","title":{"rendered":"Aspect Ratios in UX\/UI Design: A Complete Guide"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"512\" src=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/05\/Aspect-ratios-1024x512.png\" alt=\"Aspect ratios\" class=\"wp-image-24415\" srcset=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/05\/Aspect-ratios-1024x512.png 1024w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/05\/Aspect-ratios-600x300.png 600w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/05\/Aspect-ratios-768x384.png 768w, https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/05\/Aspect-ratios.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Image-rich content drives website engagement, and making sure those images display properly is a crucial part of good UX design.&nbsp;Whether you\u2019re working with photographs, illustrations, or video, an image that\u2019s stretched, squashed, or poorly cropped makes a poor impression for on-site visitors and affects their overall experience on the site.<\/p>\n\n\n\n<p>Determining aspect ratios for optimal viewing on all kinds of devices can be both a chore and a challenge for designers, but today\u2019s responsive design tools and an array of free aspect ratio calculators can make sure that images and video files are displayed in the best light everywhere.<\/p>\n\n\n\n<p>Designing a website or app full of images? Create prototypes of it with UXPin! It&#8217;s an end-to-end solution that will cover your full design process and it doesn&#8217;t require any plugins for design handoff. See how easy it is. <a href=\"https:\/\/uxpin.com\/sign-up\" target=\"_blank\" rel=\"noreferrer noopener\">Sign up for a free trial<\/a>.<\/p>\n\n\n\n<section class=\"try-uxpin-banner\">\n    <div class=\"try-uxpin__container\">\n        <div class=\"try-uxpin__left\">\n            <p class=\"try-uxpin__heading\">Build advanced prototypes<\/p>\n            <p class=\"try-uxpin__text\">Design better products with States, Variables, Auto Layout and more.<\/p>\n            <a href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noopener\">\n                <button class=\"try-uxpin__button\">Try UXPin<\/button>\n            <\/a>\n        <\/div>\n        <div>\n            <img decoding=\"async\" src=\"https:\/\/uxpin.com\/studio\/wp-content\/themes\/uxpin-juggernaut\/img\/cta-banner-signup.png\" class=\"try-uxpin__image\" alt=\"Try UXPin\">\n        <\/div>\n    <\/div>\n<\/section>\n\n<style>\n.try-uxpin-banner {\n    margin: 40px 0px;\n}\n\n.try-uxpin__container {\n    display: flex;\n    max-width: 689px;\n    height: 210px;\n    padding: 20px;\n    padding-left: 24px;\n    border: 2px solid black;\n    border-radius: 4px;\n    align-items: center;\n    justify-content: space-between;\n    background-color: white;\n    box-shadow: 10px 10px black;\n}\n\n.try-uxpin__left {\n    width: 54%;\n}\n\n\n.try-uxpin__heading {\n    font-size: 28px !important;\n    font-weight: bold;\n}\n\n.try-uxpin__left p {\n    margin: 10px 0px !important;\n    color: black !important;\n}\n\n.try-uxpin__text {\n    margin: 0 !important;\n    font-size: 18px !important;\n    line-height: 22px !important;\n}\n\n.try-uxpin__button {\n    width: 135px;\n    height: 44px;\n    background: black;\n    margin: 10px 0px;\n    padding: 10px 20px;\n    border: none;\n    border-radius: 2px;\n    color: white;\n    font-size: 16px;\n    text-align: center;\n}\n\n.try-uxpin__button:hover {\n    cursor: pointer;\n}\n\n.try-uxpin__image {\n    max-width: 320px !important;\n    height: 200px;\n    margin-right: -21px;\n    margin-bottom: -6px;\n}\n\n@media (max-width: 760px) {\n    .try-uxpin__container {\n        height: auto;\n        margin: 10px;\n        align-items: left;\n    }\n}\n\n@media (max-width: 500px) {\n    .try-uxpin__container {\n        flex-direction: column;\n    }\n\n    .try-uxpin__left {\n        width: 100%;\n        align-items: normal;\n    }\n}\n\n<\/style>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-what-is-aspect-ratio\">What is Aspect Ratio?<\/h2>\n\n\n\n<p>In the most basic way, <a href=\"https:\/\/digital-photography-school.com\/aspect-ratio-what-it-is-and-why-it-matters\/\" target=\"_blank\" rel=\"noreferrer noopener\">aspect ratio is the relationship <\/a>between an image\u2019s width and height.&nbsp; Because aspect ratio reflects an image\u2019s proportions, not its size, the aspect ratio remains the same regardless of size. For example, a square image has an aspect ratio of 1:1, since its height and width are the same. That ratio will hold no matter how large the image is. An image that\u2019s 320x320px will have the same aspect ratio as one that\u2019s 1080x1080px \u2013 1:1.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/UBuHyV8oGAETFOMZdTyjdweWEzVLznm7BdhMfiYloJ7jc-rXUX9yfPcbw3S-MIMDTj-Iwh8jiAK6ltfGz9lbPDwlbi3OS23TMiCnm_Vu91ceH1rx0r8ZW3cER2iRiw\" alt=\"\"\/><\/figure>\n<\/div>\n\n\n<p>For images that are not square- that is, horizontal or vertical rectangles of various sizes&#8230; Aspect ratio can vary. Common aspect ratios used in photography, video, and other image-based design work include 4:3, 3:2 or 16:9, the basic ratio for many widescreen devices such as televisions and desktop computers.&nbsp;<\/p>\n\n\n\n<p>Although the aspect ratio of an image comes from the relationship of its height and width, <a href=\"https:\/\/designshack.net\/articles\/layouts\/understanding-and-working-with-aspect-ratio\/\" target=\"_blank\" rel=\"noreferrer noopener\">multiple subsets of this ratio <\/a>also help to define image proportions.&nbsp;&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-pixel-aspect-ratio\"><strong>Pixel aspect ratio<\/strong><\/h3>\n\n\n\n<p>Pixel aspect ratio (PAR) refers to the proportion of the individual pixels that make up an image.&nbsp; Pixels are typically square, which results in a pixel aspect ratio of 1:1. But images that are optimized for certain types of displays can also have rectangular pixels with an aspect ratio of 4:3 or similar.&nbsp;&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-display-aspect-ratio\"><strong>Display aspect ratio<\/strong><\/h3>\n\n\n\n<p>Display aspect ratio (DAR) is the most relevant kind of aspect ratio for designers, and it\u2019s the one that\u2019s most commonly associated with the general term.&nbsp; As the name suggests, display aspect ratio refers to the proportions of an image as it appears on screens of various kinds.&nbsp;&nbsp;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/W39V_8MwrdTxSgSjXhZxT3I5LZPVvwxGg6phmGxzdq8srFNh-KqByaxavXcvbqAehrcnwgI-rNP3M79-8_WDpjqveSDNMZnGoKZIZstN36-iL4kx08FFR_mRMoOnkw\" alt=\"\"\/><\/figure>\n<\/div>\n\n\n<p>Some devices, such as cameras and televisions, have a fixed DAR, so for images to display well on these devices, they need to be optimized for their particular aspect ratio. For example, a typical display aspect ratio for widescreen video to be displayed on a monitor or television screen is 16:9. When images with a different aspect ratio are displayed on these devices, they appear distorted.&nbsp; Digital SLR camera sensors also have a fixed display aspect ratio, which controls how images captured by the camera will be saved and displayed.&nbsp;&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-storage-aspect-ratio\"><strong>Storage aspect ratio<\/strong><\/h3>\n\n\n\n<p>Storage aspect ratio (SAR) is an aspect ratio formula that pertains specifically to encoded digital video files. SAR refers to the width and height relationship in video frame size, and it needs to be consistent across all individual frames in order for the complete video to display properly. In a commonly used formula, SAR x PAR = DAR for most widescreen videos.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-aspect-ratios-affect-ui-ux-design\">Aspect Ratios Affect UI\/UX Design<\/h2>\n\n\n\n<p>Aspect ratios play an important part in any kind of project that involves capturing and displaying photographs, videos, or other kinds of image-based files in the correct way.&nbsp; For photographers, the camera\u2019s fixed aspect ratio can have a considerable impact on composing a photograph as well as displaying it later on other devices. And for videographers and anyone working with slideshows, animations, and other motion projects, aspect ratio is a key factor for correct display on widescreen and mobile devices.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/RmfG_zCfRpRg42Iy-qpCN5PZgX6efHsg5elnwxJpujaZ4fEnVgsxD26m_fNu4OUFZYlaa6S4WJIKP5ai6oRiLffCNC-tLwqnc7F80I5OnKTkNTx02wG54Pix0vQD8Q\" alt=\"\"\/><\/figure>\n<\/div>\n\n\n<p>The shift to <a href=\"https:\/\/www.sitepoint.com\/maintain-image-aspect-ratios-responsive-web-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">responsive web design<\/a>, which ensures that content displays properly across all devices, helps to resolve a number of problems with setting aspect ratios for individual images.&nbsp; But even in these environments, problems can arise, such as when an image can\u2019t be adjusted for display without compromising either its content or its quality.&nbsp; A simple example is when a square image with a 1:1 aspect ratio needs to fit into a rectangular box on a website page. To accommodate varying image size requirements, proportions, as well as size, may have to be adjusted.<\/p>\n\n\n\n<p>In an increasingly image-driven digital world, videos and images that look even slightly out of proportion contribute to a visitor\u2019s negative impression of a website \u2013 and those that are clearly forced into the wrong configurations can even interfere with a site\u2019s usability.&nbsp;&nbsp;<\/p>\n\n\n\n<p>Poorly proportioned product images or a user guide video that\u2019s too stretched to see clearly can affect both a visitor\u2019s willingness and their ability to use the site.&nbsp; Designers, developers and anyone working with images will need to know how aspect ratios work and how to manipulate them for the best visual effect.&nbsp; To streamline the process, a number of aspect ratio calculators, both free and paid, have popped up on the web.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Aspect Ratio Best Practices for Responsive Design<\/h2>\n\n\n\n<p>In responsive design, maintaining the correct aspect ratio for images, videos, and UI elements is critical to ensure that your content looks clean and professional across different screen sizes. A well-maintained aspect ratio not only preserves the integrity of your visuals but also enhances the user experience by preventing distortion and awkward cropping on various devices. Here are the best practices to follow when dealing with aspect ratios in responsive design:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. Use CSS for Maintaining Aspect Ratio<\/h3>\n\n\n\n<p>CSS provides tools that make it easy to ensure consistent aspect ratios across different viewports. For instance, the <code>aspect-ratio<\/code> property (introduced in CSS Level 4) allows you to define the aspect ratio for containers, images, or videos, helping you maintain the correct proportions regardless of screen size. Before this property was widely supported, developers often used the <strong>padding-top trick<\/strong> (where padding percentage is based on the width) to preserve the ratio of containers or media elements.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">2. Maintain Aspect Ratio for Key Media Elements<\/h3>\n\n\n\n<p>Images, videos, and interactive elements are key to a user\u2019s experience, so it\u2019s essential that they are not distorted or cropped when viewed on different devices. <strong>Stretching or squishing<\/strong> images can lead to unprofessional-looking designs and frustrate users, especially if the distortion impacts how users interact with visual content.<\/p>\n\n\n\n<p>By preserving the correct aspect ratio, your images and videos will maintain their intended dimensions and scale properly with the screen size. To achieve this, make sure that media queries in your CSS accommodate different viewports while keeping the aspect ratio intact.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">3. Use Responsive Images for Performance Optimization<\/h3>\n\n\n\n<p>Performance plays a significant role in responsive design, especially on mobile devices where slower connections are common. Using <strong>responsive images<\/strong> is key to balancing performance with visual quality. You can use the <code>srcset<\/code> attribute in your HTML, which provides different image resolutions based on the user&#8217;s screen size.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">4. Test Across Devices<\/h3>\n\n\n\n<p>One of the core principles of responsive design is <strong>thorough testing<\/strong> across different devices. What looks great on a desktop might be misaligned on a mobile phone if the aspect ratio isn&#8217;t preserved. Use tools like Chrome Developer Tools or online responsive design testers to emulate different devices and screen sizes.<\/p>\n\n\n\n<p>For images and videos with fixed aspect ratios (like 16:9 or 4:3), ensure that the design adapts well across all screen sizes without distortion. Ensure that all dynamic resizing respects the original proportions.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">5. Handle Aspect Ratios in Fluid Layouts<\/h3>\n\n\n\n<p>Responsive design often involves <strong>fluid layouts<\/strong>, where elements resize dynamically based on the screen width. In these cases, setting the aspect ratio is essential to prevent issues like images and containers becoming too narrow or tall. By using <strong>percentage-based widths and heights<\/strong>, you can ensure that your content scales properly without disrupting its aspect ratio.<\/p>\n\n\n\n<p>For example, a 16:9 video container might be scaled down to fit a mobile screen, but it should always retain the 16:9 ratio, no matter how much the overall layout changes. Fluid layouts combined with flexible aspect ratios ensure that your design remains consistent and visually appealing on all devices.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-aspect-ratio-calculators-a-solution\">Aspect Ratio Calculators<\/h2>\n\n\n\n<p>It\u2019s certainly possible to calculate an image\u2019s aspect ratio and resize it manually with the help of some simple mathematics.&nbsp; But that becomes tedious when dealing with many images from multiple sources. With the help of one of the many online <a href=\"https:\/\/www.omnicalculator.com\/other\/aspect-ratio#how-to-calculate-aspect-ratio\" target=\"_blank\" rel=\"noreferrer noopener\">aspect ratio calculators<\/a>, though, you can determine the optimal aspect ratio for any image in a number of different formats, allowing designers to fully optimize each image for optimal viewing.<\/p>\n\n\n\n<p>To use a basic aspect ratio calculator, you\u2019ll need to know the image resolution in pixels and select the type of environment where the image will appear, such as HDTV.&nbsp; The calculator then returns the result as an optimal aspect ratio. This can be especially helpful for <a href=\"https:\/\/wave.video\/online-video-editor\">video editing<\/a>, where the video might include slides or images of varying sizes from different sources.&nbsp;&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-image-editors-have-aspect-ratio-tools\">Tools for Aspect Ratios in UX\/UI<\/h2>\n\n\n\n<p>Other image management tools can also help with getting the aspect ratio right. Image editors such as Photoshop and Canva provide templates designed with optimal aspect ratios in mind, suitable for use in typical situations such as designing website banners, headlines, or social media profiles.&nbsp; Most standard video editing software also allows users to determine and adjust aspect ratios of images to be included as individual frames in the video.&nbsp;&nbsp;<\/p>\n\n\n\n<p>Correctly proportioned images that display well and perform properly are a powerful tool for businesses of all kinds. Getting aspect ratios right makes images look good wherever they\u2019re displayed.&nbsp; Whether you\u2019re selling a product, offering a service, creating an online course or something else, photographs, illustrations or video can attract visitors and keep them engaged.&nbsp;&nbsp;<\/p>\n\n\n\n<p>UXPin\u2019s features make it easy to make sure images are sized and proportioned correctly. With <a href=\"https:\/\/www.uxpin.com\/docs\/editor\/styling\/#image-fill\" target=\"_blank\" rel=\"noreferrer noopener\">Image Fill,<\/a> you can choose from a variety of settings that allow you to adjust image size or crop the image while preserving its aspect ratio for perfect positioning.<\/p>\n\n\n\n<p>UXPin can help bring designers and developers together for faster, better product development. <a href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noreferrer noopener\">Sign up for for a free trial today<\/a>.<\/p>\n\n\n\n<div class=\"wp-block-button is-style-fill\"><center><a class=\"btn btn-flat btn-large btn-content-width\" href=\"https:\/\/www.uxpin.com\/sign-up\" target=\"_blank\" rel=\"noopener\">Try UXPin for free<\/a><\/center><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Image-rich content drives website engagement, and making sure those images display properly is a crucial part of good UX design.&nbsp;Whether you\u2019re working with photographs, illustrations, or video, an image that\u2019s stretched, squashed, or poorly cropped makes a poor impression for on-site visitors and affects their overall experience on the site. Determining aspect ratios for optimal<\/p>\n","protected":false},"author":3,"featured_media":24415,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,205],"tags":[373],"class_list":["post-24414","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-mobile-design","tag-aspect-ratio"],"yoast_title":"%%title%% %%page%% - by UXPin","yoast_metadesc":"Learn all about aspect ratios in UX\/UI design, including how they affect images, videos, and responsive layouts across devices.","acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.4 (Yoast SEO v27.5) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Aspect Ratios in UX\/UI Design: A Complete Guide - by UXPin<\/title>\n<meta name=\"description\" content=\"Learn all about aspect ratios in UX\/UI design, including how they affect images, videos, and responsive layouts across devices.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.uxpin.com\/studio\/blog\/aspect-ratio\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Aspect Ratios in UX\/UI Design: A Complete Guide\" \/>\n<meta property=\"og:description\" content=\"Learn all about aspect ratios in UX\/UI design, including how they affect images, videos, and responsive layouts across devices.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.uxpin.com\/studio\/blog\/aspect-ratio\/\" \/>\n<meta property=\"og:site_name\" content=\"Studio by UXPin\" \/>\n<meta property=\"article:published_time\" content=\"2024-09-09T13:09:19+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-03-04T01:04:34+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/05\/Aspect-ratios.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"600\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"UXPin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@uxpin\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"UXPin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/aspect-ratio\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/aspect-ratio\\\/\"},\"author\":{\"name\":\"UXPin\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"headline\":\"Aspect Ratios in UX\\\/UI Design: A Complete Guide\",\"datePublished\":\"2024-09-09T13:09:19+00:00\",\"dateModified\":\"2026-03-04T01:04:34+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/aspect-ratio\\\/\"},\"wordCount\":1759,\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/aspect-ratio\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2021\\\/05\\\/Aspect-ratios.png\",\"keywords\":[\"aspect ratio\"],\"articleSection\":[\"Blog\",\"Mobile Design\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/aspect-ratio\\\/\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/aspect-ratio\\\/\",\"name\":\"Aspect Ratios in UX\\\/UI Design: A Complete Guide - by UXPin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/aspect-ratio\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/aspect-ratio\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2021\\\/05\\\/Aspect-ratios.png\",\"datePublished\":\"2024-09-09T13:09:19+00:00\",\"dateModified\":\"2026-03-04T01:04:34+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\"},\"description\":\"Learn all about aspect ratios in UX\\\/UI design, including how they affect images, videos, and responsive layouts across devices.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/aspect-ratio\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/aspect-ratio\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/aspect-ratio\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2021\\\/05\\\/Aspect-ratios.png\",\"contentUrl\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/wp-content\\\/uploads\\\/2021\\\/05\\\/Aspect-ratios.png\",\"width\":1200,\"height\":600,\"caption\":\"Aspect ratios\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/blog\\\/aspect-ratio\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Aspect Ratios in UX\\\/UI Design: A Complete Guide\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#website\",\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/\",\"name\":\"Studio by UXPin\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/#\\\/schema\\\/person\\\/e0326509b38ce2a3ce62e40ddde9cf8e\",\"name\":\"UXPin\",\"description\":\"UXPin is a web-based design collaboration tool. We\u2019re pleased to share our knowledge here.\",\"sameAs\":[\"http:\\\/\\\/www.uxpin.com\",\"https:\\\/\\\/x.com\\\/@uxpin\"],\"url\":\"https:\\\/\\\/www.uxpin.com\\\/studio\\\/author\\\/hello\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Aspect Ratios in UX\/UI Design: A Complete Guide - by UXPin","description":"Learn all about aspect ratios in UX\/UI design, including how they affect images, videos, and responsive layouts across devices.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.uxpin.com\/studio\/blog\/aspect-ratio\/","og_locale":"en_US","og_type":"article","og_title":"Aspect Ratios in UX\/UI Design: A Complete Guide","og_description":"Learn all about aspect ratios in UX\/UI design, including how they affect images, videos, and responsive layouts across devices.","og_url":"https:\/\/www.uxpin.com\/studio\/blog\/aspect-ratio\/","og_site_name":"Studio by UXPin","article_published_time":"2024-09-09T13:09:19+00:00","article_modified_time":"2026-03-04T01:04:34+00:00","og_image":[{"width":1200,"height":600,"url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/05\/Aspect-ratios.png","type":"image\/png"}],"author":"UXPin","twitter_card":"summary_large_image","twitter_creator":"@uxpin","twitter_misc":{"Written by":"UXPin","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.uxpin.com\/studio\/blog\/aspect-ratio\/#article","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/aspect-ratio\/"},"author":{"name":"UXPin","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"headline":"Aspect Ratios in UX\/UI Design: A Complete Guide","datePublished":"2024-09-09T13:09:19+00:00","dateModified":"2026-03-04T01:04:34+00:00","mainEntityOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/aspect-ratio\/"},"wordCount":1759,"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/aspect-ratio\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/05\/Aspect-ratios.png","keywords":["aspect ratio"],"articleSection":["Blog","Mobile Design"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.uxpin.com\/studio\/blog\/aspect-ratio\/","url":"https:\/\/www.uxpin.com\/studio\/blog\/aspect-ratio\/","name":"Aspect Ratios in UX\/UI Design: A Complete Guide - by UXPin","isPartOf":{"@id":"https:\/\/www.uxpin.com\/studio\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/aspect-ratio\/#primaryimage"},"image":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/aspect-ratio\/#primaryimage"},"thumbnailUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/05\/Aspect-ratios.png","datePublished":"2024-09-09T13:09:19+00:00","dateModified":"2026-03-04T01:04:34+00:00","author":{"@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e"},"description":"Learn all about aspect ratios in UX\/UI design, including how they affect images, videos, and responsive layouts across devices.","breadcrumb":{"@id":"https:\/\/www.uxpin.com\/studio\/blog\/aspect-ratio\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.uxpin.com\/studio\/blog\/aspect-ratio\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.uxpin.com\/studio\/blog\/aspect-ratio\/#primaryimage","url":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/05\/Aspect-ratios.png","contentUrl":"https:\/\/www.uxpin.com\/studio\/wp-content\/uploads\/2021\/05\/Aspect-ratios.png","width":1200,"height":600,"caption":"Aspect ratios"},{"@type":"BreadcrumbList","@id":"https:\/\/www.uxpin.com\/studio\/blog\/aspect-ratio\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.uxpin.com\/studio\/"},{"@type":"ListItem","position":2,"name":"Aspect Ratios in UX\/UI Design: A Complete Guide"}]},{"@type":"WebSite","@id":"https:\/\/www.uxpin.com\/studio\/#website","url":"https:\/\/www.uxpin.com\/studio\/","name":"Studio by UXPin","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.uxpin.com\/studio\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.uxpin.com\/studio\/#\/schema\/person\/e0326509b38ce2a3ce62e40ddde9cf8e","name":"UXPin","description":"UXPin is a web-based design collaboration tool. We\u2019re pleased to share our knowledge here.","sameAs":["http:\/\/www.uxpin.com","https:\/\/x.com\/@uxpin"],"url":"https:\/\/www.uxpin.com\/studio\/author\/hello\/"}]}},"_links":{"self":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/24414","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/comments?post=24414"}],"version-history":[{"count":8,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/24414\/revisions"}],"predecessor-version":[{"id":58407,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/posts\/24414\/revisions\/58407"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media\/24415"}],"wp:attachment":[{"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/media?parent=24414"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/categories?post=24414"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uxpin.com\/studio\/wp-json\/wp\/v2\/tags?post=24414"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}