Bilder für deine Website verbinden

Bilder verbinden oder einzeln zeigen?

Eine Collage fasst mehrere Bilder in einer Bilddatei zusammen. Sie kann auf einer Projektseite einen kompakten Überblick geben oder ein Motiv neben einem wichtigen Detail zeigen. Die Bilder sollten gemeinsam eine Frage beantworten, etwa wie eine fertige Küche aussieht und wie ihre Stauraumlösungen funktionieren.

Zeige Bilder einzeln, wenn jedes eine eigene Erklärung, einen Link oder eine genaue Betrachtung braucht. In einer Produktgalerie können Besucher einzelne Ansichten untersuchen, statt sie in einem kleinen Raster anzusehen.

Eine Collage behält ihre Anordnung auch in kleinerer Darstellung. Einzelne Bilder im Website-Editor können auf dem Smartphone untereinander erscheinen; in einer Datei verbundene Bilder bleiben an ihrem Platz. Das macht die Anordnung vorhersehbar, schränkt aber die Möglichkeiten der Seite ein, jedes Foto in einer sinnvollen Größe darzustellen.

Bilder mit unterschiedlichen Informationen wählen

Zwei bis vier Bilder sind ein praktischer Ausgangspunkt für einen Projektüberblick. Gib jedem eine Aufgabe: Die Gesamtansicht zeigt den Zusammenhang, eine Nahaufnahme eine sonst schwer erkennbare Eigenschaft. Zwei fast identische Gesamtansichten sagen meist weniger aus als eine Übersicht mit einem hilfreichen Detail.

Achte auf zusammenpassende Farben und Beleuchtung. Bei einem Vorher-nachher-Vergleich erleichtern ähnliche Perspektiven, Ausschnitte und Maßstäbe die Beurteilung. Vermeide Ausschnitte, die einen wichtigen Unterschied verbergen. Unser Leitfaden zur Bildauswahl für Websites erklärt, was die einzelnen Bilder vermitteln sollten.

Ein passendes Layout wählen

Im Drei-Bilder-Layout von Pixilo steht das erste Bild groß links, die beiden nächsten stehen rechts untereinander. Ändere die Reihenfolge, um dem gewünschten Foto mehr Platz zu geben. Ein normales Raster wird von links nach rechts und dann von oben nach unten gefüllt. Bleiben Felder leer, erscheint dort der gewählte Hintergrund.

Gesamtformat und Bildfelder aufeinander abstimmen

Breite und Höhe der Collage bestimmen die Form der Bildfelder. Eine quadratische Collage hat nicht automatisch quadratische Felder: Bei zwei Bildern nebeneinander ist jedes Feld hochkant. Ein Raster mit zwei Reihen und zwei Spalten ergibt annähernd quadratische Felder, wenn Abstände und Außenränder klein sind.

Für zwei Hochformatfotos nebeneinander kannst du eine höhere Collage ausprobieren, damit die Felder hochkant bleiben. In einer breiten, flachen Collage wird beim Ausfüllen der Felder oben und unten mehr abgeschnitten. Zwei Querformatfotos in einer Reihe können dagegen in einer breiteren Collage mehr von der jeweiligen Szene zeigen.

Gehe vom verfügbaren Platz auf der Seite aus und probiere eine passende Anordnung und Form. Verlangt die Website ein festes Format, behalte es bei und ändere stattdessen das Layout oder die Bildauswahl. Entsperre in Pixilo das Seitenverhältnis, um die Form zu ändern. Sperre es wieder, wenn du nur die Größe ändern und die Proportionen beibehalten möchtest.

Das ganze Bild zeigen oder den Rahmen ausfüllen?

Ganzes Bild anzeigen erhält alle Bildränder, kann aber Platz um das Foto frei lassen. Das eignet sich für Logos, Diagramme oder Produktfotos, bei denen ein Beschnitt wichtige Informationen entfernen würde.

Rahmen ausfüllen beschneidet das Bild passend zum Feld, ohne es zu verzerren. Die Bilder im Raster bekommen einheitliche Kanten, doch du solltest prüfen, was wegfällt. Wähle jedes Vorschaubild und verschiebe den Ausschnitt so, dass das wichtige Motiv sichtbar bleibt.

Passen ein Gesicht und die Handlung daneben nicht zusammen ins Feld, probiere ein anderes Gesamtformat oder Layout, zeige das ganze Bild oder wähle ein anderes Foto. Das Verschieben eines Ausschnitts kann nicht alle Teile einer breiten Szene in ein schmales Feld bringen. Nutze zunächst das Zuschneidewerkzeug, wenn du den ursprünglichen Ausschnitt genauer festlegen möchtest, und prüfe anschließend, wie er in die Collage passt.

Bilder durch Abstände voneinander trennen

Ein kleiner Abstand macht benachbarte Fotos leichter unterscheidbar. Ein Außenrand rahmt die Collage ein, nimmt den Bildern aber Platz. Halte beides eher klein, wenn die Collage in einer schmalen Spalte steht. Bei kleinerer Darstellung schrumpfen auch die Abstände und Ränder.

Wähle einen Hintergrund, der zu den Fotos und zur Seite passt. Er erscheint in Zwischenräumen, Außenrändern und freien Flächen neben Bildern, die ihren Rahmen nicht ausfüllen. Eine andere Hintergrundfarbe oder Transparenz entfernt keinen Hintergrund, der bereits zum Foto gehört.

Bilder mit Pixilo verbinden

1. Öffne das Werkzeug zum Verbinden von Bildern und wähle deine JPG-, PNG- oder WebP-Dateien.
2. Wähle das Layout und ändere die Reihenfolge mit den Pfeilen unter den Vorschaubildern.
3. Lege Breite und Höhe der gesamten Collage einschließlich Abständen und Außenrand fest.
4. Zeige die Bilder vollständig oder fülle die Rahmen aus. Wähle bei einem Beschnitt jedes Vorschaubild und passe die Position an. Regler sind nur für die Richtungen verfügbar, in denen das Bild beschnitten wird.
5. Lege Abstände, Außenrand und Hintergrundfarbe oder Transparenz fest.
6. Lade die PNG-Datei herunter, prüfe ihre Qualität und bereite die Version für deine Website vor.

Mit Bilder hinzufügen kannst du weitere Fotos ergänzen, ohne Reihenfolge, Ausschnitte oder Einstellungen zu verlieren. Bilder ersetzen tauscht die Auswahl aus. Das Layout mit einem großen und zwei kleinen Bildern benötigt genau drei Fotos; ein viertes Bild stellt das Layout auf ein Raster um.

Beispiel: vier Fotos einer fertigen Küche

Ein Renovierungsbetrieb möchte ein Projekt kompakt vorstellen. Er wählt eine Gesamtansicht des Raums, das Innere eines Stauraumschranks, ein Arbeitsplattendetail und die Leuchten über der Arbeitsfläche. Jedes Foto zeigt einen anderen Aspekt derselben abgeschlossenen Arbeit.

Der Betrieb beginnt mit einem 2 × 2-Raster, damit Besucher alle vier Aspekte sehen. Wäre die Gesamtansicht das wichtigste Verkaufsargument, könnte das Drei-Bilder-Layout ihr mehr Platz geben. Zwei Details würden daneben stehen, das vierte Foto an anderer Stelle auf der Seite.

Die Seite zeigt die Collage höchstens 600 Pixel breit. Exportiere sie für dieses Beispiel mit 1200 × 800 Pixeln, 16 Pixel Abstand, 24 Pixel Außenrand und weißem Hintergrund. Die Datei ist doppelt so breit wie die Darstellung und bietet damit zusätzliche Details für Displays mit höherer Pixeldichte. Das sind Beispielwerte, keine vorgeschriebene Größe für jede Website. Unser Leitfaden zu Website-Bildgrößen erklärt die Wahl geeigneter Abmessungen.

Fülle die Rahmen aus und setze die Gesamtansicht zuerst, gefolgt von Schrank, Arbeitsplatte und Beleuchtung. Passe die Ausschnitte so an, dass die jeweils vorgestellte Eigenschaft sichtbar ist.

Bei 360 Pixel Darstellungsbreite auf dem Smartphone ist jedes Foto in dieser Anordnung nur etwa 170 Pixel breit. Schrank und Leuchten bleiben erkennbar, doch nehmen wir an, die Arbeitsplattenfuge ist zu klein zum Beurteilen. Nimm dieses Foto aus der Collage und zeige es einzeln größer. Ordne die übrigen drei Fotos mit der Gesamtansicht als Hauptbild an. Höhere Exportabmessungen allein würden der Fuge auf der Seite nicht mehr Platz geben.

Die Collage im mobilen Seitenlayout prüfen

Sieh dir die Seite in Desktop- und Smartphonebreite ohne Zoom an. Prüfe, was Besucher wirklich verstehen können: Lassen sich zwei Oberflächen vergleichen, die Stauraumlösung erkennen oder der Ablauf nachvollziehen? Das allgemeine Motiv zu erkennen reicht nicht, wenn das wichtige Detail fehlt.

Prüfe das Bild innerhalb der Seite, nicht nur die heruntergeladene Datei. Das Website-Theme kann es zusätzlich beschneiden, damit es in einen festen Bildbereich passt. Ändere diesen Bereich oder die Anzeigeeinstellungen, wenn Teile der Collage wegfallen.

Wirkt die Anordnung zu voll, vereinfache sie oder zeige die Bilder einzeln. Unterstützt dein Website-Baukasten ein eigenes mobiles Bild, erstelle eine Version mit weniger Fotos oder einer Anordnung untereinander. Unser Leitfaden zu responsiven Bildern erklärt dieses Vorgehen.

Lass Überschriften und wichtige Beschriftungen als Seitentext stehen. Text im Bild schrumpft mit und lässt sich schwerer aktualisieren. Ergänze erklärende Bildunterschriften im Website-Editor.

Bildunterschrift und hilfreichen Alternativtext ergänzen

Eine Bildunterschrift kann das Projekt benennen und die Reihenfolge erklären. Für das Küchenraster mit vier Fotos etwa: „Abgeschlossene Küchenrenovierung. Von oben links im Uhrzeigersinn: Gesamtansicht, Auszugsschrank, Arbeitsflächenbeleuchtung und Arbeitsplattendetail.“ Passe die Beschreibung an, wenn du Bilder verschiebst oder entfernst.

Eine informative Collage in einer Datei braucht einen Alternativtext für das Gesamtbild. Im Küchenbeispiel könnte er lauten: „Renovierte Küche mit Auszugsschrank, bündiger Arbeitsplattenfuge und Leuchten über der Arbeitsfläche.“ Beschreibe das Wesentliche, statt nur „Collage aus vier Fotos“ zu schreiben.

Bei einem ausführlichen Vergleich gehören die wichtigsten Unterschiede in den Seitentext neben dem Bild, statt die ganze Erklärung in den Alternativtext zu zwängen. Die W3C-Anleitung zu komplexen Bildern erklärt, wie ein kurzer Alternativtext und eine ausführlichere Beschreibung zusammenwirken. Unser Leitfaden zu Alternativtext und Dateinamen hilft dir bei Beschreibungen, die zur Seite passen.

Die Datei für deine Website vorbereiten

Pixilo speichert die Collage als PNG. Transparenz bleibt erhalten, und beim Export kommt keine weitere verlustbehaftete Kompression hinzu. Fehlende Details der Ausgangsfotos werden dadurch nicht wiederhergestellt. Ein kleines Bild kann beim Vergrößern auf sein Feld unscharf wirken, besonders nach einem engen Beschnitt. Prüfe jedes Foto in der heruntergeladenen Collage. Ist eines deutlich unschärfer als die anderen, verwende ein größeres Original oder ein kleineres Bildfeld.

Eine Fotocollage kann eine große PNG-Datei ergeben. Erstelle mit PNG zu WebP oder, wenn du keine Transparenz brauchst, PNG zu JPG eine Kopie für deine Website. Vergleiche Dateigröße und sichtbare Qualität mit dem PNG. Achte beim Einstellen der Qualität auf feine Details und Kanten: Die kleinste Datei hilft nicht, wenn die gezeigte Eigenschaft nicht mehr erkennbar ist.

Soll der Seitenhintergrund durchscheinen, behalte eine Version mit Transparenz. JPG unterstützt sie nicht. Unser Leitfaden zu Bildformaten für Websites behandelt die Auswahl genauer.

Lade die gewählte Version hoch und prüfe, ob die Seite die richtige Datei und die vorgesehenen Abmessungen verwendet. Bewahre die Originalfotos für spätere Änderungen auf: In der heruntergeladenen PNG-Datei lassen sich die Fotos nicht mehr neu anordnen.