Learn-WebDevelopment.com home page Learn-WebDevelopment.com

Art Direction

Open the lesson folder

In our starter files, open the index.html page from this lessons folder:

> 5.Art-direction

Included images

Previous examples have mainly focused on device width and resolution. Now we are going to look at another great use for the picture element, and this is to change the art direction.

All of our images so far have just been different sizes. It is great to have smaller and larger versions of the same image. But sometimes certain images may not suit a certain screen size.

What is art direction?

This is where we can take advantage of art direction. This involves changing images to suit the display.

In this lesson's folder you will find the index.html file, and also two images to use:

lesson folder structure

First, the jump-landscape.jpg:

landscape image

This shows a person jumping and a wide landscape background. This may look good on a larger monitor where we can see all of the detail.

If we had this on a small phone size device, since the person takes up only a small percentage of the total width, the focus point of the person may be really small.

Instead of supplying a smaller version, it may be better to provide a cropped version of the focus point, like the jump-portrait.jpg:

portrait image

This is the same image but it has been cropped to be portrait, removing a lot of the background scenery and focusing on the person.

Example

Let’s try this out in the index.html file:

<picture>
  <source media="(max-width: 799px)" srcset="images/jump-portrait.jpg" />
  <source media="(min-width: 800px)" srcset="images/jump-landscape.jpg" />
  <img src="images/jump-landscape.jpg" />
</picture>

Before we test this, since we don’t have multiple sizes of these images, we can also set the width of the images to be 100%:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Art direction</title>
    <!-- set image width -->
        <style>
            img {
                width: 100%;
            }
        </style>
    </head>

Test this out by changing the size of the browser to switch images.

This art direction really gives us something to think about to try and put the focus onto a part of the image, or to make sure we are not making a key part too small.

The Picture ElementImage Types and Compression