Bilder, Fotogalerien und Slider in Kopage erstellen

Bilder gehören zu den wichtigsten Gestaltungselementen einer Website. Im klassischen Kopage Website Builder kannst du eigene Bilder verwenden, vorhandene Bilder austauschen und mehrere Aufnahmen über Fotogalerien oder Slider präsentieren.

Dabei solltest du nicht nur darauf achten, wie ein Bild aussieht. Dateigröße, Abmessungen, Bildausschnitt und die Darstellung auf unterschiedlichen Bildschirmgrößen beeinflussen ebenfalls die Qualität deiner Website.

In dieser Anleitung zeigen wir dir, wie du Bilder in Kopage sinnvoll verwendest und wann sich ein einzelnes Bild, eine Fotogalerie oder ein Slider eignet.

Kurz erklärt: Verwende einzelne Bilder für normale Seiteninhalte, eine Fotogalerie für mehrere zusammengehörige Aufnahmen und einen Slider, wenn mehrere Bilder innerhalb eines gemeinsamen Präsentationsbereichs gezeigt werden sollen.

Bilder in einer Kopage Website verwenden #

Bilder können in Kopage an unterschiedlichen Stellen deiner Website eingesetzt werden.

Typische Beispiele sind Bilder innerhalb von Content Blocks, größere visuelle Bereiche, Team- oder Referenzbilder sowie Bilder innerhalb einer Galerie oder eines Sliders.

Welche Variante sinnvoll ist, hängt davon ab, welche Aufgabe das Bild erfüllen soll.

Ein Foto neben einer Leistungsbeschreibung benötigt beispielsweise keine Fotogalerie. Möchtest du dagegen mehrere Aufnahmen eines Projekts präsentieren, kann eine Galerie wesentlich übersichtlicher sein.

Eigenes Bild hochladen #

Wenn du ein vorhandenes Beispielbild durch ein eigenes Bild ersetzen oder einen neuen Bildbereich erstellen möchtest, kannst du deine eigene Bilddatei in Kopage verwenden.

Wähle dazu innerhalb des betreffenden Inhaltsbereichs die Bildfunktion und lade die gewünschte Datei hoch beziehungsweise wähle ein bereits vorhandenes Bild aus deiner Dateiverwaltung.

Bevor du eine Datei hochlädst, solltest du kontrollieren, ob sie für den Einsatz auf einer Website geeignet ist.

Praxis-Tipp: Bereite Bilder möglichst bereits vor dem Hochladen für ihren Einsatzzweck vor. Sehr große Kamera- oder Smartphone-Originale verursachen unnötige Datenmengen, obwohl sie auf der Website wesentlich kleiner dargestellt werden.

Vorhandenes Bild austauschen #

Viele Templates und Content Blocks enthalten bereits Beispielbilder. Diese dienen als Platzhalter und können durch deine eigenen Bilder ersetzt werden.

Beim Austausch solltest du darauf achten, dass das neue Bild zum vorgesehenen Bereich passt.

Ein sehr hochformatiges Bild kann beispielsweise ungeeignet sein, wenn der Inhaltsbereich für ein breites Querformat vorgesehen ist.

Kontrolliere deshalb nach dem Austausch immer den tatsächlichen Bildausschnitt auf der Website.

Welche Bildformate eignen sich für eine Website? #

Für normale Website-Bilder werden insbesondere moderne Webformate sowie JPEG und PNG verwendet.

Welches Format sinnvoll ist, hängt vom Bildinhalt ab.

Für Fotografien eignet sich ein komprimiertes Bildformat. Bei Grafiken oder Logos kann dagegen ein Format mit Transparenz erforderlich sein.

Entscheidend ist ein vernünftiger Kompromiss zwischen Bildqualität und Dateigröße.

Wichtig: Eine möglichst große Bilddatei bedeutet nicht automatisch eine bessere Darstellung. Für Websites ist eine angemessene Dateigröße ebenso wichtig wie die sichtbare Bildqualität.

Bilder vor dem Hochladen verkleinern #

Moderne Smartphones und Digitalkameras erzeugen Bilder mit sehr hohen Auflösungen. Solche Originaldateien sind für die direkte Verwendung auf einer normalen Website häufig unnötig groß.

Wenn ein Bild auf deiner Website beispielsweise nur ungefähr 1000 Pixel breit dargestellt wird, bringt eine mehrere Tausend Pixel breite Originaldatei für den Besucher normalerweise keinen entsprechenden Vorteil.

Sie kann stattdessen die zu übertragende Datenmenge erhöhen.

Verkleinere Bilder deshalb auf eine für den tatsächlichen Einsatzzweck vernünftige Größe und komprimiere sie, ohne die sichtbare Qualität unnötig zu verschlechtern.

Dateigröße und Ladezeit #

Bilder gehören häufig zu den größten Dateien einer Website. Mehrere unnötig große Fotos können deshalb die Ladezeit deutlich beeinflussen.

Das ist besonders auf Smartphones und langsameren Internetverbindungen relevant.

Wenn eine Seite zehn große Fotos enthält, muss der Browser wesentlich mehr Daten übertragen als bei sinnvoll optimierten Bildern.

Bildoptimierung ist deshalb nicht nur eine gestalterische, sondern auch eine technische Maßnahme.

Den richtigen Bildausschnitt wählen #

Ein gutes Ausgangsbild funktioniert nicht automatisch in jedem Layout.

Bei der Auswahl solltest du berücksichtigen, wie viel Platz für das Bild vorgesehen ist und welches Seitenverhältnis der entsprechende Bereich besitzt.

Ein Beispiel:

Breiter Inhaltsbereich
→ eher Querformat

Personenporträt
→ häufig Hochformat

gleichmäßige Galerie
→ möglichst konsistente Bildverhältnisse

Das bedeutet nicht, dass alle Bilder exakt dasselbe Format besitzen müssen. Ein einheitlicher Bildstil kann eine Galerie oder Seite jedoch deutlich ruhiger wirken lassen.

Bilder innerhalb von Content Blocks verwenden #

Content Blocks können unterschiedliche Kombinationen aus Texten und Bildern enthalten.

Damit kannst du beispielsweise einen Text neben einem Bild darstellen oder einen größeren visuellen Bereich innerhalb einer Seite aufbauen.

Wie du Content Blocks grundsätzlich auswählst und bearbeitest, erklären wir unter Inhalte mit Kopage erstellen: Content Blocks, Texte und Bilder bearbeiten.

Was ist der Files Manager? #

Kopage verfügt über eine Dateiverwaltung, über die du hochgeladene Dateien beziehungsweise Bilder verwalten kannst.

Das ist hilfreich, wenn du ein bereits hochgeladenes Bild an einer anderen Stelle erneut verwenden möchtest.

Du musst dadurch nicht für jede Verwendung dieselbe Datei erneut von deinem Computer hochladen.

Eine übersichtliche Dateiverwaltung wird besonders wichtig, wenn deine Website mit der Zeit viele Bilder und andere Dateien enthält.

Dateien sinnvoll organisieren #

Vermeide es, dieselben Bilder unnötig mehrfach hochzuladen.

Wenn eine passende Datei bereits vorhanden ist, solltest du nach Möglichkeit diese verwenden.

Auch verständliche Dateinamen helfen bei der späteren Verwaltung.

Ein Dateiname wie:

team-curiaweb.jpg

ist beispielsweise wesentlich aussagekräftiger als:

IMG_839274.jpg

Das gilt insbesondere dann, wenn später viele Dateien in der Medienverwaltung vorhanden sind.

Bilder bearbeiten #

Kopage bietet Möglichkeiten zur Bearbeitung von Bildern. Damit können Bilder für die Verwendung innerhalb der Website angepasst werden.

Trotzdem ist es sinnvoll, bereits eine geeignete Ausgangsdatei zu verwenden.

Eine integrierte Bildbearbeitung sollte nicht dazu dienen, sehr große oder grundsätzlich ungeeignete Ausgangsbilder dauerhaft zu kompensieren.

Was ist eine Fotogalerie? #

Eine Fotogalerie eignet sich, wenn du mehrere zusammengehörige Bilder übersichtlich präsentieren möchtest.

Typische Einsatzbereiche sind beispielsweise:

• Referenzprojekte,
• Veranstaltungen,
• Produkte oder Arbeiten,
• Räumlichkeiten,
• Team- oder Vereinsbilder.

Statt jedes Bild als separaten Content Block einzufügen, kannst du die Aufnahmen in einer zusammengehörigen Galerie darstellen.

Fotogalerie in Kopage erstellen #

Öffne die Seite, auf der du deine Galerie einfügen möchtest, und wähle die entsprechende Galerie-Funktion beziehungsweise das dafür vorgesehene Modul.

Füge anschließend die gewünschten Bilder hinzu und kontrolliere ihre Reihenfolge und Darstellung.

Je nach verwendeter Galerie-Darstellung solltest du besonders darauf achten, dass die ausgewählten Bilder optisch zusammenpassen.

Praxis-Tipp: Eine Galerie mit zehn sorgfältig ausgewählten Bildern wirkt häufig besser als eine Galerie mit fünfzig sehr ähnlichen Aufnahmen. Zeige die Bilder, die für Besucher tatsächlich interessant sind.

Reihenfolge der Galerie-Bilder #

Die Reihenfolge kann beeinflussen, wie Besucher eine Bildserie wahrnehmen.

Bei einem Projekt kannst du beispielsweise chronologisch vorgehen:

Ausgangssituation
       ↓
Arbeiten
       ↓
Zwischenergebnis
       ↓
fertiges Projekt

Bei einer allgemeinen Galerie kann dagegen das stärkste oder aussagekräftigste Bild am Anfang sinnvoll sein.

Vermeide nach Möglichkeit eine völlig zufällige Reihenfolge, wenn die Bilder gemeinsam eine Geschichte oder Entwicklung zeigen sollen.

Was ist ein Slider? #

Ein Slider zeigt mehrere Inhalte beziehungsweise Bilder innerhalb eines gemeinsamen Bereichs nacheinander an.

Dadurch können mehrere Bilder präsentiert werden, ohne dass alle gleichzeitig untereinander angezeigt werden müssen.

Slider können beispielsweise für ausgewählte Referenzen oder visuelle Eindrücke verwendet werden.

Wann ist ein Slider sinnvoll? #

Ein Slider sollte einen konkreten Zweck erfüllen und nicht nur verwendet werden, weil die Funktion vorhanden ist.

Wenn ein einzelnes starkes Bild die gewünschte Aussage bereits vermittelt, kann dieses einfacher und wirkungsvoller sein.

Ein Slider eignet sich eher dann, wenn mehrere Bilder tatsächlich zusammengehören und innerhalb desselben Bereichs gezeigt werden sollen.

Merke: Mehr Bewegung bedeutet nicht automatisch besseres Webdesign. Verwende einen Slider nur dort, wo mehrere wechselnde Inhalte für den Besucher einen echten Mehrwert bieten.

Galerie oder Slider – was ist besser? #

Beide Funktionen verfolgen unterschiedliche Ziele.

Fotogalerie
→ mehrere Bilder übersichtlich betrachten

Slider
→ mehrere Bilder im selben Präsentationsbereich anzeigen

Einzelbild
→ eine bestimmte Aussage gezielt unterstützen

Wenn Besucher mehrere Fotos miteinander vergleichen oder frei auswählen sollen, ist eine Galerie häufig geeigneter.

Wenn dagegen nur wenige visuelle Eindrücke innerhalb eines kompakten Bereichs gezeigt werden sollen, kann ein Slider sinnvoll sein.

Nicht jede Seite braucht eine Galerie oder einen Slider #

Zusätzliche visuelle Funktionen sollten immer zum Inhalt passen.

Auf einer Kontaktseite ist beispielsweise häufig kein großer Bilder-Slider notwendig. Auf einer Referenz- oder Projektseite kann eine Galerie dagegen sehr hilfreich sein.

Verwende solche Funktionen deshalb gezielt und nicht automatisch auf jeder Seite.

Bildqualität innerhalb einer Galerie #

In einer Galerie fallen Unterschiede zwischen den einzelnen Bildern besonders schnell auf.

Stark unterschiedliche Auflösungen, Seitenverhältnisse oder Bildstile können die Darstellung unruhig wirken lassen.

Wenn möglich, bereite zusammengehörige Galerie-Bilder deshalb in ähnlicher Qualität und mit einem passenden Seitenverhältnis vor.

Zu viele Bilder vermeiden #

Eine umfangreiche Bildergalerie kann nicht nur unübersichtlich werden, sondern auch zusätzliche Daten übertragen.

Überlege deshalb, welche Bilder tatsächlich notwendig sind.

Bei einer Referenzseite müssen beispielsweise nicht zwanzig fast identische Aufnahmen desselben Motivs gezeigt werden.

Eine gezielte Auswahl erleichtert Besuchern die Orientierung und reduziert gleichzeitig unnötige Datenmengen.

Bilder auf dem Smartphone kontrollieren #

Ein Bild kann auf einem Desktop-Monitor hervorragend aussehen und auf einem Smartphone einen ungünstigen Ausschnitt zeigen.

Kontrolliere deshalb insbesondere:

• große Titel- und Hintergrundbilder,
• Text-Bild-Content-Blocks,
• Galerien,
• Slider,
• und Bilder mit wichtigen Motiven am Rand.

Weitere Hinweise zur mobilen Darstellung findest du unter Responsive Design: Kopage Website für Smartphone und Tablet optimieren.

Text nicht als Bild einbauen #

Wichtige Informationen sollten nach Möglichkeit als echter Text auf der Website stehen und nicht ausschließlich Bestandteil eines Bildes sein.

Das betrifft beispielsweise Überschriften, Kontaktinformationen oder längere Beschreibungen.

Echter Text lässt sich auf unterschiedlichen Bildschirmgrößen besser darstellen und kann von Suchmaschinen und unterstützenden Technologien besser verarbeitet werden.

Bilder und Suchmaschinenoptimierung #

Bilder können auch für die Suchmaschinenoptimierung relevant sein. Entscheidend ist dabei vor allem, dass sie sinnvoll in den Seiteninhalt eingebunden werden und technisch vernünftig eingesetzt werden.

Verwende aussagekräftige Dateinamen und – sofern die entsprechende Funktion im verwendeten Bereich zur Verfügung steht – eine sinnvolle Beschreibung beziehungsweise einen Alternativtext für inhaltlich relevante Bilder.

Ein Alternativtext sollte beschreiben, was für das Verständnis des Bildes beziehungsweise des Seiteninhalts relevant ist, und nicht mit einer Liste von Suchbegriffen gefüllt werden.

Die allgemeinen SEO-Einstellungen behandeln wir unter SEO mit Kopage: Seitentitel, Meta-Daten, URLs und Suchmaschinenoptimierung.

Urheberrechte bei Bildern beachten #

Nur weil ein Bild im Internet gefunden werden kann, bedeutet das nicht, dass du es auf deiner eigenen Website verwenden darfst.

Verwende deshalb eigene Bilder oder Dateien, für deren Nutzung du die erforderlichen Rechte besitzt.

Bei Bildern aus Bilddatenbanken solltest du die jeweiligen Lizenzbedingungen beachten und prüfen, ob beziehungsweise in welcher Form eine Quellen- oder Urheberangabe erforderlich ist.

Wichtig: Lade keine Bilder aus der Google-Bildersuche oder von fremden Websites herunter und verwende sie ungeprüft auf deiner Website. Die Auffindbarkeit eines Bildes sagt nichts über deine Nutzungsrechte aus.

Bilder später austauschen #

Du kannst Bilder auf deiner Kopage Website später aktualisieren oder ersetzen.

Das ist beispielsweise sinnvoll, wenn neue Teamfotos vorhanden sind, Referenzen aktualisiert werden oder ein bisher verwendetes Bild nicht mehr zum Erscheinungsbild deiner Website passt.

Kontrolliere nach dem Austausch, ob der neue Bildausschnitt weiterhin zum betreffenden Content Block beziehungsweise zur Galerie passt.

Bilder löschen #

Wenn du eine Bilddatei nicht mehr benötigst, solltest du vor dem endgültigen Löschen prüfen, ob sie noch an einer anderen Stelle der Website verwendet wird.

Das ist besonders wichtig, wenn du Dateien über eine zentrale Dateiverwaltung mehrfach eingesetzt hast.

Achtung: Entferne eine Datei nicht vorschnell aus der Dateiverwaltung, wenn du nicht sicher bist, ob sie noch auf einer anderen Seite, in einer Galerie oder in einem anderen Bereich verwendet wird.

Typische Fehler bei Bildern #

Häufige Probleme entstehen durch unnötig große Dateien, ungeeignete Bildausschnitte, unscharfe Bilder oder sehr unterschiedliche Bildstile innerhalb derselben Seite.

Auch zu viele Slider und Galerien können eine Website überladen.

Ein weiteres Problem sind Bilder, die zwar dekorativ aussehen, aber nicht zum eigentlichen Inhalt passen.

Verwende Bilder deshalb gezielt und betrachte sie als Bestandteil deiner Kommunikation – nicht nur als Dekoration.

Check vor der Veröffentlichung #

Nach größeren Bildänderungen lohnt sich eine kurze Kontrolle:

Sind alle Platzhalterbilder ersetzt?
        ↓
Sind die Bilder scharf?
        ↓
Sind die Dateien sinnvoll dimensioniert?
        ↓
Stimmen die Bildausschnitte?
        ↓
Funktionieren Galerie und Slider?
        ↓
Ist die Reihenfolge sinnvoll?
        ↓
Smartphone-Darstellung prüfen
        ↓
Seite im normalen Browser testen

Wie geht es weiter? #

Nachdem du Seiten, Content Blocks und Bilder verwalten kannst, ist eine weitere häufig benötigte Funktion das Kontaktformular.

Damit können Besucher direkt über deine Website Anfragen und andere Informationen übermitteln.

Weiter geht es deshalb mit Formulare und Kontaktformulare mit Kopage erstellen.

Zusammenfassung #

Im klassischen Kopage Website Builder kannst du einzelne Bilder innerhalb deiner Seiten verwenden und mehrere Bilder über Fotogalerien oder Slider präsentieren.

Bereite Bilder möglichst passend für ihren tatsächlichen Einsatzzweck vor. Achte auf ausreichende Qualität, vernünftige Dateigrößen und einen geeigneten Bildausschnitt.

Eine Fotogalerie eignet sich für mehrere zusammengehörige Bilder, während ein Slider mehrere Bilder innerhalb eines gemeinsamen Präsentationsbereichs darstellen kann. Für viele Inhalte reicht dagegen ein einzelnes, gut ausgewähltes Bild vollkommen aus.

Kontrolliere Bilder, Galerien und Slider immer auch auf kleineren Bildschirmgrößen und verwende ausschließlich Bildmaterial, für dessen Nutzung du die notwendigen Rechte besitzt.

Gute Bildgestaltung bedeutet nicht, möglichst viele Bilder einzusetzen. Entscheidend sind passende Motive, gute Qualität, vernünftige Dateigrößen und ein klarer Zweck innerhalb der jeweiligen Seite.