{"id":22828,"date":"2026-08-29T10:16:31","date_gmt":"2026-08-29T08:16:31","guid":{"rendered":"https:\/\/www.curiaweb.ch\/?post_type=docs&#038;p=22828"},"modified":"2026-08-29T10:16:32","modified_gmt":"2026-08-29T08:16:32","password":"","slug":"kopage-bilder-galerien-slider","status":"publish","type":"docs","link":"https:\/\/www.curiaweb.ch\/fr\/hilfe\/website-baukasten\/kopage-bilder-galerien-slider\/","title":{"rendered":"Cr\u00e9er des images, des galeries photo et des diaporamas dans Kopage"},"content":{"rendered":"<p class=\"wp-block-paragraph\">Bilder geh\u00f6ren zu den wichtigsten Gestaltungselementen einer Website. Im klassischen Kopage Website Builder kannst du eigene Bilder verwenden, vorhandene Bilder austauschen und mehrere Aufnahmen \u00fcber Fotogalerien oder Slider pr\u00e4sentieren.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Dabei solltest du nicht nur darauf achten, wie ein Bild aussieht. Dateigr\u00f6\u00dfe, Abmessungen, Bildausschnitt und die Darstellung auf unterschiedlichen Bildschirmgr\u00f6\u00dfen beeinflussen ebenfalls die Qualit\u00e4t deiner Website.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><strong>En bref :<\/strong> Verwende einzelne Bilder f\u00fcr normale Seiteninhalte, eine Fotogalerie f\u00fcr mehrere zusammengeh\u00f6rige Aufnahmen und einen Slider, wenn mehrere Bilder innerhalb eines gemeinsamen Pr\u00e4sentationsbereichs gezeigt werden sollen.<\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">Bilder in einer Kopage Website verwenden<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Bilder k\u00f6nnen in Kopage an unterschiedlichen Stellen deiner Website eingesetzt werden.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Typische Beispiele sind Bilder innerhalb von Content Blocks, gr\u00f6\u00dfere visuelle Bereiche, Team- oder Referenzbilder sowie Bilder innerhalb einer Galerie oder eines Sliders.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Welche Variante sinnvoll ist, h\u00e4ngt davon ab, welche Aufgabe das Bild erf\u00fcllen soll.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ein Foto neben einer Leistungsbeschreibung ben\u00f6tigt beispielsweise keine Fotogalerie. M\u00f6chtest du dagegen mehrere Aufnahmen eines Projekts pr\u00e4sentieren, kann eine Galerie wesentlich \u00fcbersichtlicher sein.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Eigenes Bild hochladen<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Wenn du ein vorhandenes Beispielbild durch ein eigenes Bild ersetzen oder einen neuen Bildbereich erstellen m\u00f6chtest, kannst du deine eigene Bilddatei in Kopage verwenden.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">W\u00e4hle dazu innerhalb des betreffenden Inhaltsbereichs die Bildfunktion und lade die gew\u00fcnschte Datei hoch beziehungsweise w\u00e4hle ein bereits vorhandenes Bild aus deiner Dateiverwaltung.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Bevor du eine Datei hochl\u00e4dst, solltest du kontrollieren, ob sie f\u00fcr den Einsatz auf einer Website geeignet ist.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><strong>Conseil pratique :<\/strong> Bereite Bilder m\u00f6glichst bereits vor dem Hochladen f\u00fcr ihren Einsatzzweck vor. Sehr gro\u00dfe Kamera- oder Smartphone-Originale verursachen unn\u00f6tige Datenmengen, obwohl sie auf der Website wesentlich kleiner dargestellt werden.<\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">Vorhandenes Bild austauschen<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Viele Templates und Content Blocks enthalten bereits Beispielbilder. Diese dienen als Platzhalter und k\u00f6nnen durch deine eigenen Bilder ersetzt werden.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Beim Austausch solltest du darauf achten, dass das neue Bild zum vorgesehenen Bereich passt.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ein sehr hochformatiges Bild kann beispielsweise ungeeignet sein, wenn der Inhaltsbereich f\u00fcr ein breites Querformat vorgesehen ist.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Kontrolliere deshalb nach dem Austausch immer den tats\u00e4chlichen Bildausschnitt auf der Website.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Welche Bildformate eignen sich f\u00fcr eine Website?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">F\u00fcr normale Website-Bilder werden insbesondere moderne Webformate sowie JPEG und PNG verwendet.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Welches Format sinnvoll ist, h\u00e4ngt vom Bildinhalt ab.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">F\u00fcr Fotografien eignet sich ein komprimiertes Bildformat. Bei Grafiken oder Logos kann dagegen ein Format mit Transparenz erforderlich sein.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Entscheidend ist ein vern\u00fcnftiger Kompromiss zwischen Bildqualit\u00e4t und Dateigr\u00f6\u00dfe.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><strong>Important :<\/strong> Eine m\u00f6glichst gro\u00dfe Bilddatei bedeutet nicht automatisch eine bessere Darstellung. F\u00fcr Websites ist eine angemessene Dateigr\u00f6\u00dfe ebenso wichtig wie die sichtbare Bildqualit\u00e4t.<\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">Bilder vor dem Hochladen verkleinern<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Moderne Smartphones und Digitalkameras erzeugen Bilder mit sehr hohen Aufl\u00f6sungen. Solche Originaldateien sind f\u00fcr die direkte Verwendung auf einer normalen Website h\u00e4ufig unn\u00f6tig gro\u00df.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Wenn ein Bild auf deiner Website beispielsweise nur ungef\u00e4hr 1000 Pixel breit dargestellt wird, bringt eine mehrere Tausend Pixel breite Originaldatei f\u00fcr den Besucher normalerweise keinen entsprechenden Vorteil.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Sie kann stattdessen die zu \u00fcbertragende Datenmenge erh\u00f6hen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Verkleinere Bilder deshalb auf eine f\u00fcr den tats\u00e4chlichen Einsatzzweck vern\u00fcnftige Gr\u00f6\u00dfe und komprimiere sie, ohne die sichtbare Qualit\u00e4t unn\u00f6tig zu verschlechtern.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Dateigr\u00f6\u00dfe und Ladezeit<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Bilder geh\u00f6ren h\u00e4ufig zu den gr\u00f6\u00dften Dateien einer Website. Mehrere unn\u00f6tig gro\u00dfe Fotos k\u00f6nnen deshalb die Ladezeit deutlich beeinflussen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Das ist besonders auf Smartphones und langsameren Internetverbindungen relevant.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Wenn eine Seite zehn gro\u00dfe Fotos enth\u00e4lt, muss der Browser wesentlich mehr Daten \u00fcbertragen als bei sinnvoll optimierten Bildern.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Bildoptimierung ist deshalb nicht nur eine gestalterische, sondern auch eine technische Ma\u00dfnahme.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Den richtigen Bildausschnitt w\u00e4hlen<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Ein gutes Ausgangsbild funktioniert nicht automatisch in jedem Layout.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Bei der Auswahl solltest du ber\u00fccksichtigen, wie viel Platz f\u00fcr das Bild vorgesehen ist und welches Seitenverh\u00e4ltnis der entsprechende Bereich besitzt.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Un exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Breiter Inhaltsbereich\n\u2192 eher Querformat\n\nPersonenportr\u00e4t\n\u2192 h\u00e4ufig Hochformat\n\ngleichm\u00e4\u00dfige Galerie\n\u2192 m\u00f6glichst konsistente Bildverh\u00e4ltnisse<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Das bedeutet nicht, dass alle Bilder exakt dasselbe Format besitzen m\u00fcssen. Ein einheitlicher Bildstil kann eine Galerie oder Seite jedoch deutlich ruhiger wirken lassen.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Bilder innerhalb von Content Blocks verwenden<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Content Blocks k\u00f6nnen unterschiedliche Kombinationen aus Texten und Bildern enthalten.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Damit kannst du beispielsweise einen Text neben einem Bild darstellen oder einen gr\u00f6\u00dferen visuellen Bereich innerhalb einer Seite aufbauen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Wie du Content Blocks grunds\u00e4tzlich ausw\u00e4hlst und bearbeitest, erkl\u00e4ren wir unter <a href=\"\/fr\/aide\/createur-de-site-web\/modifier-les-blocs-de-contenu-kopage\/\">Cr\u00e9er du contenu avec Kopage : modifier les blocs de contenu, les textes et les images<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Was ist der Files Manager?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Kopage verf\u00fcgt \u00fcber eine Dateiverwaltung, \u00fcber die du hochgeladene Dateien beziehungsweise Bilder verwalten kannst.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Das ist hilfreich, wenn du ein bereits hochgeladenes Bild an einer anderen Stelle erneut verwenden m\u00f6chtest.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Du musst dadurch nicht f\u00fcr jede Verwendung dieselbe Datei erneut von deinem Computer hochladen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Eine \u00fcbersichtliche Dateiverwaltung wird besonders wichtig, wenn deine Website mit der Zeit viele Bilder und andere Dateien enth\u00e4lt.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Dateien sinnvoll organisieren<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Vermeide es, dieselben Bilder unn\u00f6tig mehrfach hochzuladen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Wenn eine passende Datei bereits vorhanden ist, solltest du nach M\u00f6glichkeit diese verwenden.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Auch verst\u00e4ndliche Dateinamen helfen bei der sp\u00e4teren Verwaltung.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Un nom de fichier tel que :<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><code>team-curiaweb.jpg<\/code><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">ist beispielsweise wesentlich aussagekr\u00e4ftiger als:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><code>IMG_839274.jpg<\/code><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Das gilt insbesondere dann, wenn sp\u00e4ter viele Dateien in der Medienverwaltung vorhanden sind.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Bilder bearbeiten<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Kopage bietet M\u00f6glichkeiten zur Bearbeitung von Bildern. Damit k\u00f6nnen Bilder f\u00fcr die Verwendung innerhalb der Website angepasst werden.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Trotzdem ist es sinnvoll, bereits eine geeignete Ausgangsdatei zu verwenden.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Eine integrierte Bildbearbeitung sollte nicht dazu dienen, sehr gro\u00dfe oder grunds\u00e4tzlich ungeeignete Ausgangsbilder dauerhaft zu kompensieren.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Was ist eine Fotogalerie?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Eine Fotogalerie eignet sich, wenn du mehrere zusammengeh\u00f6rige Bilder \u00fcbersichtlich pr\u00e4sentieren m\u00f6chtest.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Les domaines d'application typiques sont par exemple :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Referenzprojekte,<\/li>\n\n\n\n<li>\u00c9v\u00e9nements,<\/li>\n\n\n\n<li>Produkte oder Arbeiten,<\/li>\n\n\n\n<li>R\u00e4umlichkeiten,<\/li>\n\n\n\n<li>Team- oder Vereinsbilder.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Statt jedes Bild als separaten Content Block einzuf\u00fcgen, kannst du die Aufnahmen in einer zusammengeh\u00f6rigen Galerie darstellen.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Fotogalerie in Kopage erstellen<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u00d6ffne die Seite, auf der du deine Galerie einf\u00fcgen m\u00f6chtest, und w\u00e4hle die entsprechende Galerie-Funktion beziehungsweise das daf\u00fcr vorgesehene Modul.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">F\u00fcge anschlie\u00dfend die gew\u00fcnschten Bilder hinzu und kontrolliere ihre Reihenfolge und Darstellung.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Je nach verwendeter Galerie-Darstellung solltest du besonders darauf achten, dass die ausgew\u00e4hlten Bilder optisch zusammenpassen.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><strong>Conseil pratique :<\/strong> Eine Galerie mit zehn sorgf\u00e4ltig ausgew\u00e4hlten Bildern wirkt h\u00e4ufig besser als eine Galerie mit f\u00fcnfzig sehr \u00e4hnlichen Aufnahmen. Zeige die Bilder, die f\u00fcr Besucher tats\u00e4chlich interessant sind.<\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">Reihenfolge der Galerie-Bilder<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Die Reihenfolge kann beeinflussen, wie Besucher eine Bildserie wahrnehmen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Bei einem Projekt kannst du beispielsweise chronologisch vorgehen:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Ausgangssituation\n       \u2193\nArbeiten\n       \u2193\nZwischenergebnis\n       \u2193\nfertiges Projekt<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Bei einer allgemeinen Galerie kann dagegen das st\u00e4rkste oder aussagekr\u00e4ftigste Bild am Anfang sinnvoll sein.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Vermeide nach M\u00f6glichkeit eine v\u00f6llig zuf\u00e4llige Reihenfolge, wenn die Bilder gemeinsam eine Geschichte oder Entwicklung zeigen sollen.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Was ist ein Slider?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Ein Slider zeigt mehrere Inhalte beziehungsweise Bilder innerhalb eines gemeinsamen Bereichs nacheinander an.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Dadurch k\u00f6nnen mehrere Bilder pr\u00e4sentiert werden, ohne dass alle gleichzeitig untereinander angezeigt werden m\u00fcssen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Slider k\u00f6nnen beispielsweise f\u00fcr ausgew\u00e4hlte Referenzen oder visuelle Eindr\u00fccke verwendet werden.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Wann ist ein Slider sinnvoll?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Ein Slider sollte einen konkreten Zweck erf\u00fcllen und nicht nur verwendet werden, weil die Funktion vorhanden ist.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Wenn ein einzelnes starkes Bild die gew\u00fcnschte Aussage bereits vermittelt, kann dieses einfacher und wirkungsvoller sein.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ein Slider eignet sich eher dann, wenn mehrere Bilder tats\u00e4chlich zusammengeh\u00f6ren und innerhalb desselben Bereichs gezeigt werden sollen.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><strong>Remarque :<\/strong> Mehr Bewegung bedeutet nicht automatisch besseres Webdesign. Verwende einen Slider nur dort, wo mehrere wechselnde Inhalte f\u00fcr den Besucher einen echten Mehrwert bieten.<\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">Galerie oder Slider \u2013 was ist besser?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Beide Funktionen verfolgen unterschiedliche Ziele.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Fotogalerie\n\u2192 mehrere Bilder \u00fcbersichtlich betrachten\n\nSlider\n\u2192 mehrere Bilder im selben Pr\u00e4sentationsbereich anzeigen\n\nEinzelbild\n\u2192 eine bestimmte Aussage gezielt unterst\u00fctzen<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Wenn Besucher mehrere Fotos miteinander vergleichen oder frei ausw\u00e4hlen sollen, ist eine Galerie h\u00e4ufig geeigneter.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Wenn dagegen nur wenige visuelle Eindr\u00fccke innerhalb eines kompakten Bereichs gezeigt werden sollen, kann ein Slider sinnvoll sein.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Nicht jede Seite braucht eine Galerie oder einen Slider<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Zus\u00e4tzliche visuelle Funktionen sollten immer zum Inhalt passen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Auf einer Kontaktseite ist beispielsweise h\u00e4ufig kein gro\u00dfer Bilder-Slider notwendig. Auf einer Referenz- oder Projektseite kann eine Galerie dagegen sehr hilfreich sein.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Verwende solche Funktionen deshalb gezielt und nicht automatisch auf jeder Seite.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Bildqualit\u00e4t innerhalb einer Galerie<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">In einer Galerie fallen Unterschiede zwischen den einzelnen Bildern besonders schnell auf.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Stark unterschiedliche Aufl\u00f6sungen, Seitenverh\u00e4ltnisse oder Bildstile k\u00f6nnen die Darstellung unruhig wirken lassen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Wenn m\u00f6glich, bereite zusammengeh\u00f6rige Galerie-Bilder deshalb in \u00e4hnlicher Qualit\u00e4t und mit einem passenden Seitenverh\u00e4ltnis vor.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Zu viele Bilder vermeiden<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Eine umfangreiche Bildergalerie kann nicht nur un\u00fcbersichtlich werden, sondern auch zus\u00e4tzliche Daten \u00fcbertragen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u00dcberlege deshalb, welche Bilder tats\u00e4chlich notwendig sind.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Bei einer Referenzseite m\u00fcssen beispielsweise nicht zwanzig fast identische Aufnahmen desselben Motivs gezeigt werden.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Eine gezielte Auswahl erleichtert Besuchern die Orientierung und reduziert gleichzeitig unn\u00f6tige Datenmengen.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Bilder auf dem Smartphone kontrollieren<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Ein Bild kann auf einem Desktop-Monitor hervorragend aussehen und auf einem Smartphone einen ung\u00fcnstigen Ausschnitt zeigen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Kontrolliere deshalb insbesondere:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>gro\u00dfe Titel- und Hintergrundbilder,<\/li>\n\n\n\n<li>Text-Bild-Content-Blocks,<\/li>\n\n\n\n<li>Galerien,<\/li>\n\n\n\n<li>Slider,<\/li>\n\n\n\n<li>und Bilder mit wichtigen Motiven am Rand.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Weitere Hinweise zur mobilen Darstellung findest du unter <a href=\"\/fr\/aide\/createur-de-site-web\/design-adaptatif-kopage\/\">Design adaptatif : Optimiser le site web Kopage pour smartphones et tablettes<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Text nicht als Bild einbauen<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Wichtige Informationen sollten nach M\u00f6glichkeit als echter Text auf der Website stehen und nicht ausschlie\u00dflich Bestandteil eines Bildes sein.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Das betrifft beispielsweise \u00dcberschriften, Kontaktinformationen oder l\u00e4ngere Beschreibungen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Echter Text l\u00e4sst sich auf unterschiedlichen Bildschirmgr\u00f6\u00dfen besser darstellen und kann von Suchmaschinen und unterst\u00fctzenden Technologien besser verarbeitet werden.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Bilder und Suchmaschinenoptimierung<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Bilder k\u00f6nnen auch f\u00fcr die Suchmaschinenoptimierung relevant sein. Entscheidend ist dabei vor allem, dass sie sinnvoll in den Seiteninhalt eingebunden werden und technisch vern\u00fcnftig eingesetzt werden.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Verwende aussagekr\u00e4ftige Dateinamen und \u2013 sofern die entsprechende Funktion im verwendeten Bereich zur Verf\u00fcgung steht \u2013 eine sinnvolle Beschreibung beziehungsweise einen Alternativtext f\u00fcr inhaltlich relevante Bilder.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ein Alternativtext sollte beschreiben, was f\u00fcr das Verst\u00e4ndnis des Bildes beziehungsweise des Seiteninhalts relevant ist, und nicht mit einer Liste von Suchbegriffen gef\u00fcllt werden.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Die allgemeinen SEO-Einstellungen behandeln wir unter <a href=\"\/fr\/aide\/createur-de-site-web\/kopage-seo-einstellungen\/\">SEO avec Kopage : titres de pages, m\u00e9tadonn\u00e9es, URL et optimisation pour les moteurs de recherche<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Urheberrechte bei Bildern beachten<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Nur weil ein Bild im Internet gefunden werden kann, bedeutet das nicht, dass du es auf deiner eigenen Website verwenden darfst.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Verwende deshalb eigene Bilder oder Dateien, f\u00fcr deren Nutzung du die erforderlichen Rechte besitzt.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Bei Bildern aus Bilddatenbanken solltest du die jeweiligen Lizenzbedingungen beachten und pr\u00fcfen, ob beziehungsweise in welcher Form eine Quellen- oder Urheberangabe erforderlich ist.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><strong>Important :<\/strong> Lade keine Bilder aus der Google-Bildersuche oder von fremden Websites herunter und verwende sie ungepr\u00fcft auf deiner Website. Die Auffindbarkeit eines Bildes sagt nichts \u00fcber deine Nutzungsrechte aus.<\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">Bilder sp\u00e4ter austauschen<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Du kannst Bilder auf deiner Kopage Website sp\u00e4ter aktualisieren oder ersetzen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Das ist beispielsweise sinnvoll, wenn neue Teamfotos vorhanden sind, Referenzen aktualisiert werden oder ein bisher verwendetes Bild nicht mehr zum Erscheinungsbild deiner Website passt.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Kontrolliere nach dem Austausch, ob der neue Bildausschnitt weiterhin zum betreffenden Content Block beziehungsweise zur Galerie passt.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Bilder l\u00f6schen<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Wenn du eine Bilddatei nicht mehr ben\u00f6tigst, solltest du vor dem endg\u00fcltigen L\u00f6schen pr\u00fcfen, ob sie noch an einer anderen Stelle der Website verwendet wird.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Das ist besonders wichtig, wenn du Dateien \u00fcber eine zentrale Dateiverwaltung mehrfach eingesetzt hast.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><strong>Attention :<\/strong> 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.<\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">Typische Fehler bei Bildern<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">H\u00e4ufige Probleme entstehen durch unn\u00f6tig gro\u00dfe Dateien, ungeeignete Bildausschnitte, unscharfe Bilder oder sehr unterschiedliche Bildstile innerhalb derselben Seite.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Auch zu viele Slider und Galerien k\u00f6nnen eine Website \u00fcberladen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ein weiteres Problem sind Bilder, die zwar dekorativ aussehen, aber nicht zum eigentlichen Inhalt passen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Verwende Bilder deshalb gezielt und betrachte sie als Bestandteil deiner Kommunikation \u2013 nicht nur als Dekoration.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">V\u00e9rification avant publication<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Nach gr\u00f6\u00dferen Bild\u00e4nderungen lohnt sich eine kurze Kontrolle:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Sind alle Platzhalterbilder ersetzt?\n        \u2193\nSind die Bilder scharf?\n        \u2193\nSind die Dateien sinnvoll dimensioniert?\n        \u2193\nStimmen die Bildausschnitte?\n        \u2193\nFunktionieren Galerie und Slider?\n        \u2193\nIst die Reihenfolge sinnvoll?\n        \u2193\nSmartphone-Darstellung pr\u00fcfen\n        \u2193\nSeite im normalen Browser testen<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Quelle est la suite ?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Nachdem du Seiten, Content Blocks und Bilder verwalten kannst, ist eine weitere h\u00e4ufig ben\u00f6tigte Funktion das Kontaktformular.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Damit k\u00f6nnen Besucher direkt \u00fcber deine Website Anfragen und andere Informationen \u00fcbermitteln.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">C'est pourquoi nous continuons avec <a href=\"\/fr\/aide\/createur-de-site-web\/kopage-formulare-erstellen\/\">Cr\u00e9er des formulaires et des formulaires de contact avec Kopage<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">R\u00e9sum\u00e9<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Im klassischen Kopage Website Builder kannst du einzelne Bilder innerhalb deiner Seiten verwenden und mehrere Bilder \u00fcber Fotogalerien oder Slider pr\u00e4sentieren.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Bereite Bilder m\u00f6glichst passend f\u00fcr ihren tats\u00e4chlichen Einsatzzweck vor. Achte auf ausreichende Qualit\u00e4t, vern\u00fcnftige Dateigr\u00f6\u00dfen und einen geeigneten Bildausschnitt.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Eine Fotogalerie eignet sich f\u00fcr mehrere zusammengeh\u00f6rige Bilder, w\u00e4hrend ein Slider mehrere Bilder innerhalb eines gemeinsamen Pr\u00e4sentationsbereichs darstellen kann. F\u00fcr viele Inhalte reicht dagegen ein einzelnes, gut ausgew\u00e4hltes Bild vollkommen aus.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Kontrolliere Bilder, Galerien und Slider immer auch auf kleineren Bildschirmgr\u00f6\u00dfen und verwende ausschlie\u00dflich Bildmaterial, f\u00fcr dessen Nutzung du die notwendigen Rechte besitzt.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Gute Bildgestaltung bedeutet nicht, m\u00f6glichst viele Bilder einzusetzen. Entscheidend sind passende Motive, gute Qualit\u00e4t, vern\u00fcnftige Dateigr\u00f6\u00dfen und ein klarer Zweck innerhalb der jeweiligen Seite.<\/strong><\/p>","protected":false},"excerpt":{"rendered":"<p>Bilder geh\u00f6ren zu den wichtigsten Gestaltungselementen einer Website. Im klassischen Kopage Website Builder kannst du eigene Bilder verwenden, vorhandene Bilder austauschen und mehrere Aufnahmen \u00fcber Fotogalerien oder Slider pr\u00e4sentieren. Dabei solltest du nicht nur darauf achten, wie ein Bild aussieht. Dateigr\u00f6\u00dfe, Abmessungen, Bildausschnitt und die Darstellung auf unterschiedlichen Bildschirmgr\u00f6\u00dfen beeinflussen ebenfalls die Qualit\u00e4t deiner Website. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_joinchat":[],"footnotes":""},"doc_category":[84],"doc_tag":[],"class_list":["post-22828","docs","type-docs","status-publish","hentry","doc_category-website-baukasten"],"year_month":"2026-09","word_count":2270,"total_views":"4","reactions":{"happy":"0","normal":"0","sad":"0"},"author_info":{"name":"Silvio Mazenauer","author_nicename":"admin-curia","author_url":"https:\/\/www.curiaweb.ch\/fr\/author\/admin-curia\/"},"doc_category_info":[{"term_name":"Website-Baukasten","term_url":"https:\/\/www.curiaweb.ch\/fr\/hilfe-kategorie\/website-baukasten\/"}],"doc_tag_info":[],"knowledge_base_info":[],"knowledge_base_slug":[],"_links":{"self":[{"href":"https:\/\/www.curiaweb.ch\/fr\/wp-json\/wp\/v2\/docs\/22828","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.curiaweb.ch\/fr\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/www.curiaweb.ch\/fr\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/www.curiaweb.ch\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.curiaweb.ch\/fr\/wp-json\/wp\/v2\/comments?post=22828"}],"version-history":[{"count":1,"href":"https:\/\/www.curiaweb.ch\/fr\/wp-json\/wp\/v2\/docs\/22828\/revisions"}],"predecessor-version":[{"id":22830,"href":"https:\/\/www.curiaweb.ch\/fr\/wp-json\/wp\/v2\/docs\/22828\/revisions\/22830"}],"wp:attachment":[{"href":"https:\/\/www.curiaweb.ch\/fr\/wp-json\/wp\/v2\/media?parent=22828"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/www.curiaweb.ch\/fr\/wp-json\/wp\/v2\/doc_category?post=22828"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/www.curiaweb.ch\/fr\/wp-json\/wp\/v2\/doc_tag?post=22828"}],"curies":[{"name":"Bien jou\u00e9","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}