Picchu

Images

Guidance

Having a consistent approach when creating images for web builds stronger connections and associations across all we do. All imagery featured on Microsoft.com should adhere to the Microsoft brand guidelines.

Images should convey one clear idea. They may be lifestyle photography, device-based photography, device renders, or illustration. Avoid creating images that are busy, confusing or merely decorative.

Keep images in one of 4 aspect ratios for use in site designs: 16:9, 16:11, 20:17, and 1:1 (square). This creates consistency across sites, and also provides the ability to reuse images. They can be vertical or horizontal, depending on need.

Full bleed images

For images that stretch across the entire browser width we recommend the height to be either 580 or 720, and a width of 1920.

How to author

Images that bleed browser edge-to-edge cannot be child to the default grid as they will be constrained to page-padding. Instead, position them outside two grids:

            
<section class="ms-grid">
    <div class="ms-row">
        <div class="col-1-1">
        </div>
    </div>
</section>

<img src="pagewideimageurl.jpg">

<section class="ms-grid">
    <div class="ms-row">
        <div class="col-1-1">
        </div>
    </div>
</section>
            
        

Responsive images

To create images for responsive web design, make sure you are creating the images that are to be saved for web at the largest viewport it will be used at. Do not scale images up via CSS in the browser so that image fidelity isn't lost.

Responsive images adjust depending on the viewport they are being displayed in. This means that an image in a column in tablet view, could be larger or wider then it was in desktop view (e.g. 6 column). Be sure your image assets are created at the largest possible width that the grid will display them as.

In cases where desktop images negatively affect network performance due to file size, you can load different image assets at a given breakpoint. This is not applicable for HPD (high pixel density) images.

HPD (high pixel density) images

Today's complex device landscape feature a wide range of screen pixel densities available. Some devices feature very high PPI (pixels per inch) displays, while others do not. The goal of HPD images is to load the highest resolution image as efficiently as possible. They are low quality JPG's, rendered at twice the resolution of the intended size.

There are two ways to save HPD images. 1) Scale up the image to 2x size and save out as JPG format, compression quality 15% or less. 2) Start with images 2x and save at the lowest compression.

Make sure the original asset is at least double the size you need. For example, a 1920x580 image needs to be up-scaled to 3840x1160.

Demo

See the Pen Image demo 1 by Microsoft.com (@microsoft) on CodePen.