Skip to main content

Image handling

Images are a major element in modern web sites. MWF deals with images to allow maximum flexibility within the design guidelines for Microsoft web sites.


Tools

MWF includes multiple tools for presenting images. These include general use MWF components and specialized MWF modules. The following list of components and modules involve the use of images.

Imaging components & modules



Reactive imaging

A key part of the MWF strategy for reactive behavior is to provide appropriate image sizes and resolutions for any viewport size. This is accomplished by using the HTML 5 picture element with the srcset and media attributes. But there are still browsers being used in the wild that do not fully support the picture element. MWF uses the Picturefill JavaScript library to provide support for the picture element and its associated features in browsers that do not support them.

Picturefill.js is one of the JavaScript dependencies that supports imaging in MWF (see Exploring CDN and Scripting for more information). It is usually bundled with the MWF JavaScript library distribution (although there are special distributions where dependencies are excluded). Its purpose is to make sure that the HTML 5 picture element and its associated attributes work correctly even if the browser is not fully HTML 5 compatable.

How it works

The picture element provides multiple images (instead of one) that are designed to more effectively fit a browser viewport of any size. This lets you avoid the imperfect process of having the browser resizing a single image up or down to fit the viewport. Instead, this works by having the picture element hold two different child elements: 1 source element for each version of the image and 1 img element. The source element defines the URL of the image to show for a given viewport size. The browser loads the most appropriate image by using the first one that matches the detected viewport size. Here is an example using placeholder images:

HTML

<div class="m-image">
    <picture class="c-image">
        <source srcset="http://placehold.it/2048x600/2F2F2F/171717" media="(min-width: 1779px)">
        <source srcset="http://placehold.it/1778x600/2F2F2F/171717" media="(min-width:1400px)">
        <source srcset="http://placehold.it/1399x600/2F2F2F/171717" media="(min-width:1084px)">
        <source srcset="http://placehold.it/1083x500/2F2F2F/171717" media="(min-width:768px)">
        <source srcset="http://placehold.it/767x400/2F2F2F/171717" media="(min-width:540px)">
        <source srcset="http://placehold.it/539x300/2F2F2F/171717" media="(min-width:0)">
        <img srcset="http://placehold.it/1399x600/2F2F2F/171717" src="http://placehold.it/1399x600/2F2F2F/171717" alt="Placeholder with grey background and dimension watermark without any imagery">
    </picture>
</div>
    

The example above illustrates an image module. As with most MWP modules, there is a container element that is assigned the class for an image module (i.e. m-image). Its first child is a picture element and it is assigned the class c-image. The picture element has its own children: a set of source elements that define all of the images and the associated viewport size (i.e. media size) for each image, and an image element to hold the image. The image statement is assigned both the shource set's URL and the initial image's URL. This pattern is typical of all of the instances where you need to implement reactive imaging. The only variation is those rare instances where you will use a single image for all viewport sizes. In that case you only need to use an image component as shown here:

HTML

<img class="c-image" src="http://placehold.it/1900x540/2F2F2F/171717" alt="Placeholder with grey background and dimension watermark">
    

Or you could use an image module as shown here:

HTML

<div class="m-image">
    <img class="c-image" src="http://placehold.it/1900x540/2F2F2F/171717" alt="Placeholder with grey background and dimension watermark without any imagery">
</div>
    

When using an image set to implement reactive imaging, the images may be hosted on your own server or they may be hosted by an outside service. The same pattern applies in both circumstances.

Selecting images

The images that you use will be supplied by your design team. They use guidelines like those on the Illustration, Imagery - lifestyle, and Imagery - products pages. However, you will need to work with them to be sure that you have a full set of images available that fit the standard viewport sizes used as breakpoints for the MWF grid. You can find out more about breakpoints on the Grids in MWF page or the Grid design page.