Lesson 38: Pictures

Overview

In this HTML lesson, we demonstrate how to use a picture element to vary an image that is displayed based on the conditions in the environment. For example, if the web page is being displayed on a small device, like a phone, we might want to use a small image in the web page. On a full-sized computer screen, we might want to use a larger image. Picture elements allow us to select an image this way. They also provide us with many other properties that we can consider for varying images, like the aspect ratio, color properties, device type, etc. All of these make pages customizable to a wide variety of devices.

Swapping Images Based On Width

This first example demonstrates how an image can be set by the width of the page in which it is displayed. The main html file contains a picture element that contains a source and an image element. The source element is set up to display a larger version of the annuciation when the page that it is displayed in is 350 or more pixels wide. If the page is less than 350 pixels wide, the smaller image in the image element is displayed. In this way, the same picture element can be set to display either one of the two images.

The 350 pixel width condition is set by the media attribute in the source element. The value (min-width:350px) tells the browser to use the associated image when the page is 350 pixels or more wide. To demonstrate this, we have included this page in two iframe elements that are 200 and 400 pixels wide, respectively. So, the smaller iframe displays the smaller image from the image element and the larger iframe displays the larger image from the source element.

Example1.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <picture>
      <source media="(min-width:350px)" srcset="SchendalLarge.png">
      <img src="SchendalSmall.png" alt="Annunciation">
    </picture>
  </body>
</html>

IFrame1.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <iframe src="Example1.html" style="width:200px;height:500px;">
    </iframe>
    <iframe src="Example1.html" style="width:400px;height:500px;">
    </iframe>
  </body>
</html>

Output

Varying a Set of Images Based On Width

We can swap more than two imagees in one picture element. In this example, we use four images of "Jesus in the Temple" and three source elements to set these images based on whether the page is 1000 or more pixels wide, 800 to 1000 pixels wide, 400 to 800 pixels wide, or less than 400 pixels wide. This is acheived by listing the more restrive sources first. To demonstrate this, we have put the page inside a resizable iframe element. To see the image change, drag the bottom, right corner to change the width of the iframe.

Example2.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <picture>
      <source media="(min-width:1000px)" srcset="JesusInTheTempleLarge.png">
      <source media="(min-width:800px)" srcset="JesusInTheTempleMedium.png">
      <source media="(min-width:400px)" srcset="JesusInTheTempleSmall.png">
      <img src="JesusInTheTempleTiny.png" alt="Jesus in the Temple">
    </picture>
  </body>
</html>

IFrame2.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <iframe src="Example2.html" style="width:300px;height:200px;resize:both;">
    </iframe>
  </body>
</html>

Output

Varying the Image Size without a Picture Element

In this example, we demonstrate that a resizable image can be created with just an image element and the width specification. Again, we use the resizable iframe to demonstrate resizing. This shows that resizing can be done without a picture element. However, the picture element can do more than just resize an image.

Example3.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <img src="JesusInTheTempleLarge.png" alt="Jesus in the Temple" style="width:100%;">
  </body>
</html>

IFrame3.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <iframe src="Example3.html" style="width:300px;height:200px;resize:both;">
    </iframe>
  </body>
</html>

Output

Varying Images Based on Aspect Ratio

This fourth example uses three images and sets the image based on the aspect ratio. The thinnest image of the "Divine Mercy" is used when the aspect ratio is less than or equal to 2/3. The widest image of the "Last Supper" is used when the aspect ratio is greater than or equal to 5/3. The image of the "Sermon on the Mount" is used for the values in between. Again, these are demonstrated via the resizable iframe element.

Example4.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <picture>
      <source media="(max-aspect-ratio:2/3)" srcset="DivineMercy.png">
      <source media="(min-aspect-ratio:5/3)" srcset="TheLastSupper.png">
      <img src="TheSermonOnTheMount.png" alt="The Sermon on the Mount">
    </picture>
  </body>
</html>

IFrame4.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <iframe src="Example4.html" style="width:300px;height:200px;resize:both;">
    </iframe>
  </body>
</html>