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>

Lesson File

Responsive Image Lesson File

# Art Direction

# Preamble

# Picture and Source Elements

# Basic Example

# Resolution Switching Example

# Lesson File

# References