Shrink this page to see how it responds.
<img src="" data-desktop="desktop.png" data-retina="desktopx2.png" data-mobile="mobile.png" data-mobile-retina="mobilex2.png" />
1:1 Image Sizes (click to view larger)
1:1 Image Sizes
1:1 refers to the square size ratio of the image dimension. Knowing the appropriate ratio for an image usage is important. Images are often used across multiple pages and must be able to scale appropriately in different contexts.
4:3 Image Sizes (click to view larger)
4:3 Image Sizes
4:3 refers to the rectangular size ratio of the image dimension. Knowing the appropriate ratio for an image usage is important. Images are often used across multiple pages and must be able to scale appropriately in different contexts.
Other Image Sizes (click to view larger)
Other Image Sizes
The standard image sizes and corresponding grid column widths (for desktop view) are listed at right. Please refer to the web page examples to see the images in context on the live site.
Image Upload and Naming
Images uploaded to the content management system should be sized according to the largest possible retina dimension. For example, an image that will be displayed at 200 px wide on the live site would need to be 400 x 520 pixels wide in the DAM.
All images should be saved in the content management system as .png files, using all lowercase letters with dashes separating the words (e.g. all-lowercase-letters.png).
Background images are handled slightly differently. For these, we just use CSS to render the image and use a background-size adjustment to make it fit.
background-size: @width @height;