Image Elements

Site Designer gives you three ways to add images to a page — the Image element, the Picture element, and background images via the Style pane. Knowing when to use each one leads to faster pages and better accessibility.

Image element

The Image element creates a standard HTML <img> tag. It is the right choice for any image that is part of your content — product photos, team portraits, illustrations, logos in articles, and anything else that a visitor would miss if the image failed to load.

Inserting an image

1. Drag from Resources

   Open the Resources Manager and drag any image from the Images tab directly onto the canvas. Site Designer creates an <img> element linked to that asset automatically.

2. Or drag the element first

   Drag an Image element from the Elements panel onto the canvas. An empty placeholder appears. Click Choose Image in the Content pane and select from your Resources library or upload a new file.

Alt text — required

Select the Image element, open the Content pane, and fill in the Alt text field. This text is read aloud by screen readers and displayed when the image fails to load.

Good alt text describes the image’s content and purpose: "Three developers collaborating at a standing desk".

Decorative images that convey no information should have an empty alt="" attribute — this tells screen readers to skip the image entirely. You set this in the Content pane by clearing the alt field and checking the Decorative image toggle.

Lazy loading

By default, Site Designer applies loading="lazy" to all images below the fold, deferring their download until the visitor scrolls near them. For images that appear above the fold (in the hero section), select the image, open the Content pane, and set Loading to eager to ensure they download immediately.

Optimizing images before upload

Oversized images are the single biggest cause of slow page loads. Before uploading:

• Maximum recommended dimensions: 3000 px wide for full-bleed images, 1200 px for content images
• Maximum recommended file size: 2 MB (aim for under 300 KB for photos)
• Format guide: Use WebP for photos (smaller than JPEG at same quality), SVG for logos and icons, PNG only when you need transparency without quality loss

Picture element

The Picture element creates an HTML <picture> tag with <source> children and an <img> fallback. It lets the browser choose the most appropriate image based on screen size and supported format — more control than a plain <img>.

Use the Picture element when you need:

• Art direction: A wide, landscape-cropped image on desktop and a tighter, portrait-cropped version on mobile
• Format switching: Serve WebP to browsers that support it, JPEG to those that don’t
• Resolution switching: Serve a 2× image to retina screens, a 1× image to standard screens

Setting up a Picture element

1. Insert the Picture element

   Drag a Picture element from the Elements panel onto the canvas.

2. Set the fallback image

   The <img> inside the Picture element is the universal fallback. Assign it an image and alt text exactly as you would with a plain Image element.

3. Add sources

   In the Content pane, click Add Source. Each source has a media query (e.g., (min-width: 768px)) and an image to serve when that query matches. Browsers evaluate sources top to bottom and use the first match.

Background images

Background images are not a separate element type — they are a CSS property applied to any container. To set a background image:

1. Select any container element (Section, Container, etc.) on the canvas.
2. Open the Style pane on the right.
3. Scroll to Background and click the image swatch.
4. Choose an image from Resources or upload one.
5. Set Size (cover fills the container, contain shows the whole image), Position, and Repeat as needed.

Image vs. background-image: when to use which