Image block

January 19, 2023 - Anaïs Sautarel
23111 views

2 minutes

Text and image are the two essential elements of a website. The choice and the position of the images have a huge impact on the impression your website makes on internet users. Therefore, the Image block is the best component to attract your website visitors.

The options of the Image block

It’s easy to add an image to the SiteW editor: you just need to drag and drop an Image block on the page and then select the image file in the SiteW file selector.

Image format
Info stepup
The SiteW editor supports many image formats: JPG, PNG, GIF, SVG, WebP (and BMP even if this format is inadvisable on the internet).

Crop the image

The following video shows the different available options to fit the image to the size of the Image block:

Image weight
Info stepup
To optimize your website load time, our system uses the “lazy loading” technic, and our servers duplicate your files at the exact size of your blocks.

Click on the image

image configuration

When you click on the Image block, several actions can be launched:

  1. Full screen on click: the image is displayed in full-screen size above the page (cf. the video above)

  2. Images on full screen: instead of displaying the image in full-screen size, this button enables you to choose one or several images that will be displayed as a full-screen gallery by clicking on them 

  3. Choose a link: it enables you to add a link to the image. You can choose between the different types of links that are available in our editor (website page, external URL, downloadable file…).

Image size
Info stepup
Our editor ensures the image optimization according to the block size. Regarding the full-screen display, if the image is smaller than the screen, it’s displayed in its original size. For the size of full-screen images, it would be better to be based on a Full-HD resolution (1920×1080).

Mouseover image

image block

Two effects are available during image mouseover:

  1. Mouseover image: another image replaces the current one

  2. Mouseover menu: a menu displays over or near the image
Don’t forget mobile users!
Info warning
On a touch-sensitive screen, mouseover is no more working. The mouseover effects just affect browsing on desktop. Therefore, the sections of a mouseover menu must be available thanks to other ways (menus, buttons, links…).

The video below shows an example of these mouseover effects:

Add a filter to the images

The Design tab of the Image block offers filters you can add to your images (blur, contrast, greyscale…) and different shapes (curve, circle, star…):

image filter

To summarize

You have many possibilities with the Image block. Finally, the most difficult thing will probably be to choose carefully the images that best illustrate your website. To go further, you can also use the Illustration block or the Gallery block.

Anaïs Sautarel
Translator
As confident in the mountains as with foreign languages, our contents and tool travel around English-speaking and Spanish-speaking countries with me. 🌍

Last update: January 19, 2023