Image
Use Image for photos, illustrations, logos, badges, product visuals, and other page graphics.
Content settingsβ
| Setting | What it controls |
|---|---|
| Image source | Upload, select, or replace the image. |
| Alt text | Description for accessibility and image context. |
| Link or action | Optional destination when the image should be clickable. |
| Lazy load | Delays loading when the image is not immediately needed. |
Style settingsβ
| Style area | What you can adjust |
|---|---|
| Size | Width, height, max width, fit, and responsive values. |
| Alignment | Left, center, right, or full-width placement. |
| Image style | Border, radius, shadow, opacity, and hover state. |
| Spacing | Margin, padding, and responsive spacing. |
| Animation | Motion or entrance effects when available. |
Best practicesβ
- Compress images before upload.
- Add alt text when the image communicates meaning.
- Use lazy load for below-the-fold images.
- Check mobile sizing after replacing images.
Testing notesβ
- Preview the page after replacing the image source because aspect ratio changes can affect the section height.
- Check that clickable images open the intended link or action.
- Compare desktop and mobile sizing so important parts of the image are not cropped.
FAQβ
When should I use the Image element?
Use it for photos, product visuals, logos, badges, illustrations, and other standalone graphics that need responsive sizing and style controls.
What should I configure before publishing an image?
Review the image source, alt text, optional link or action, lazy load setting, width, height, fit, alignment, border, radius, shadow, hover state, and responsive sizing.
When should I add alt text?
Add alt text when the image communicates meaning, such as product details, proof, badges, or instructions. Decorative images can use empty or minimal alt text depending on the page setup.
What should I check if an image looks distorted?
Check the image dimensions, fit mode, width, height, max width, and responsive values. Re-uploading an image with the right aspect ratio often fixes cropping or stretching.