Webseiten erstellen mit CHEETAH

Die wichtigsten Gestaltungselemente im Überblick (3)

Arbeiten mit Bildern und Grafiken
 

Auf jeder modernen Webseite sind grafische Elemente und Bilder als wesentliche Gestaltungsobjekte enthalten. Wie man mit diesen Gestaltungsobjekten in „Cheetah“ arbeitet und in eigene Webseiten integriert, soll Gegenstand dieses Kapitels sein.
 

Bilder und Grafiken haben gegenüber reinen Texten auf Webseiten gleich mehrere Vorteile: Sie dienen einmal als Eyecatcher, d. h., wenn ein Betrachter sich eine Internetseite anschaut, wird ihm immer zuerst eine darauf vorhandene Abbildung ins Auge fallen. Texte dagegen sind eine spezielle Form codierter Informationsträger, die vom Betrachter explizit entschlüsselt werden müssen, was aber nicht immer gelingt (weil beispielsweise der Betrachter die Textsprache nicht versteht). Die Informationsaufnahme über Bilder und Grafiken erfolgt hingegen deutlich intuitiver und fast wie von selbst, denn ein Betrachter versteht bzw. interpretiert visuellen Medien i. d. R schneller und einfacher als ein reiner Text. Außerdem können Abbildungen Emotionen und Neugierde wecken und damit verhindern, dass der Nutzer die an gesurfte Webseite sofort wieder verlässt. Aus diesem Grund ist die Verwendung von Abbildungen quasi ein Wesensmerkmal moderner Webseitengestaltung.
 

Bilder und Grafiken auf Webseiten erfüllen verschiedene Funktionen wie beispielsweise
 

Builderall im Allgemeinen und der „Cheetah Webseiteneditor“ im Besonderen stellen eine Vielzahl von Tools und Workarounds zum Management von Bildern zur Verfügung. Hierbei sei explizit nur auf das „3D Mockup-Studio“ und das spezielle „3D Photo Editor Studio“ hingewiesen.

Allgemeines zum Thema „Bilder auf Webseiten“

Der „Cheetah Webseiteneditor“ unterstützt eine Vielzahl von Pixel- und Vektorformaten. Im Einzelnen sind das Bilddateien in den Formaten .PNG, .JPG, .SVG, .GIF, .JFIF, .PJPEG, .PIP, .WEBP und .SVGZ. In der Praxis werden dabei in den meisten Fällen nur die Formate .PNG und .JPG für Pixelgrafiken bzw. Fotos und .SVG für Vektorgrafiken eingesetzt. Das .GIF-Format erlaubt die Einbindung spezieller animierter Bilder, von denen bereits eine Anzahl im Image Repository von Builderall zur Nutzung angeboten wird.

Bei der Verwendung von Bildern auf Webseiten gibt es ein paar allgemeine Regeln zu beachten. Die Wichtigste dabei ist - Verwenden Sie hochwertiges Bildmaterial. Nichts ist schlimmer für einen ersten Eindruck als wie verpixelte, unscharfe oder farblich nicht stimmige Bilder. Deshalb sollte ein leistungsfähiges Bildbearbeitungsprogramm immer zur Hand sein (zumindest IrfanView, besser Gimp, wenn es Freeware sein soll). Weiterhin sollten Sie - schon aus SEO-Gründen - auf eine optimale Größe bei Bitmaps achten, denn davon hängt die Ladegeschwindigkeit auf einem Endgerät ab. Im Idealfall sollte die Bildgröße auf der Webseite mit der Bildgröße (jeweils in Pixeln) der Bitmap übereinstimmen oder nur wenig abweichen. Auch kann eine explizite Kompression bei manchen Bildern oder Fotos noch einige kBytes bringen. Dazu ist im Web eine Vielzahl von Online-Tools verfügbar, aber auch die meisten Bildbearbeitungsprogramme bieten dazu eine entsprechende Funktion an.
 

Weiterhin ist es empfehlenswert (aber kein muss), ein externes Repository für Bilddateien zu verwenden. In dieser Hinsicht ist die Webplattform "Cloudinary" die erste Wahl. Hier können Sie die auf Ihren Webseiten eingefügten Bilder bequem und übersichtlich in Ordnern organisieren. Die Verknüpfung mit den Bildcontainern auf der Webseite erfolgt über entsprechende externe Links, die sich in Cloudinary ganz leicht per Mausklick erstellen lassen.

Tipp: Verwenden Sie – wenn möglich – „Cloudinary“ als externes Repository für Ihre Bilddateien. Es ist in der kostenlosen Version vollkommen ausreichend und hilft auch den Überblick über das eigene Bildmaterial zu behalten.

Um eventuelle rechtliche Probleme zu umgehen, achten Sie weiterhin darauf, dass Sie auch die Urheberrechte an dem verwendeten Bildmaterial besitzen oder die Bilder rechtlich einwandfrei erworben haben bzw. es sich um frei verfügbares, lizenzfreies Material handelt.
 

Das Bild-Element

Um ein Bild in eine Webseite einzufügen, müssen Sie nur aus der Elementeliste im rechten Randmenü in den Bereich "Bild" wechseln und dort eine der angebotenen Bildelemente per drag'n drop in den Editor ziehen.

Wenn das geschehen ist, müssen Sie als nächsten Schritt das Beispielbild der Vorlage durch ihr eigenes Bild austauschen. Und hier gibt es mehrere Möglichkeiten.
 

TB Amazon