The picture element for art direction

The picture element for art direction


PETE LEPAGE: You’ve
found the perfect image for your responsive site. It looks great on
desktop but loses its awe when viewed on a phone. Between the change in
orientation and the smaller screen, all of the fine detail
becomes impossible to see. Displaying different images
based on device characteristics is called art direction. And the picture element was
designed exactly for this. Inside is a list of source tags. Each source tag includes a
set of rules and the image to use when those rules are met. You also need to
include an image tag. The browser enumerates
the list of sources and checks the rules. As soon as it gets a match,
it’ll use that image. If no source tags are matched
or if picture isn’t supported, the browser uses the
image tag– perfect for backwards compatibility. Let’s take a look
at this in action. The first source tag
specifies a media query and checks if the browser
width is over 800 pixels. If it is, the full
size image is used. But if the first source
tag was not matched, the next one is checked,
testing if the browser width is greater
than 400 pixels. If it is, the browser
will use that image. When the browser width
is less than 400 pixels or the picture element
isn’t supported, the browser uses the image
specified by the image tag. Styling the picture
element is done by applying CSS to the image
tag, not the picture element itself. This is also where you
should specify the alt text and any other
attributes that are needed. There you go. You now know how
to use the picture element for art direction. The picture element is
only supported natively in Chrome 38. But other browser vendors have
committed to implementing it. You can use it knowing that
you won’t break older browsers or grab Picture Fill, a library
for supporting older browsers.

Only registered users can comment.

Leave a Reply

Your email address will not be published. Required fields are marked *