XQA
Back to JavaScript
2025-12-197 min read

The Picture Element (JavaScript)

Learn The Picture Element (JavaScript) step by step with clear examples and exercises.

Title: The Picture Element (JavaScript) - A full guide

Why This Matters

The ` element is an essential tool for web developers, particularly when working with responsive images. It allows you to serve the most suitable image based on various factors such as screen size, device capabilities, and user preferences. By using the ` element in JavaScript, you can create dynamic, adaptable image solutions that cater to different devices and provide an enhanced user experience.

Prerequisites

To fully understand this lesson, you should have a solid grasp of:

  1. HTML basics, including elements, attributes, and the document object model (DOM)
  2. CSS properties related to images like width, height, max-width, and max-height
  3. JavaScript fundamentals such as variables, functions, events, and the Document Object Model (DOM) manipulation
  4. Understanding of media queries for responsive design
  5. Familiarity with modern browser capabilities and their support for the `` element

Core Concept

The `` element is an HTML container that allows you to serve multiple images based on specific conditions. It consists of several child elements:

  1. The `` element defines the image sources and their corresponding media attributes, which determine when each source should be used.
  2. The default fallback image is placed within the ` element as a last resort if none of the specified ` images can be displayed.

Syntax

<picture>
<source media="(min-width: 640px)" srcset="large.jpg">
<source media="(min-width: 320px)" srcset="medium.jpg">
<img src="small.jpg" alt="Description of the image">
</picture>

In this example, if the viewport width is greater than or equal to 640 pixels, the browser will load large.jpg. If it's between 320 and 639 pixels wide, it will load medium.jpg, and if neither condition is met, it will fall back to small.jpg.

Dynamic Image Serving with JavaScript

By using JavaScript in combination with the `` element, you can create dynamic image solutions that adapt to different devices and user preferences. This can be achieved by manipulating the DOM to add or remove sources based on various factors such as screen size, device capabilities, or even real-time data.

Worked Example

Let's create a simple JavaScript example that dynamically changes the image based on the user's screen size and browser capabilities.

  1. First, we'll create our HTML structure with an empty `` element and three images as sources:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Picture Element Example</title>
</head>
<body>
<picture id="myPicture"></picture>
<!-- Add three images as sources -->
<!-- ... -->
</body>
</html>
  1. Next, we'll add JavaScript to manipulate the DOM and set the appropriate source based on the screen size and browser capabilities:
// Get the picture element
const picture = document.getElementById('myPicture');

// Define sources with media attributes and fallback image
const sources = [
{
src: 'large.jpg',
media: '(min-width: 640px)',
type: 'image/jpeg' // (Optional) Specify the image type for modern browsers
},
{
src: 'medium.jpg',
media: '(min-width: 320px)',
type: 'image/jpeg' // (Optional) Specify the image type for modern browsers
},
{
src: 'small.jpg',
media: 'all',
type: 'image/jpeg' // (Optional) Specify the image type for modern browsers
}
];

// Add event listener for resize events and browser capabilities check
const updateImage = () => {
// Check if browser supports the <picture> element
if (!('pictureElement' in document)) return;

sources.forEach(source => {
const matches = window.matchMedia(source.media).matches;

// Loop through all <source> elements and remove them if they don't match the current screen size or browser capabilities
const sourcesInPicture = picture.getElementsByTagName('source');
Array.from(sourcesInPicture).forEach(existingSource => {
existingSource.parentNode.removeChild(existingSource);
});

// If the current source matches the screen size and browser capabilities, add it as a new <source> element
if (matches) {
const newSource = document.createElement('source');
newSource.src = source.src;
newSource.media = source.media;
newSource.type = source.type; // (Optional) Specify the image type for modern browsers
picture.appendChild(newSource);
}
});
};

// Add event listener for resize events and initial browser capabilities check
window.addEventListener('resize', updateImage);
updateImage();

In this example, the JavaScript code listens for resize events and updates the `` element's sources accordingly. When the screen size changes or the browser is updated, it removes any existing sources that don't match the new screen size or capabilities and adds a new source that does match.

Common Mistakes

  1. Forgetting to set the fallback image: If you forget to include an `` element as a fallback, users on devices or browsers that cannot load any of the specified sources will see a broken image placeholder.
  2. Using incorrect media attributes: Ensure your media attributes are specific enough and correctly target the intended screen sizes or device capabilities.
  3. Forgetting to call updateImage() on page load: If you don't call the function that sets the initial image, users may see an incorrect image until they resize their browser window or refresh the page.
  4. Incorrectly handling multiple media attributes: Be aware of how browsers prioritize sources with overlapping media attributes and ensure your fallback image is always included as the last source.
  5. Neglecting to test across different devices, screen sizes, and browsers: Always test your `` implementation on various devices, screen sizes, and browsers to ensure it behaves as intended.

Subheadings under Common Mistakes

  • Incorrectly handling multiple media attributes with overlapping ranges
  • Failing to account for browser compatibility issues
  • Neglecting to set a fallback image for older browsers or devices without support for the `` element

Practice Questions

  1. Implement a responsive `` element that serves an image optimized for tablets (768px wide) and another for desktops (1024px wide).
  2. Modify the worked example to include a fourth source for mobile devices with a screen width of 360 pixels or less.
  3. Create a JavaScript function that sets the src attribute of an ` element based on the user's screen size without using the ` element.
  4. Implement a solution to serve different images for high-DPI displays (retina) compared to standard displays, using both the `` element and JavaScript.
  5. Create a responsive `` element that serves an image optimized for portrait mode on mobile devices with a screen width of 360 pixels or less.

FAQ

  1. Can I use the element with non-image files like videos or audio clips?

Yes, you can use the ` element with various media types such as video and audio by specifying the appropriate file format and media type in the srcset` attribute.

  1. What happens if none of the specified sources match the current screen size?

If none of the specified sources match the current screen size, the browser will fall back to the default image defined within the `` element.

  1. How do I serve different images for high-DPI displays (retina) compared to standard displays?

To serve higher resolution images for retina displays, you can use the x and 2x suffixes in your source filenames. For example: image.jpg, image@2x.jpg. The browser will automatically select the appropriate image based on the device's pixel density.

  1. Can I use JavaScript to dynamically change the sources of a element?

Yes, you can manipulate the DOM to add, remove, or modify ` elements within a ` element using JavaScript. This allows for dynamic image serving based on factors like user preferences or real-time data.

  1. What is the fallback mechanism when using the element?

The fallback mechanism for the ` element is the element within the container. If none of the specified sources can be loaded, the browser will display the image defined in the ` element as a last resort.

  1. Is it necessary to include the element with a media attribute that matches the default fallback image?

No, it is not necessary to include a `` element with a media attribute that matches the default fallback image. The browser will automatically use the fallback image if no other sources match the current screen size or device capabilities. However, including such a source can help ensure better performance by reducing the number of requests made to the server.

  1. How does the element handle multiple sources with overlapping media attributes?

Browsers prioritize sources based on their specificity and the order they appear in the HTML document. The browser will first attempt to match the most specific source, then fall back to less specific sources if necessary. To avoid unintended behavior, ensure that your media attributes are well-defined and that the fallback image is always included as the last source.

  1. What is the recommended order for defining sources in a element?

It's best practice to define sources with the most specific media attributes first, followed by less specific ones, and finally the fallback image. This helps ensure that the browser selects the most appropriate source while minimizing the number of requests made to the server.

  1. Can I use JavaScript to dynamically change the srcset attribute of an element?

Yes, you can dynamically change the srcset attribute of an ` element using JavaScript by manipulating its DOM properties. This allows for dynamic image serving based on factors like user preferences or real-time data without using the ` element.

The Picture Element (JavaScript) | JavaScript | XQA Learn