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.

Avoid too many images #

An extensive image gallery can not only become cluttered, but also transfer additional data.

Therefore, consider which images are actually necessary.

For example, a reference page does not need to show twenty almost identical shots of the same subject.

A targeted selection makes it easier for visitors to find their way around while simultaneously reducing unnecessary amounts of data.

Check pictures on the smartphone #

An image can look great on a desktop monitor and show an unfavorable crop on a smartphone.

Therefore, check in particular:

• large title and background images,
• Text-image content blocks,
• Galleries,
• Slider,
• and images with important motifs on the edge.

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

Do not include text as an image #

Important information should, if possible, be provided as actual text on the website and not solely as part of an image.

This applies, for example, to headings, contact information, or longer descriptions.

Real text can be displayed better on different screen sizes and can be better processed by search engines and assistive technologies.

Images and Search Engine Optimization #

Images can also be relevant for search engine optimization. The crucial factor is that they are meaningfully integrated into the page content and used properly from a technical standpoint.

Use meaningful file names and – if the corresponding function is available in the area used – a sensible description or alternative text for images that are relevant to the content.

An alternative text should describe what is relevant for understanding the image or the page content, and should not be stuffed with a list of search terms.

We cover the general SEO settings under SEO with Kopage: Page titles, metadata, URLs, and search engine optimization.

Respect image copyrights #

Just because an image can be found on the internet doesn't mean you are allowed to use it on your own website.

Therefore, use your own images or files for which you have the necessary rights.

When using images from image databases, you should observe the respective license terms and check whether and in what form a source or copyright attribution is required.

Important: Do not download images from Google Image Search or third-party websites and use them on your website without verifying them first. The findability of an image says nothing about your usage rights.

Replace images later #

You can update or replace images on your Kopage website later.

This is useful, for example, when there are new team photos, references are updated, or an image used previously no longer matches the look and feel of your website.

Check after the replacement whether the new image crop still fits the relevant content block or the gallery.

Delete pictures #

If you no longer need an image file, you should check whether it is still used elsewhere on the website before finally deleting it.

This is especially important if you have used files multiple times via a central file management system.

Attention: Do not hastily remove a file from the file management if you are not sure whether it is still used on another page, in a gallery, or in another area.

Typical mistakes in images #

Common problems arise from unnecessarily large files, unsuitable image crops, blurry images, or very different image styles within the same page.

Too many sliders and galleries can also overload a website.

Another problem is images that look decorative but do not actually fit the content.

Use images purposefully and view them as a part of your communication – not just as decoration.

Check before publication #

After major image changes, a quick check is worthwhile:

Are all placeholder images replaced?
        ↓
Are the images sharp?
        ↓
Are the files reasonably dimensioned?
        ↓
Are the image croppings correct?
        ↓
Do gallery and slider work?
        ↓
Is the order logical?
        ↓
Check smartphone display
        ↓
Test page in normal browser

What's next? #

After you can manage pages, content blocks, and images, another frequently needed feature is the contact form.

This allows visitors to submit inquiries and other information directly through your website.

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

Summary #

In the classic Kopage website builder, you can use individual images within your pages and present multiple images via photo galleries or sliders.

Prepare images as appropriately as possible for their actual intended use. Pay attention to sufficient quality, reasonable file sizes, and a suitable image crop.

A photo gallery is suitable for multiple related images, while a slider can display several images within a shared presentation area. For many types of content, on the other hand, a single, well-chosen image is completely sufficient.

Always check images, galleries, and sliders on smaller screen sizes as well, and use exclusively image material for which you possess the necessary rights of use.

Good image composition does not mean using as many images as possible. The decisive factors are suitable motifs, good quality, reasonable file sizes, and a clear purpose within the respective page.