---
title: "Image element"
date: "2017-11-12T10:06:33+00:00"
summary: "Add stunning visuals to your layout with the Image element. Learn how to insert, customize, and optimize images for responsive design. Discover alignment options, lazy loading, and more."
image:
type: "page"
url: "/drupal-starter-kits/add-ons/site-studio/image-element"
id: "3a6fa7dc-0a2a-4b16-8b53-0b134d772502"
---

Table of contents will be added

Use the Image element to add an image <img> to your layout.

Important

The image <img> element does not support true responsive images. The image can be set to scale to each breakpoint but the same image file will be served to each. If you require a different image to be served to each breakpoint, use the Picture <picture> element.

Locating the Image element
--------------------------

To find the Image 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 Image element.

![98a998a3-image.png](https://acquia.widen.net/content/1c5be856-c372-43c5-846f-4c92658e6dd1/web/98a998a3-image.png)

The Image element includes the following fields:

Image
-----

*   **Image** - Select the image to use
*   **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. 

Image size and alignment
------------------------

*   **Image display size** - Set the image to Responsive (Scale to its parent container) or Actual size
*   **Image alignment** - Set the alignment of the image. Only available to 'Actual size' images.
    *   Float left - Floats the image left. Other elements and text will wrap around the image
    *   Float right - Floats the image right. Other elements and text will wrap around the image
    *   Align left - Aligns the image to the left of the parent element
    *   Align centre - Aligns the image to the centre of the parent element
    *   Align right - Aligns the image to the right of the parent element

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

*   **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** - 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.](https://sitestudiodocs.acquia.com/6.0/user-guide/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](https://sitestudiodocs.acquia.com/6.0/user-guide/adding-comments-element "Adding comments to an element").