Add individual images
A picture is worth a thousand words. In "Web 2.0", pictures and videos are the most important medium for presenting information in an interesting way. In this article, we'll show you how you can add all sorts of images into Sitejet. Please have a look at the related articles at the bottom for image galleries and banners
How to add individual images
Individual images can be embedded in various ways on Sitejet websites. Each of the elements and presets listed here has a specific purpose which we will explain in the following subsections.
- The image element
- The logo element
- The SVG element
- The icon element
To add presets or elements, simply click on a category in the left sidebar. You can browse all the available options by scrolling trough the content panel that opens.
In the image below, you will find the menu locations of the elements we will mention next.
The image element
The image element contains exactly one image to be displayed in a certain position. This element can be included in other elements, such as containers or presets, to achieve a specific design. Wherever an image is displayed in Sitejet, you can also edit and format it.
This element can be used for any type of image unless it is a vector graphic. Sitejet supports all common image formats. However, for use on websites, we recommend using .jpg, .png, or .gif files. Each of these formats has different advantages and disadvantages, which have to be considered depending on the application.
JPG files are usually the largest files, but also offer the highest quality in terms of the available color spectrum. If the image is compressed, however, there can be unattractive effects in how it is displayed, as the compression is not lossless.
PNG files support transparent backgrounds. The compression of PNG files is possible with less loss of quality. This is why it is the preferred image format on the internet.
GIF files have the advantage over the two formats mentioned above in that these files can be animated like a stop motion film. The trade-off of the small file size is the small 256 color spectrum. This makes GIF images often look unnatural, but they can be used for caricatures, comic-like presentations, or infographics. .gif files also allow transparent backgrounds.
In Sitejet, images are automatically scaled and compressed to the required resolution by our own CDN service. Images are served in the required resolution based on display size. Responsive and lazy load are optional features.
The image element, like other elements, can be added to the website as follows:
- Click on the "Elements" category in the left sidebar
- Look for "Image" and while pressing the left mouse key drag the image element to your preferred location on the website
To pick an image for this element:
- Click the dummy image which appears in the menu on the left under the word "Image" and a dialog box will open which allows you to choose an image to upload
You can also click the image in the editor, then the pencil icon to swap the image or choose an image already uploaded by either you or the customer. For more information on how to collaborate with your customers, please see our article on the topic here.
The logo element
The logo element is a specialized variant of the image element. It's best to only use this for a single company or product logo because if you change the image in a logo element, you will automatically be asked if you want to change the image across the whole website and on all subpages. This will save you time if the CI (corporate identity) of the company or product changes.
You can find further information on the topic of adding a logo in our article on adding your website logo.
The SVG element
The SVG element can be used to display vector graphics in SVG format. Vector graphics can be zoomed in and out without loss of quality and are also small files, making them ideal for use on responsive websites.
The icon element
The icon element is a special form of the SVG element with which you can display icons from the most popular icon libraries included in Sitejet. The keyword search allows you to select the desired icon from the list without having to upload any files yourself.
With this element, icons from the following libraries are available to you:
- IconFont
- Ionicons
- FontAwesome Brands
- FontAwesome Regular
- FontAwesome Solid
- FontAwesome Light
If there's a library you would like which isn't listed above, you can also add it yourself and insert the corresponding icon using custom code.
Presets
Presets always represent a combination of different elements with their own design specifications. They do the work for you and speed up the design process. Sitejet offers you a wide range of presets for displaying images. Presets play an important role in displaying multiple images at once, as in a gallery, but they also offer some advantages for individual images. How to use presets is explained in our article on the use of presets.
The "Image with text box" preset is available in the "Content" category in the left sidebar. As with an element, you can simply drag and drop the preset to the preferred position on the website.
Become a part of our Community!
Exchange ideas with other web designers about current developments, tips, and tricks and show your favorite sites. Get advice and talk to us about possible features you would like to see on Sitejet. You can join the Sitejetters community here.
