How to Use HTML Picture Tag

Imagine you have this awesome picture you drew. It’s big and detailed — perfect for a big canvas. However, you want to share it on a small postcard, so you need a simpler version. That’s exactly what the picture tag allows you to do.

With the HTML picture tag, you can present the best version of your image based on where it’s being viewed, whether that’s a huge monitor or a smartphone screen. Let’s explore how you can use this tag so your images always look their best.

What is the picture element in HTML?

The picture element in HTML is a way to tell the browser, “Hey, I’ve got a bunch of versions of this image in different sizes or resolutions. Pick the best one for the user’s device.”

Let’s say I have a website with a banner image. On a big desktop screen, I want a high-resolution image for sharpness. However, on a smartphone, that same image could slow down the site and look pixelated. That lag could be detrimental, especially when 53% of mobile users leave a site if it takes longer than 3 seconds to load.

The picture element solves this by letting me upload different versions of the image. The browser then picks the most suitable one. You can optimize images for quick loading, reducing bounce rates and keeping users engaged.

Here’s how you use the HTML picture tag.

 <picture>
  <source srcset="https://blog.hubspot.com/image-large.jpg" media="(min-width: 1200px)">
  <source srcset="https://blog.hubspot.com/image-medium.jpg" media="(min-width: 600px)">
  <img src="https://blog.hubspot.com/website/image-small.jpg" alt="Description">
</picture>

There are two parts of this code:

• <source>: You list different image versions and conditions when to use them.
• <img>: This is the default image if none of the source conditions match.

In a nutshell, the picture element is a powerful tool for managing images, providing a tailored user experience across devices, and optimizing website speed. It’s all about presenting the right picture for the right frame!

The HTML Picture Tag in Action

Image Source

On Priceline.com, the picture element could be employed for showcasing hotel room images. Here’s a how it would look in HTML:

 <picture>
  <source srcset="https://blog.hubspot.com/hotel-room-large.jpg" media="(min-width: 1200px)">
  <source srcset="https://blog.hubspot.com/hotel-room-medium.jpg" media="(min-width: 600px)">
  <img src="https://blog.hubspot.com/website/hotel-room-small.jpg" alt="Hotel room view">
</picture>

When accessing Priceline.com on a large desktop screen, a high-resolution image of the hotel room is displayed (https://blog.hubspot.com/hotel-room-large.jpg). On a tablet, a slightly lower resolution but still clear image (https://blog.hubspot.com/hotel-room-medium.jpg) is shown. On a smartphone, a smaller yet quick-loading image (hotel-room-small.jpg) is displayed, ensuring a seamless user experience.

The picture element optimizes the visual representation of hotel rooms according to the user’s device. As a user, I appreciate this approach because it means I can quickly get an idea of the room’s ambiance and amenities without frustratingly long loading times.

Using the HTML Picture Tag

The picture element in HTML serves as a versatile tool for providing tailored visual experiences on websites. As a user, this means I can enjoy faster loading times while still appreciating high-quality visuals.

This approach allows for user-centric design and a seamless journey through the website. It’s a testament to how thoughtful web development, tailored to user needs, can enhance the overall appeal of a site.