Table of Contents

HTML <picture> Element

HTML Picture Element allows us to display different pictures for different devices/ screen sizes. The picture element has one or more <source> elements, where each element referring to different images through the srcset attribute. The browser then decides which is the best image that fits the users device perfectly.

In an Example below we have added three different images in three different formats:

Example

<picture>
  <source media="(min-width: 650px)" srcset="img_ship.jpg">
  <source media="(min-width: 465px)" srcset="img_laptop.jpg">
  <img src="img_cup.jpg">
</picture>

How to Provide Different Sized Versions of the Same Image ( Create Responsive Images)

So far we have learnt how you can display different images for different devices/ screen sizes. Now let’s see how you can provide the different sized versions of the same image. To do that we are gonna use CSS.

In an Example below first let’s write a simple HTML code:

Example

<!DOCTYPE html>
<html>
<body>
<img src="ocean.jpg" alt="Ocean" class="responsive">
</body>
</html>

Now we are going to add CSS to make an image both up and down on responsiveness

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.responsive {
  width: 100%;
  height: auto;
}
</style>
</head>
<body>

<h1>Responsive Images</h1>

<img src="ocean.jpg" alt="Ocean" class="responsive">

</body>
</html>

Next

Images in HTML

HTML map Tag

HTML Elements

HTML Picture Element – crus4