Creating images, photo galleries, and sliders in Kopage

Images are among the most important design elements of a website. In the classic Kopage Website Builder, you can use your own images, replace existing ones, and present multiple shots via photo galleries or sliders.

In doing so, you should not only pay attention to how an image looks. File size, dimensions, cropping, and how it is displayed on different screen sizes also affect the quality of your website.

In this guide, we show you how to use images effectively in Kopage and when a single image, a photo gallery, or a slider is appropriate.

Briefly explained: Use single images for regular page content, a photo gallery for multiple related shots, and a slider when multiple images are to be shown within a shared presentation area.

Using images in a Jimdo website #

Images can be used in different places on your website in Kopage.

Typical examples are images within content blocks, larger visual areas, team or reference images, as well as images within a gallery or slider.

Which variant makes sense depends on what task the image is supposed to fulfill.

For example, a photo next to a service description does not need a photo gallery. If, on the other hand, you want to present multiple shots of a project, a gallery can be much clearer.

Upload own image #

If you want to replace an existing example image with your own image or create a new image area, you can use your own image file in Kopage.

To do this, select the image function within the relevant content area and upload the desired file or select an existing image from your file manager.

Before uploading a file, you should check whether it is suitable for use on a website.

Practical Tip: Prepare images for their intended use before uploading them, if possible. Very large camera or smartphone originals cause unnecessary data volumes, even though they are displayed much smaller on the website.

Replace existing image #

Many templates and content blocks already contain sample images. These serve as placeholders and can be replaced with your own images.

When replacing it, you should ensure that the new image fits the intended area.

A very tall portrait image can, for example, be unsuitable if the content area is intended for a wide landscape format.

Therefore, always check the actual image section on the website after replacing it.

Which image formats are suitable for a website? #

For normal website images, modern web formats as well as JPEG and PNG are used in particular.

Which format makes sense depends on the image content.

For photographs, a compressed image format is suitable. For graphics or logos, however, a format with transparency may be required.

What is crucial is a sensible compromise between image quality and file size.

Important: An image file that is as large as possible does not automatically mean better display. For websites, an appropriate file size is just as important as the visible image quality.

Resize images before uploading #

Modern smartphones and digital cameras capture images with very high resolutions. Such original files are often unnecessarily large for direct use on a standard website.

If an image on your website is only displayed at a width of around 1,000 pixels, for example, an original file that is several thousand pixels wide usually does not provide any corresponding benefit for the visitor.

She can increase the amount of data to be transmitted instead.

Therefore, resize images to a size that is reasonable for their actual intended use and compress them without unnecessarily degrading the visible quality.

File size and loading time #

Images are often among the largest files on a website. Several unnecessarily large photos can therefore significantly impact the loading time.

This is particularly relevant on smartphones and slower internet connections.

If a page contains ten large photos, the browser has to transfer significantly more data than with sensibly optimized images.

Image optimization is therefore not only a design measure, but also a technical one.

Choose the right framing #

A good source image does not automatically work in every layout.

When making your selection, you should consider how much space is allocated for the image and what aspect ratio the corresponding area has.

An example:

Wide content area
→ mostly landscape format

Portrait
→ frequently portrait format

uniform gallery
→ image aspect ratios as consistent as possible

This does not mean that all images have to have the exact same format. However, a consistent image style can make a gallery or page appear significantly more tranquil.

Using images within content blocks #

Content blocks can contain different combinations of texts and images.

With this, for example, you can display text next to an image or build a larger visual area within a page.

We explain how to generally select and edit content blocks at Create content with Kopage: editing content blocks, texts, and images.

What is the Files Manager? #

Kopage has a file manager that you can use to manage uploaded files or images.

This is useful if you want to reuse an already uploaded image in another place.

This means you don't have to upload the same file from your computer again for every use.

Clear file management becomes especially important when your website contains many images and other files over time.

Organize files effectively #

Avoid uploading the same images unnecessarily multiple times.

If a matching file already exists, you should use it if possible.

Understandable file names also help with later management.

A filename like:

team-curiaweb.jpg

is, for example, much more meaningful than:

IMG_839274.jpg

This is especially true if there are many files in the media library later.

Edit pictures #

Kopage offers image editing options. This allows images to be customized for use within the website.

Nevertheless, it makes sense to use a suitable source file beforehand.

An integrated image editor should not serve to permanently compensate for very large or fundamentally unsuitable source images.

What is a photo gallery? #

A photo gallery is useful if you want to present several related pictures clearly.

Typical areas of application include, for example:

• Reference projects,
• Events,
• Products or works,
• Premises,
• Team or club photos.

Instead of inserting each image as a separate content block, you can display the shots in a cohesive gallery.

Create a photo gallery in Kopage #

Open the page where you want to insert your gallery and select the corresponding gallery function or the module provided for it.

Then add the desired images and check their order and display.

Depending on the gallery view used, you should pay special attention to ensuring that the selected images match visually.

Practical Tip: A gallery with ten carefully selected images often has a better impact than a gallery with fifty very similar shots. Show the images that are actually interesting to visitors.

Order of the gallery images #

The order can influence how visitors perceive a series of images.

For example, in a project you can proceed chronologically:

Initial situation
       ↓
Working
       ↓
Intermediate result
       ↓
Finished project

In a general gallery, on the other hand, the strongest or most impactful image at the beginning can make sense.

Avoid a completely random order if possible, when the images are intended to show a story or development together.

What is a slider? #

A slider displays multiple contents or images one after the other within a shared area.

This allows multiple images to be presented without having to display all of them stacked vertically at the same time.

Sliders can be used, for example, for selected references or visual impressions.

When is a slider useful? #

A slider should serve a specific purpose and not just be used because the feature is available.

If a single strong image already conveys the desired message, this can be simpler and more effective.

A slider is more suitable when multiple images actually belong together and are to be displayed within the same area.

Note: More movement does not automatically mean better web design. Only use a slider where multiple changing contents offer real added value for the visitor.

Gallery or slider – which is better? #

Both functions pursue different goals.

Photo gallery
→ view multiple images clearly

Slider
→ display multiple images in the same presentation area

Single image
→ specifically support a particular statement

If visitors need to compare multiple photos with each other or freely select them, a gallery is often more suitable.

If, on the other hand, only a few visual impressions are to be shown within a compact area, a slider can make sense.

Not every page needs a gallery or a slider #

Additional visual features should always match the content.

For example, a large image slider is often unnecessary on a contact page. On a reference or project page, however, a gallery can be very helpful.

Therefore, use such features purposefully and not automatically on every page.

Image quality within a gallery #

In a gallery, differences between the individual pictures become apparent particularly quickly.

Significantly different resolutions, aspect ratios, or visual styles can make the presentation look uneven.

If possible, prepare related gallery images in a similar quality and with a matching aspect ratio.

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.

For further information on mobile display, please visit Responsive Design: Optimizing Kopage website for smartphones and tablets.

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 with Kopage: Page titles, metadata, URLs, and search engine optimization.

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.

Important: 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.

Attention: 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

What's next? #

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.

Therefore, we continue with Create forms and contact forms with Kopage.

Summary #

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.