Mit Bildern arbeiten

Bilder sind ein wichtiges Gestaltungselement, um die Attraktivität Ihrer Website zu steigern. Mit weblica können Sie Bilder einfach und bequem verwalten, zuschneiden, vergrössern und verkleinern.

In diesem Kapitel lernen Sie den grundsätzlichen Umgang mit Bildern in weblica. Dazu gehören der Bild-Import sowie das Zuschneiden und Anpassen von Bildern, der Umgang mit Titel und Alt-Text und das Setzen von Link-Aktionen:

Bilder importieren

Bilder verwalten Sie - wie alle anderen Dateien, die Sie in einem Projekt benötigen - bequem über die Dateiablage von weblica. Wie das geht, erfahren Sie im Kapitel Der Umgang mit Dateien.

Bilder verwenden

Original und Verwendung

Haben Sie ein Bild in ihr Projekt importiert, können Sie es beliebig oft verwenden, sei es als Absatzbild, Kopfbild oder als Seitenillustration, in Bildergalerien, Slidern, etc.

Grösse, Bildausschnitt und Link-Aktion können Sie somit für jede Verwendung individuell festlegen - das Original bleibt unverändert.

Solange ein Bild noch verwendet wird, können Sie es übrigens in der Dateiablage nicht löschen. So wird verhindert, dass Sie ein Bild aus Versehen aus dem Projekt entfernen, obwohl es noch benötigt wird.

Die Einsatzmöglichkeiten

In weblica sind Bilder allgegenwärtig. Die folgende Zusammenstellung listet die wichtigsten Informationen rund um das Thema Bilder:

Bildergalerie Mit einer Bildergalerie bieten Sie den Besuchern Ihrer Website Bilder als elegante Diashow an. mehr...	Bilder im Text einfügen Während Sie mit Hilfe des Absatzbildes Ihre Texte rasch und unkompliziert um eine Illustration ergänzen, haben Sie zusätzlich die Möglichkeit, Bilder direkt innerhalb mehr...
Darstellung wählen Aufmacher unterstützen verschiedene Darstellungsformen. So können Sie beispielsweise wählen, ob die Liste ein- oder mehrspaltig angezeigt werden soll; hierbei werden mehr...	Das Absatzbild Mit Hilfe des Absatzbildes können Sie Ihre Texte rasch und unkompliziert um eine Illustration ergänzen, die links oder rechts neben dem Text angezeigt wird. Hier erfahren mehr...
Designbilder Passen Sie hier die Designbilder (Bilder, die vom Design benötigt werden), z.B. ein Wasserzeichen im Seitenhintergrund, Ihren Bedürfnissen an. Auch hier können Sie das mehr...	FavIcon Im folgenden Dialog können Sie Ihr gewünschtes FavIcon auswählen, das vom Browser in der Adresszeile angezeigt werden soll. mehr...
Multimedia Der Multimedia-Absatz ermöglicht es Ihnen, Bilder im Format JPEG, GIF, animated GIF und PNG anzuzeigen. Auch Flash-Filme werden unterstützt. Bilder können in der Grösse mehr...	Seiten-Eigenschaften: Logo/Kopfbild Per Vorgabe wird das Logo von der übergeordneten Seite übernommen. Setzen Sie das Logo auf der Startseite und alle Seiten auf Ihrer Website werden dieses Bild automatisch mehr...
Seiten-Eigenschaften: Zusammenfassung Auf der Registerkarte Zusammenfassung finden Sie Angaben, die den Inhalt der Seite z.B. für die Verwendung durch Aufmacher beschreiben. Hierzu zählen unter anderem der mehr...	Slider Mit dem Slider-Absatz können Sie eine Bildersammlung mittels einer wählbaren Animation darstellen. Hierbei steht Ihnen eine Vielzahl von verschiedenen Animationen zur mehr...

Bilder zuschneiden

Sie können bei der Verwendung eines Bildes dieses nach Bedarf zuschneiden und in der Grösse verändern. Klicken Sie hierzu in den Bild-Einstellungen auf den Link Bild zuschneiden.

Transparenz und Hintergrund-Farbe

weblica unterstützt Bilder mit Transparenz. Im Dialog für das Zuschneiden von Bildern wird ein transparenter Hintergrund durch ein Karo-Muster repräsentiert. Dies entspricht der in vielen Grafikprogrammen gängigen Anzeige:

Zuschneiden-Dialog - Transparenter Hintergrund

Übersicht: Bildformate mit und ohne Transparenz

Bild-Format	Transparenz möglich?	Anmerkung
PNG	ja
JPEG	nein
BMP	nein	wird als PNG generiert
GIF	Ja (nur vollständige Transparenz)

Hintergrundfarbe für Bilder ohne Transparenz

Ist ein Bild kleiner als der von Ihnen festgelegte Rahmen und unterstützt das Bild keine Transparenz, dann wird der leere Bereich des Bildes mit einer Hintergrundfarbe gefüllt. Die hierfür verwendete Farbe ändern Sie bei Bedarf in den Farb-Einstellungen für das gewählte Design:

Nicht-transparente Bilder - Hintergrundfarbe

Per Vorgabe ist die Farbe auf Weiss (#FFFFFF) gesetzt. Die gewählte Farbe verwendet weblica dann auch als Hintergrund-Farbe im Zuschneiden-Dialog.

Was passiert, wenn Sie die Hintergrundfarbe ändern?

Ändern Sie die Hintergrundfarbe für nicht-transparente Bilder, dann sorgt weblica dafür, dass alle Bilder neu generiert werden. Damit ist sicher gestellt, dass die Hintergrundfarbe der betroffenen Bilder stets der gewünschten Farbe entspricht.

Mit dem Zuschneiden-Dialog arbeiten

Mit dem Zuschneiden-Dialog legen Sie Bildgrösse, Bildausschnitt, Skalierung und Drehung für ein Bild fest.

Der rote Begrenzungsrahmen definiert den gewählten Bildausschnitt. Per Vorgabe setzt weblica den Rahmen auf eine Grösse, die für die jeweilige Verwendung optimal ist. Sie können die Grösse des Begrenzungsrahmen bei Bedarf aber auch verändern, entweder über die beiden Eingabefelder für die Rahmengrösse oder durch Ziehen der Rahmen-Handle bei gedrückter Maustaste.

Informationen zum Originalbild sehen Sie direkt unterhalb des Bildbereichs:

Bildname
Originalgrösse

Es stehen Ihnen die folgenden Funktionen zur Verfügung, mit dem Sie die Grösse des Bildes oder den Rahmen verändern und die Darstellung drehen können.

	Funktion	Bemerkung
	Bild vergrössern	Das Drücken von + vergrössert das Bild in kleinen Schritten.
	Bild verkleinern	Das Drücken von - verkleinert das Bild in kleinen Schritten.
	Bild um 90 Grad drehen
	Bild in Rahmen einpassen	Das Bild wird so verkleinert, dass es vollständig innerhalb des Rahmens dargestellt werden kann. Die Seitenverhältnisse des Bildes werden berücksichtigt.
	Rahmen ausfüllen	Das Bild wird so verkleinert, dass der Rahmen vollständig ausgefüllt wird. Hierbei kann es sein, dass gewisse Teile des Bildes ausserhalb des Begrenzungsrahmens liegen. Die Seitenverhältnisse des Bildes werden berücksichtigt.
	Rahmen an Bild anpassen	Der Begrenzungsrahmen wird passend um das Bild gelegt. Hierbei wird er entsprechend vergrössert oder verkleinert.

Was passiert bei zu grossen Abmessungen für ein Bild?

Der für die Darstellung eines Bildes verfügbare Platz hängt u.a. vom gewählten Design ab und auch davon, wo Sie das Bild verwenden. So steht Ihnen je nach Design, das Sie verwenden, in der linken und rechten Spalte weniger Platz in der Breite zur Verfügung als im Hauptinhalt. Aber auch im Hauptinhalt kann es sein, dass die von Ihnen für das Bild gewählte Breite den verfügbaren Platz überschreitet.

weblica bindet Bilder auf einer Webseite deshalb so ein, dass zu breite Bilder vom Web-Browser automatisch verkleinert werden, und zwar unter Wahrung des sog. Seitenverhältnisses des Bildes, das heisst ohne das Bild zu verzerren. Damit ist sicher gestellt, dass Bilder weder abgeschnitten werden noch andere Inhalte überlagern.

Dieses automatische Skalieren funktioniert in zeitgemässen Browsern zuverlässig und schnell. Dennoch sollten Sie unnötig grosse Bilder vermeiden, denn:

je grösser ein Bild ist, desto mehr Daten müssen vom Web-Server zum Web-Browser des Betrachters übertragen werden. Gerade für mobile Nutzer kann das zu unnötig langen Ladezeiten führen
je nach Art des Bildes und dem Grad der Skalierung leidet die Bildqualität, wenn das Bild im Browser zu sehr verkleinert werden muss. Das betrifft primär Bilder mit Text oder Grafiken.

Wie weblica Bilder für Ihre Website erzeugt

weblica erkennt, ob ein Bild skaliert werden muss, damit es den gewählten Abmessungen entspricht. Bilder, die bereits die korrekten Abmessungen haben, kopiert weblica ohne Veränderung in Ihren Web-Auftritt. Damit bleiben die von Ihnen auf dem Bild u.U. vorgenommenen Bild-Optimierungen erhalten; das ist praktisch, wenn Sie das Bild vorab in einem externen Grafik-Programm bezüglich Grösse und Qualität bereits für die Verwendung auf einer Webseite optimiert haben.

Wenn Sie das gleiche Bild mehrfach verwenden, und hierbei der gewählte Bildausschnitt, die Skalierung und Drehung gleich sind, dann ist weblica schlau genug, dies zu erkennen: das benötigte Bild wird dann nur einmal erzeugt und mehrfach verwendet. Das spart sowohl Zeit beim Publizieren als auch Platz auf dem Server. Zudem muss ein Web-Browser so wesentlich weniger Daten herunter laden, was die Ladezeiten für eine Seite je nach Zahl der verwendeten Bilder deutlich verkürzt.

Aktion wählen

Sie können für jedes Bild festlegen, was geschehen soll, wenn der Besucher Ihrer Website auf ein Bild klickt. Ausgenommen hiervon sind Bilder in der Bildergalerie - hier wird immer die Lightbox Diashow aktiviert. Ebenso ist das Setzen einer Aktion für Hintergrund-Bilder eines Designs deaktiviert, da diese auf der Webseite nicht anklickbar sind.

Es stehen Ihnen folgende Möglichkeiten zur Verfügung:

keine Aktion
Link: Hier stehen Ihnen alle Link-Arten von weblica zur Verfügung.
Bildausschnitt in Originalgrösse anzeigen

Bildaktion wählen

Titel und Alt-Text

Der Titel

Sie können für ein Bild einen Bildtitel festlegen. Dieser Text erscheint dann einerseits als sog. Tooltip, wenn ein Besucher Ihrer Website mit der Maus über das Bild fährt. Weiter werten Suchmaschinen und Screenreader diese Eigenschaft aus, um mehr über den Inhalte des Bildes zu erfahren.

weblica aktiviert den Titel per Vorgabe, er ist jedoch nicht zwingend, und Sie können diese Option daher auf Wunsch deaktivieren. Wenn Sie keinen explizieten Bild-Titel setzen, verwendet weblica automatisch den sog. Alt-Text des Bildes, siehe nächsten Abschnitt.

Der Alt-Text

Bilder auf einer Webseite benötigen zwingend einen sog. Alt-Text (Alternativ-Text). Es handelt sich dabei um eine kurze Beschreibung, die festhält, was auf dem Bild zu sehen ist. Dieser Text wird u.a. von sog. Screen-Readern verwendet und ermöglicht es beispielsweise blinden oder sehbehinderten Menschen sich auf einer Seite besser zurecht zu finden.

Fehlt der Alt-Text oder enthält er keine sinnvolle Beschreibung, erschweren Sie Menschen, die das Bild nicht sehen können, den Zugang zu Ihren Inhalten. Übrigens: Auch Suchmaschinen werten den Alt-Text aus und verwenden diesen zur Bewertung des Inhalts einer Seite.

Leerer Alt-Text = Automatisch generierter Alt-Text

Hinterlegen Sie bei der Verwendung eines Bildes keinen Alt-Text, dann generiert weblica diesen beim Erstellen der Seite automatisch aus dem Namen des Bildes. Hierbei entfernt weblica die Datei-Erweiterung und ersetzt Unterstriche durch Leerzeichen. So wird aus dem Dateinamen In_Wien_auf_dem_Prater.jpg der Alt-Text "In Wien auf dem Prater". Es lohnt sich also, Ihren Bildern möglichst sprechende Dateinamen zu geben. Alternativ können Sie den importierten Dateien auch nachträglich einen sprechenden Namen zuweisen, der dann von weblica für das Generieren des Alt-Texts verwendet wird.

Die Funktion Alt-Text generieren

Sie können das Generieren des Alt-Texts in den Eigenschaften eines Bildes auch explizit durch einen Klick auf den Button

anstossen. weblica generiert dann den Alt-Text aus dem Dateinamen und kopiert das Resultat in das Feld Alt-Text im Dialog. Das ist dann nützlich, wenn Sie den Alt-Text zwar auf der Basis des Dateinamens erstellen ihn aber zusätzlich noch anpassen möchten.

Löschen Sie den Inhalt des Feldes im Dialog, dann wird der Text jedesmal beim Generieren der Webseite neu auf der Basis des Dateinamens erstellt.

Alt-Text leer lassen oder explizit setzen: Was ist besser?

Haben Ihre Bild-Ressourcen aussagekräftige Namen, dann ist es am einfachsten, Sie lassen das Feld Alt-Text für ein Bild jeweils leer; weblica erzeugt den Alt-Text dann ja automatisch auf Basis des Namens. Das spart Ihnen Arbeit und hat den weiteren Vorteil, dass Sie den Alt-Text nicht anpassen müssen, wenn Sie später das verwendete Bild durch ein anderes ersetzen: der Alt-Text passt sich automatisch an.

Die Option Alt-Text als Bildunterschrift verwenden

Für Bilder im Multimedia-Absatz und für das Absatz-Bild im Text-Absatz haben Sie die Möglichkeit, den Alternativ-Text als Bild-Unterschrift zu wählen. Aktivieren Sie hierzu die gleichnamige Option in den Eigenschaften zum Bild.