As we previously saw, the image (img) tag is easy to use, however, as more and more people view websites on tablets, phones, and other devices besides a computer, we have to be mindful of how images will appear to those users.

In CSS we can use responsive design, which adjusts the layout based upon the screen resolution. However we can’t necessarily specify the image to be used in CSS. We can change the size, but we don’t want to download a large image and resize it, especially on a mobile network.

Therefore, we use the picture tag where we can specify different images based upon the screen resolution of the user. This gives the web developer more flexibility when designing the page, and selecting the image.

To use the <picture> tag, you will have several required children tags. First, is a <source> tag. One or more of these will be used, and you will have your final <img> tag which is used like a standard image tag. The <img> tag should be the last one in the list of child tags, and is used for backward compatibility in case the browser doesn’t understand <source> tags.

<source> tag

The <source> tag is used to define what the image source will be, since we will be listing multiple images. There are multiple attributes to the source tag, but these are the ones you’ll use most often.

  • srcset (required) – defines the URL of the image that will be displayed
  • media – accepts any valid media query that would normally be defined in a CSS eg: media=”(min-width: 465px)”

Based upon the source attributes, the browser will pick the best option and ignore other source options to display.

The source tag can be used for other tags as well, and has other attributes to assist when it is being used for video or audio applications, however, we’re going to focus on the image usage here.

<picture>
    <source media="(min-width: 650px)" srcset="large_flowers.jpg">
    <source media="(min-width: 465px)" srcset="medium_flower.jpg">
    <img src="small_flowers.jpg" alt="Flower Arrangement">
</picture>

Picture Tag was originally found on Access 2 Learn

Assistant Professor

Walter Wimberly is an Assistant Professor at a regional college in Tennessee, teaching Computer Science in the Software Engineering track. He works as a student advisor, oversees curriculum changes, develops new courses, and manages the advisory panel.
Walter taught full time for about 7 years, before going back into “industry” as a full stack Software Developer for a dozen years. There he focused on web based projects coding in JavaScript/jQuery and utilizing the Bootstrap CSS Framework on the front-end, and coding in PHP, ASP/ASP.Net, SQL on the back-end.

Since he loves teaching, he taught as an adjunct web and digital media classes for eight (8) years, while working in industry, and has since returned to teaching full time.

He has been married for over 25 years, and is father to several special needs boys. As such, he is working on some projects to help others who have special needs to be self-sufficient, and support the care givers of those with special needs. Check out his Autism blog for more info.

Similar Posts

Working with the Limitations of the Mobile Web – User/Design Limitations

ByWalter Wimberly

Previously we’ve talked about network limitations for mobile devices, and limitations in the mobile device itself. Now we will look at the limitations of the user/design aspect. No Hover State The hover state allows users to know where they are going to click. It provides a very simple method to give visual feedback to the…

Bootstrap Panels

ByWalter Wimberly

Panels are similar to Bootstrap alerts, but on steroids. Instead of a simple line or two of text, a panel will include a header section, as well as a body. This will give it a more prominent look that will allow it to stand out. You can have more than just a line of text….