Published on

Art Direction: Showing different images per device

Authors

It comes a time on the design process were using the same image for desktop and mobile devices doesn't work. Using a wide hero image on the desktop may look nice, but when you go to a mobile device, the details on the image get lost, and the products are barely visible, not to mention that text might be too small to be read properly. That's when Art Direction comes into play.

Let's look at the following example:

Art direction not applied to website

How to fix this? Using Art Direction

Art Direction will allow you to communicate successfully with your audience, depending on their device screen size. You can specifically choose to focus on some aspects of your image that might lose detail on smaller devices.

We need to identify which elements we want to focus on and that we will need to re-order.

Choosing which elements to optimize for

Enlarge those elements and change the image aspect ration to fit mobile devices better. Initially, we used an image that was 2400x800px.

The new image for mobile will be 1800x1200px. It will have a more squared aspect ratio. After applying the changes, the new design looks like this:

Edited image

Art Direction: The Result

Different image sources for mobile and desktop, generate a more personalized experience depending on the user device. Comparing the two devices side to side, we can see how things have improved.

Comparing results on art direction

Here is the comparison between the two devices.

Art direction applied to website

How to change your code to use multiple image sources

Originally you will have the following HTML code on your hero image.

<img src="backpack-desktop.jpg" />

You'll need to add the element to be able to pick different sources for your image.

Then you'll define what the different screen sizes are and what image source to use on those screen sizes.

<picture>
  <source media="(max-width: 799px)" srcset="backpack-mobile.jpg">
  <source media="(min-width: 800px)" srcset="backpack-desktop.jpg">
  <img src="backpack-desktop.jpg" />
</picture>

In this case, when the screen size is smaller than 799px then the image for mobile will load instead of the desktop one. The img tag inside at the end is there because some browsers might not be compatible with the picture element.

Here is a list with the compatible versions of each browser.

To learn more about the specification of the picture element click here

Optimizing them

You can manually optimize your images using resizeimages.com, or you can use a service like ours.

Using Piio

Let's first take a look at the original picture element

<picture>
  <source media="(max-width: 799px)" srcset="backpack-mobile.jpg" />
  <source media="(min-width: 800px)" srcset="backpack-desktop.jpg" />
  <img src="backpack-desktop.jpg"/>
</picture>

To use Piio on the picture element, we will need to set a transparent gif on the secret attribute and then set the URL of the image in the data-piio attribute.

<picture>
  <source
    media="(max-width: 799px)"
    data-piio="backpack-mobile.jpg"
    srcset="data:image/gif;base64,R0lGODlh..." />
  <source
    media="(min-width: 800px)"
    data-piio="backpack-desktop.jpg"
    srcset="data:image/gif;base64,R0lGODlh..." />
  <img
    data-piio="backpack-desktop.jpg"
    src="data:image/gif;base64,R0lGODlh..."/>
</picture>

If you want to learn more about web performance, continue reading here!