---
title: "Picture element"
date: "2018-07-31T16:12:17+00:00"
summary: "Discover how to use the Picture element in Site Studio to display responsive images across breakpoints. Learn to configure image attributes, styles, and match heights for optimal visual presentation."
image:
type: "page"
url: "/drupal-starter-kits/add-ons/site-studio/picture-element"
id: "6d543a19-d210-4b82-be26-446f87a75590"
---

Table of contents will be added

Use the Picture <picture> element to display images at different sizes by breakpoint.

Locating the picture element
----------------------------

To find the Picture element: 

1.  Navigate to a component or a template with the Layout canvas
2.  Click the **+ button** on the Layout canvas
3.  Within the Elements tab, look for the Picture element.

![c4a97d77-picture.png](https://acquia.widen.net/content/8e3cee8c-430a-466f-89cd-cf1e4b9ac61f/web/c4a97d77-picture.png)

The Picture element includes the following fields:

Image attributes
----------------

*   **Title** - Add a title attribute
*   **Alt tag** - Add an Alt tag
*   **Lazy load** \- Set Lazy load to only load the image when required by the browser. 

Images
------

*   **Image** - Select the image to use
*   **Image display size**  - Set the image to Responsive (Scale to its parent container) or Actual size
*   **Drupal image style** - Apply a Drupal image style to the image. For more information, see [Drupal image styles here](https://www.drupal.org/docs/user_guide/en/structure-image-styles.html).

Image style
-----------

*   **Custom image style** - Apply an Image custom style to the image.

Match heights
-------------

*   **Match heights** \- Match the height of the element using
    *   **None** - Removes the match heights at the specific breakpoint
    *   **Class** \- Match the height of the element with another element with the same class name
    *   **Children with class** - Match the heights of any child elements with the same class name
    *   **Child element** - Match the heights of all child elements of the same type.

For more information on Match heights, see [Match the heights of elements.](/drupal-starter-kits/add-ons/site-studio/match-heights-elements "Match the heights of elements")

Comments
--------

*   **Add comments -** Add comments to the Element.  For more information, see [Adding comments to an element](/drupal-starter-kits/add-ons/site-studio/adding-comments-element "Adding comments to an element").