The Image element places a single image on your page. You choose the image from your Media Library, your Shopify files or Unsplash, then set how it loads, how big it is, how it's cropped and what happens when visitors hover over or click it.
Adding an image
Drag an Image element from the Content group of the Elements panel onto your page. An empty Image element shows a Select image button on the element and in the settings panel.
Select image opens the image picker.
Select image opens the image picker, with three tabs: Shogun (your Media Library, where you can also upload), Shopify (your Shopify files) and Unsplash (free photos). Click an image to use it. To learn more about uploading and managing images, see Leveraging the Media Library.
Choose an image from the Shogun, Shopify or Unsplash tab.
Images wider than 3000px are scaled down when you upload them; see What is the resolution of images uploaded in Shogun? Uploads larger than 5MB can time out and leave a broken thumbnail. If that happens, make the image smaller in an image editor and upload it again.
Once you've chosen an image, the Image source card shows its name, file size and dimensions, with buttons for Image details and Edit image. To swap the image, click the ✕ on the card, then Select image again.
The Image source card and the Performance settings.
Alt text
Alt text describes the image for screen readers and search engines. Click Image details to add or change it. If the image has none, the card shows This image is missing alt text, click to add.
Alt text is saved with the image in your Media Library, not with this element, so a change applies on every page that uses the image. Images from Unsplash come with Unsplash's own description as alt text. With AI alt text, available on some plans, uploads get alt text written for them; see Leveraging the Media Library.
Alt text is saved with the image, so it applies on every page that uses it.
Hover image
Click Add hover image (optional) to choose a second image that replaces the first when a visitor moves their cursor over it.
Links and lightbox
Turn on Image is clickable to link the image to another page, or to open it larger in a lightbox when a visitor clicks it.
Note: GIFs and other animated images can't open in a lightbox.
Placing content on an image
You can drop other elements, such as Text or a Button, onto an image to place them on top of it. Layered element vertical alignment (Top, Middle or Bottom) then sets where they sit. See How to create a text image overlay. Choose an image before adding content on top: without one, the content overlaps whatever is below it on the live page.
Performance
The Performance section controls how the image is delivered to visitors.
Image Quality sets how much the image is compressed.
Image Quality sets how much the image is compressed: ~30% (Lightest), ~45% (Lighter), ~55% (Normal, the default), ~66% (Better) or ~85% (Best). Lower quality means a smaller file that loads faster; higher quality keeps more detail.
Responsive image (on by default) sends smaller versions of the image to smaller screens, so phones don't download a desktop-sized file. Turn it off for animated GIFs.
Loading sets when the image loads: Eager loads it with the page, Lazy waits until the visitor scrolls near it, and Auto (the default) loads images that start within the first 700px of your page straight away and lazy-loads the rest.
Auto decides when you publish, so it's the same on every screen size. If the same image file is used near the top of the page and again further down, every copy loads straight away. See Lazy loading your Shogun images.
Size and shape
By default an image fills the width of the space it's in and keeps its own shape. The Dimensions section changes that:
Height and Min height set how tall the image is.
Max width stops the image getting wider than a set size.
Image fit sets how the image fills its box: Cover fills it and crops what doesn't fit, Contain shows the whole image and may leave space around it, and Stretch distorts the image to fill the box.
Aspect Ratio gives the image a fixed shape: Auto (recommended) keeps the image's own shape; the others are Widescreen (16:9), Mobile (9:16), Landscape (3:2), Portrait (2:3), Square (1:1) and Custom.
If you set a Height, Aspect Ratio is greyed out: the height decides the shape.
Aspect Ratio gives the image a fixed shape.
Cropping on the page
To crop an image without changing the file, choose an Aspect Ratio or set a Height, then choose Cover. Image position and Zoom appear: click a point on the grid to choose which part of the image stays in view, and drag Zoom to move in closer. Giving several images the same Aspect Ratio is the easiest way to make a row or slider of images line up.
With Cover and a fixed shape, choose which part of the image stays in view.
Editing the image file
Edit image opens the image editor. Choose a crop shape (16:9, 4:3, 1:1, 2:3 or Free) or enter a width and height in pixels, then zoom, move, rotate or flip the image, or reset your changes. Click Save when you're done.
Edit image saves a new copy in your Media Library.
Saving creates a new image in your Media Library and switches the element to it; the original image isn't changed. The element's Image Quality and Responsive image settings change when it switches, so check them after editing.
Different settings for each screen size
Settings apply to every screen size unless you change that. To change something for one screen size only, pick it in the top bar of the editor: Large, Medium, Small or Extra-small instead of the default All screen sizes. The canvas switches to that size, and the settings panel shows Editing for [size] screen sizes. Changes you make now apply only to that size. Settings marked with a small screen icon, such as Image Quality, always apply to every screen size; hover over the icon to check.
Pick a screen size in the top bar to change settings for that size only.
For example, you can give an image a 16:9 shape on large screens and a Square (1:1) shape on extra-small screens.
Style and other settings
Default style and Hover style set the opacity, border color, thickness and radius, and box shadow, normally and when a visitor hovers over the image. The image also has the usual Animations, Alignment, Spacing, Background, Borders, Visibility and Custom CSS sections.
Older Image elements
We only provide ongoing support for the current Image element. Older Image V2 elements keep working on your pages, but they won't get fixes or new features. To move to the current Image element, see Updating existing elements.
Pages built before the current Image element may still have Image V2 elements. When you select one, an upgrade icon shows in the Layout panel and at the top of the settings panel. Older images aren't upgraded automatically: add a new Image element next to the old one, choose the same image, then delete the old element.