Create Websites with CHEETAH
The most important design elements at a glance (3)
Work with images and graphics
Every modern website contains graphic elements and images as essential design objects. How to work with these design objects in "Cheetah" and integrate them into your own web pages is the subject of this chapter.
Images and graphics have several advantages over pure text on web pages: They serve as eye-catchers, i.e. when a viewer looks at a web page, he or she will always first notice an image on it. Texts, on the other hand, are a special form of coded information carriers that must be explicitly decoded by the viewer, but this is not always successful (for example, because the viewer does not understand the text language). Information absorption via images and graphics, on the other hand, takes place much more intuitively and almost as if by itself, because a viewer usually understands or interprets visual media more quickly and easily than a pure text. In addition, images can arouse emotions and curiosity and thus prevent the user from immediately leaving the website he or she is browsing. For this reason, the use of images is virtually an essential feature of modern website design.
Images and graphics on web pages perform various functions, such as
-
as background decoration and eye-catcher (background image of banners)
-
as information carrier (advertising images, business graphics, etc.)
-
to underline the content ("A picture is worth a thousand words"))
-
as an advertising medium (presentation of the company)
-
for search engine optimization (image search, use of image description and tag)
Builderall in general and the "Cheetah Website Editor" in particular provide a variety of tools and workarounds for managing images. Here, only the "3D Mockup Studio" and the special "3D Photo Editor Studio" should be explicitly mentioned.
General information about "Images on web pages"
Cheetah Website Editor supports a wide range of pixel and vector formats. In detail, these are image files in the formats .PNG, .JPG, .SVG, .GIF, .JFIF, .PJPEG, .PIP, .WEBP and .SVGZ. In practice, only .PNG and .JPG formats are used for pixel graphics and photos, respectively, and .SVG for vector graphics in most cases. The .GIF format allows the inclusion of special animated images, a number of which are already offered for use in Builderall's image repository.
There are a few general rules to follow when using images on websites. The most important one is - use high quality images. Nothing is worse for a first impression than pictures that are pixelated, blurred or not in the right color. Therefore, a powerful image editing program should always be at hand (at least IrfanView, better Gimp, if it should be freeware). Furthermore, you should - already for SEO reasons - pay attention to an optimal size for bitmaps, because the loading speed on a terminal depends on it. Ideally, the image size on the web page should match the image size (each in pixels) of the bitmap or deviate only slightly. Explicit compression can also add a few more kBytes to some images or photos. There are a number of online tools available for this purpose on the web, but most image editing programs also offer a corresponding function for this purpose.
LINK: Compress JPEG files online
Furthermore, it is recommended (but not a must) to use an external repository for image files. In this respect, the web platform "Cloudinary" is the first choice. Here you can conveniently and clearly organize the images inserted on your web pages in folders. The linking to the image containers on the website is done via corresponding external links, which can be easily created in Cloudinary with a mouse click.
Tip: If possible, use "Cloudinary" as an external repository for your image files. The free version is perfectly adequate and also helps to keep track of your own image material.
To avoid possible legal problems, make sure that you also own the copyrights to the image material used or that you have acquired the images in a legally sound manner or that the material is freely available and royalty-free.
LINK: Media resources (graphics, images, videos...)
The image element
To insert an image into a web page, all you have to do is switch from the element list in the right-hand side menu to the "Image" section and drag'n drop one of the offered image elements into the editor.
Once this is done, the next step is to replace the sample image from the template with your own image. And here you have several options.
-
upload your image to the Builderall image repository and then select it there or
-
you save your image in "cloudinary" and link it accordingly
-
you link any image whose image URL is known to you (such links are always legally possible)