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.
Summary
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
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
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
When you click on the Image block, several actions can be launched:
Full screen on click: the image is displayed in full-screen size above the page (cf. the video above)
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
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
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
Two effects are available during image mouseover:
Mouseover image: another image replaces the current one
Mouseover menu: a menu displays over or near the image
Don’t forget mobile users!
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…):
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. 🌍