| Interactive Media Design

Art Direction

Preamble

The art direction problem is different than resolution switching. With resolution switching we’re really trying to serve up the same image each time but at resolutions that make sense for the user and device.

Art direction seeks to serve different images depending on the display. Think in terms of a phone in portrait mode vs a desktop browser in full screen mode. Different sizes, orientations, aspect ratios etcetera. A full width photo that looks great on a desktop likely won’t have the same effect on a phone in portrait mode. It will be significantly smaller and if you’re promoting a product or service, you want it front and centre for the user.

Picture and Source Elements

Enter the <picture> and <source> elements.

The <picture> element is essentially a container for <source> elements. <source> elements represent conditional image choices and also provide help for resolution switching.

Implementation of <source> elements should look familiar. They’re not much different than <img> elements.

Basic Example

<picture>
    <source srcset="img/art/landscape/lego_landscape_960.png"
            media="(min-width: 640px)" />

    <source srcset="img/art/square/lego_square_640.png"
            media="(min-width: 480px)" />

    <source srcset="img/art/square/lego_square_480.png"
            media="(min-width: 320px)" />

    <img class="orig-img"
         src="img/art/square/lego_square_480.png"
         alt="Picture of something from the internet">
</picture>

Resolution Switching Example

<picture>
    <source srcset="img/art/landscape/lego_landscape_960.png,
                    img/art/landscape/lego_landscape_1440.png 1.5x,
                    img/art/landscape/lego_landscape_1920.png 2x"
            media="(min-width: 640px)"/>

    <source srcset="img/art/square/lego_square_640.png,
                        img/art/square/lego_square_960.png 1.5x,
                        img/art/square/lego_square_1440.png 2x"
            media="(min-width: 480px)"/>

    <source srcset="img/art/square/lego_square_480.png,
                        img/art/square/lego_square_720.png 1.5x,
                        img/art/square/lego_square_960.png 2x,
                        img/art/square/lego_square_1440.png 3x"
            media="min-width: 320px)" />

    <source srcset="img/art/portrait/lego_portrait_320.png,
                        img/art/portrait/lego_portrait_480.png 1.5x,
                        img/art/portrait/lego_portrait_640.png 2x,
                        img/art/portrait/lego_portrait_960.png 3x"
            media="(max-width: 319px)" />

    <img class="orig-img"
         src="img/art/square/lego_square_960.png"
         alt="Life size person built from grey Lego bricks standing
              next to partially completed lego people">
</picture>

Important

While adding source tags with min-width media queries, the largest media should be at the top followed by the smaller values. Ex. min-width: 960px should come before min-width: 640px should come before min-width: 320px

In case of max-width media queries the order will be reversed, smaller value should be on the top. Ex. max-width: 320px should be on top followed by max-width: 640px followed by max-width: 960px

References