Responsive Images

Live Example

Shrink this page to see how it responds.

[Petco Park]

Inline Images

Details

The aafp.org website includes responsive images that render automatically based on the device capabilities and screen size. To do this, we have embeded into our javascript file a function that pulls the correct images, should they exist from the data- attribute of the image and replace the source. So that we don't force mobile devices to pull double the number images we leave the src empty in the rendered code. Then the javascript loads the correct image size.

Code

<img src="" data-desktop="desktop.png" data-retina="desktopx2.png" data-mobile="mobile.png" data-mobile-retina="mobilex2.png" />
1:1 Image Sizes

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

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.

OtherImage

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

Details

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.

Code

.background-resize {
    background-image: url(@url);
    background-image: none\9;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
        src=@url,
        sizingMethod='scale');  
    background-size: @width @height;
}