Picture
The Picture element allows users to insert individual images into web pages. This element provides the ability to add graphical content such as photos, illustrations, logos, and other visual elements to the web page.
To use the element, click on it and, while holding the left mouse button, drag it to the desired location on the page.
After dragging the element to the desired location, it looks like this:
There are several options for uploading a photo:
- By dragging the photo directly from the computer.
- By double-clicking on the element, then selecting the desired file.
- By selecting an already uploaded photo from the media library.
After the image is uploaded, the following additional settings can be made:
By clicking on the Crop all sizes button, the size of the photo can be reduced or only a part of the photo can be cropped. The other two buttons are used to rotate the original image left or right.
When the Crop all sizes button is selected, an editor opens, through which the necessary edits to the photo can be applied.
"Image Attributes" submenu:
Action - through this setting, you can choose what action to take when clicking on the photo.
- Link - a link to an external page or to one of the existing pages on the site can be placed through the options in the "Link target" menu.
- Lightbox - the image opens, centered and enlarged.
- None - no action is performed when clicking on the photo.
Alternative title - this attribute sets a title for the image. It should be directly related to what the image depicts. Proper use of the alternative title helps with better accessibility, SEO optimization, and a better user experience on the website.
Link behavior - through these settings, you can choose how the image should behave when clicked.
- Open in the same page
- Open in a new window
- Open in the parent frame
- Open in the full window
Note: Link behavior works correctly only if Action - Link is set beforehand.
Disable lazy loading - Lazy loading is a technique where content loading is delayed until the user approaches that content. This helps speed up loading web pages by loading only those elements that are visible or close to the viewing area. Instead of loading all elements of the page simultaneously, deferred loading allows loading only those elements that are visible or close to the viewing area.
(Note: If this option is selected, the "lazy loading" technique will be disabled, which in most cases will slow down the loading of web pages, so it is best to avoid using it.)
Use original version of the image - with this option, the original image will be displayed instead of the resized one in 'focus image' mode.
