--- title: "Images Aspect Ratios | GoodBarber's Design System" description: "The aspect ratio of an image defines the ratio between its width and height, i.e. the proportions of the image. This ratio has a strong influence on the appearance of a page and the user will be able to define it for certain types of images." canonical_url: "https://www.goodbarber.com/uxdesign/images-aspect-ratios/" lang: nl --- # Images Aspect Ratios | GoodBarber's Design System [Design System](https://nl.goodbarber.com/uxdesign/) ![](https://portal.ww-cdn.com/portal_static/svg/fapro/solid/grid.b60a521defb3.svg) [https://nl.goodbarber.com/uxdesign/](https://nl.goodbarber.com/uxdesign/) ![](https://portal.ww-cdn.com/portal_static/svg/fapro/regular/chevron-up.4b0a6b4e88c8.svg) ![](https://portal.ww-cdn.com/portal_static/svg/fapro/regular/chevron-down.e16b9408a703.svg) ![](https://portal.ww-cdn.com/portal_static/svg/fapro/solid/grid.b60a521defb3.svg) [Overview](https://nl.goodbarber.com/uxdesign/) - [Foundations](/uxdesign/foundations/) * Layout + [Grid](/uxdesign/grid/) + [Spacing](/uxdesign/spacing/) + [Breakpoints](/uxdesign/breakpoints/) + [Layers](/uxdesign/layers/) * Graphic elements + [Color](/uxdesign/color/) + [Typography](/uxdesign/typography/) + [Images Aspect Ratios](/uxdesign/images-aspect-ratios/) + [Icons](/uxdesign/icons/) - [Atomic Components](/uxdesign/atomic-components/) * [Color atom](/uxdesign/atom-color/) * [Font atom](/uxdesign/atom-font/) * [Image atom](/uxdesign/atom-image/) * [Gradient atom](/uxdesign/atom-gradient/) * [Shape atom](/uxdesign/atom-shape/) * [Shadow atom](/uxdesign/atom-shadow/) * [Size atom](/uxdesign/atom-size/) * [Border atom](/uxdesign/atom-border/) * [Blur atom](/uxdesign/atom-blur/) * [Overlay atom](/uxdesign/atom-overlay/) * [Immersive feedback atom](/uxdesign/atom-immersive-feedback/) - [UI Components](/uxdesign/ui-components/) * [Background](/uxdesign/background/) * [Text Field](/uxdesign/textfield/) * [Dropdown](/uxdesign/dropdown/) * [Date & Time Picker](/uxdesign/date-time-picker/) * [Checkboxes & Radio Button](/uxdesign/checkboxes-radio-button/) * [Button](/uxdesign/button/) * [Thumbnail](/uxdesign/thumbnail/) * [Form](/uxdesign/form/) # Images Aspect Ratios Foundations The Aspect Ratio is the proportional relationship between the width and the height of an image or video, impacting the look and feel of an app. [https://portal.ww-cdn.com/portal_static/images/designsystem/videos/imagesaspectratio.ecb5e1d1ebb2.mp4](https://portal.ww-cdn.com/portal_static/images/designsystem/videos/imagesaspectratio.ecb5e1d1ebb2.mp4) ## Introduction This section of the design system is dedicated to the concept of aspect ratio and how it affects the appearance of images in the app. The aspect ratio of an image is an important factor to consider when designing an app, as it has a significant impact on the overall look and feel of the interface. The aspect ratio is the ratio of width to height of an image and it determines the proportions of the image. This ratio has a strong influence on the appearance of a page and the user will be able to define it for certain types of images. In this section, we categorize the different types of images to understand their influence on the layout. ## Mostly used aspect ratio ### Overview In “views”, the most commonly used ratios are: 2.75:1 16:9 1.618:1 4:3 1:1, the 4:1 format is reserved for the Logos. ![All ratios used in the views](https://portal.ww-cdn.com/portal_static/images/designsystem/Foundations-ImagesAspectRatios-Mostly-Used-Overview.3b36ffafc5ca.png) *All ratios used in the views* ### Thumbnails aspect ratio The user has control over the choice of the thumbnail format (examples : images in a list, widgets, headlines etc.). He can choose between: 16:9 4:3 1:1 ![Customizable ratios](https://portal.ww-cdn.com/portal_static/images/designsystem/Foundations-ImagesAspectRatios-Mostly-Used-Thunbnails.76867c3a0389.png) *Customizable ratios* ### Relative aspect ratio In this case, the aspect ratio of an image may depend on the device on which it is displayed, or on another image or its environment. ![Responsive ratios](https://portal.ww-cdn.com/portal_static/images/designsystem/Foundations-ImagesAspectRatios-Relative-1.a5b7834d8268.png) *Responsive ratios* LEFT: a full page image relative to the screen size —— RIGHT: the thumbnails's height is relative to the size of the square image ![Profil image](https://portal.ww-cdn.com/portal_static/images/designsystem/Foundations-ImagesAspectRatios-Relative-2.eecd1ca303df.png) *Profil image* LEFT: Image height relative to content —— RIGHT: Image’s height = device’s height - (nav’s height + tabs’s height + 2G ) ## Original aspect ratio Here, we keep the original width-height ratio of an imported image. This concerns images in certain lists, such as photo templates, but also images in the body of articles (detail), images in the submit section etc. This feature allows the display of a photo taken in portrait mode in particular. ![Original ratios](https://portal.ww-cdn.com/portal_static/images/designsystem/Foundations-ImagesAspectRatios-Original.2dabc45d1ddf.png) *Original ratios* ## Categories & Uses ### Headers & Headlines The **Headers** are at the top of the Detail sections, the **Headlines** are the images highlighted in the Sections and List type Widgets. #### Most common configuration - Mobile, Tablet portrait: 1.618:1 (Golden ratio) - Tablet landscape: Relative (= to image height in Tablet-portrait mode) - Laptop, Desktop: 2.75:1 ![Headers & Headlines responsive ratio](https://portal.ww-cdn.com/portal_static/images/designsystem/Foundations-ImagesAspectRatios-Categories-HeadersUnesA.031878a9953d.gif) *Headers & Headlines responsive ratio* #### Variations In this first variation, **only the Mobile ratio changes** and becomes **square**. *Widget Event List Une Classic, Section Event Detail, Section Article List Visuel for example.* ![Other example of responsive ratio](https://portal.ww-cdn.com/portal_static/images/designsystem/Foundations-ImagesAspectRatios-Categories-HeadersUnesB.55e41090a25a.gif) *Other example of responsive ratio* In the variant below, we have the same organization as above but the layout is slightly different to create the **carousel**. *We find this in the Widget Navigation Banner Small Carrousel.* ![Responsive ratio in a Carrousel](https://portal.ww-cdn.com/portal_static/images/designsystem/Foundations-ImagesAspectRatios-Categories-HeadersUnesC.0cb243e5f7fa.gif) *Responsive ratio in a Carrousel* This last variation concerns Headlines. In Web, the image no longer occupies the totality of the width: the Headline (image + text) takes 2 columns. The version with margins works slightly differently: the Headline comes to match the width of the content in Mobile and Tablet. *Example : Widget et Section Article List ClassicUne.* ![Image width variation](https://portal.ww-cdn.com/portal_static/images/designsystem/Foundations-ImagesAspectRatios-Categories-HeadersUnesD.724ae325e4f1.gif) *Image width variation* ### Thumbnails Thumbnails are the preview images present in the vast majority of lists. Their size will be affected by the choice set by the user, but some templates will escape this rule. #### Users selected ratios In some templates, the user will be able to choose among these 3 predefined ratios for the size of the preview thumbnails 16:9 4:3 1:1 *Examples : Widget Article List Une Classic, List Classic, Banner Classic...* ![3 predefined ratios for thumbnails](https://portal.ww-cdn.com/portal_static/images/designsystem/Foundations-ImagesAspectRatios-Categories-Thumbnails-User.b92a322d3e10.gif) *3 predefined ratios for thumbnails* #### “System” ratios Here we are talking about thumbnail sizes that are not influenced by the user's choice as some templates do not allow this. - **Square thumbnails** → The ratio used is 1:1 on all devices. *Examples : Section Article List Checkerboard, Section Photo List Square* ![Checkerboard thumbnails ratio](https://portal.ww-cdn.com/portal_static/images/designsystem/Foundations-ImagesAspectRatios-Categories-Thumbnails-System-1.3b2e42c899df.png) *Checkerboard thumbnails ratio* - **Split thumbnails** → In this case, the base of the thumbnail is square and we split at the 3rd third. *Example: Event List Split section* ![Split thumbnails ratio](https://portal.ww-cdn.com/portal_static/images/designsystem/Foundations-ImagesAspectRatios-Categories-Thumbnails-System-2.da5f9cd3b6b0.png) *Split thumbnails ratio* - **3:4 thumbnails** → In some grid type templates, we cheat a little by reversing the 4:3 ratio. *Examples: Widgets Navigation List Grid, Section Multilevel Grid* ![Grid thumbnails ratio](https://portal.ww-cdn.com/portal_static/images/designsystem/Foundations-ImagesAspectRatios-Categories-Thumbnails-System-3.996f0d4511b7.png) *Grid thumbnails ratio* - **Relative size thumbnails** → Many sections and Highlight widgets are affected. In the example below the size of the thumbnail is relative to the size of the Headline , but only for Tablet and Web. Indeed, in Mobile the cascade layout allows to use the size chosen by the user *Examples: Widget Article Highlight Une Grid, Section Multilevel Une Grid* ![Relative ratio thumbnails](https://portal.ww-cdn.com/portal_static/images/designsystem/Foundations-ImagesAspectRatios-Categories-Thumbnails-System-4.e1d03522ce5a.png) *Relative ratio thumbnails* In this other case, the height will be relative to the ratio chosen by the user. *Examples : Widgets Navigation ListVisual, Sections Multilevel Visuels* ![Other example of relative ratio thumbnails](https://portal.ww-cdn.com/portal_static/images/designsystem/Foundations-ImagesAspectRatios-Categories-Thumbnails-System-5.b13c357d8004.png) *Other example of relative ratio thumbnails* RIGHT: the user has chosen the 4:3 ratio and we have 2 items / LEFT: only 1 item — Tablet Please see the [Thumbnail component](/uxdesign/thumbnail/) section for more information about this component. ### Original size images We are talking about imported images that will not be cropped. An image imported into a Section Detail feed will keep its original ratio. This is also the case for images imported from the Submit or Twitter sections. #### Sections Details & the full width option In the thread of a detail section the user has the possibility to display their image in full width, the image will not be aligned on the content and it will take the whole width of the page: ![Image in content details](https://portal.ww-cdn.com/portal_static/images/designsystem/Foundations-ImagesAspectRatios-Categories-OriginalSize-SectionsDetails.4920fed9a3c0.gif) *Image in content details* #### Section Photo Detail In this template, we want the image to occupy a maximum of the visible area on each screen while maintaining the original ratio of the photo. - In Mobile and Tablet portrait, we use the full width of the screen. - On other media, we will rely on a **safe area** to contain the image in the visible area. ![Image in photo gallery details](https://portal.ww-cdn.com/portal_static/images/designsystem/Foundations-ImagesAspectRatios-Categories-OriginalSize-SectionPhoto.399030d74c10.gif) *Image in photo gallery details* #### Videos A video will be viewed at its original size in the *Video Detail* section: ![Image in the video section details](https://portal.ww-cdn.com/portal_static/images/designsystem/Foundations-ImagesAspectRatios-Categories-OriginalSize-Video.36caf9c70cee.png) *Image in the video section details* ### Full page image The image occupies the entire space and its size will therefore necessarily be relative to the devices . *Examples : Widget Article Banner Minimal, Section Multilevel SlideShow...* ![Full screen image](https://portal.ww-cdn.com/portal_static/images/designsystem/Foundations-ImagesAspectRatios-Categories-FullPage.6c3adc6bf005.gif) *Full screen image* ### Specific components Avatars and logos are images, but also components in their own right. #### Avatars Whatever the style assigned to an avatar (square, rounded or round) its base will be square ![Users avatar](https://portal.ww-cdn.com/portal_static/images/designsystem/Foundations-ImagesAspectRatios-Categories-Specific-Avatar.046d864f80ef.png) *Users avatar* #### Logos The ratios used for these elements will be 1:1 or 4:1. ![NavBar logo](https://portal.ww-cdn.com/portal_static/images/designsystem/Foundations-ImagesAspectRatios-Categories-Specific-Logo.45032403e870.png) *NavBar logo*