Image
Image is an element that can be used to add, edit, and style images.
Image is distinct from a background image in that a background image is set on an element like a Section or a Div Block, while an Image is an element itself.
To add an Image on a page:
- Add an Image element on the Canvas that is drag it from the Elements panel or simply click on its name.
- Upload an Image that is double click on an Image on the Canvas and in the Image search window click on the Upload button or select an already uploaded image from the list.
In the image search window, you can sort images by type (SVG, PNG, JPG, GIF, WEBP) and search by name. The maximum size of an uploaded image is 64 MB.
You can apply various settings to an Image on the Settings tab in the right panel:
General
- Image preview
- Src attribute with a link to the image and its size data (width and height in pixels and size in kilobytes)
- Replace image button that opens the image search window
- Incoming size. Width (W) and height (H) of the image on the website after the project publication measured in pixels. By default, the width is 640px and the height is 480px. You can change the size of the image, as well as enable the width-to-height dependence by setting one of these properties (the other will adjust automatically to fit it).
Extra styles
Object fit determines how the Image element reacts to the height and width of the loaded image:
- Contain - scales the image so that it is completely displayed inside the Image element. This value also overrides any given width and height.
- Cover - scales the image to fill the entire element overriding any given width and height. The image may be cropped depending on the aspect ratio of the Image element, the screen size, and the image.
- Original - sets the original width and height of the image.
SEO settings
You can set the image’s Alt attribute and Title, which are essential for SEO, helping search engines determine what the image is about.
The Alt attribute is for optional text that appears when, for whatever reason, the image does not load on the page. It can be a short description of the image.
Title adds a tooltip with text that appears when you hover the image on the site.
You can style an Image like any other element using the Styles tab in the right panel.
Not all styles should be applied to Images as they won't be visible or will be partially overlaid by an image with a transparent background (or example, background styles).
To make an Image original, you can:
- set the rounding radius for one or more corners of the Image in the Size section
- create a frame around an Image in the Border section
- add effects in the Effects section:
- shadow: to make an Image look more expressive
- filters: you can apply various filters to your picture, such as blur, grayscale, or sepia
