// m-01galerie
Galerie & Lightbox.
Bilder im Raster oder Masonry-Layout, auf Klick groß in der Lightbox. Bedienbar per Tastatur, Wischen und Klick — mit Vor- und Zurück durch die ganze Reihe.
output: grid + lightbox
// komponente · gallery
Portfolio & Media Galerie.
Du willst eine Bildergalerie erstellen und in deine Website einbauen? siteway baut den Baustein: Portfolio oder Fotogalerie mit Lightbox, Filtern und optionalem Video. Die Bilder liefern wir in AVIF und WebP aus, lazy geladen und responsive — schnell trotz vieler Motive.
komponente
baustein: einzeln buchbar
cms: typo3 · wordpress · statamic
output: galerie + lightbox
// definition
Was ist eine Portfolio- & Media-Galerie?
Eine Portfolio- und Media-Galerie ist eine Website-Komponente, die Bilder und optional Videos in einem Raster zeigt und in der Großansicht als Lightbox öffnet. Besucher filtern nach Kategorien, die Motive laden erst beim Scrollen und werden in modernen Formaten wie AVIF und WebP ausgeliefert.
Wichtig: Das hier ist ein Baustein, kein Baukasten. Wir bauen die Galerie in deine bestehende oder neue Website ein — angebunden an dein CMS, in deinem Design, mit deinen Bildern. Du bekommst keine fremde Plattform, auf die du Fotos hochlädst, sondern eine Galerie, die deiner Seite gehört.
// warum
Bilder verkaufen — wenn sie laden.
zeigen ist die hälfte · schnell zeigen die andere
Wer Arbeit zeigt — Projekte, Produkte, Referenzen, Fotos —, überzeugt über Bilder, nicht über Text. Eine gute Galerie führt den Blick, macht Details in der Lightbox groß und lässt Besucher gezielt nach dem filtern, was sie suchen. Aus Ansehen wird Interesse, aus Interesse eine Anfrage.
Das Problem der meisten Galerien: Sie sind schön, aber schwer. Dutzende unkomprimierte Bilder auf einmal, und die Seite lädt Sekunden — auf dem Handy verliert man die Besucher genau dann. Wir bauen die Galerie andersherum: erst schnell, dann schön. Deshalb ist die Performance hier kein Extra, sondern Teil der Komponente.
// funktionen · 6 module
Was die Galerie kann.
jedes modul mit output
Sechs Bausteine, eine Galerie. Was du brauchst, bauen wir ein — was du nicht brauchst, bleibt weg. Jeder Baustein hat ein greifbares Ergebnis im Frontend.
// m-02format
AVIF & WebP.
Jedes Bild kommt automatisch als AVIF und WebP mit JPEG-Fallback — rund 30 bis 50 % kleiner als klassisches JPEG. Der Browser nimmt das kleinste Format, das er kann.
output: avif · webp · fallback
// m-03laden
Lazy & responsive.
Bilder laden erst, wenn sie in Sichtweite scrollen. Per responsive srcset bekommt jedes Gerät nur die Auflösung, die es wirklich zeigt — kein 4K-Foto auf dem Handy.
output: lazy + srcset
// m-04filter
Filter & Kategorien.
Besucher schalten die Galerie nach Kategorie, Tag oder Projekt um — ohne Neuladen der Seite. Praktisch, sobald mehr als eine Handvoll Motive zusammenkommt.
output: kategorie-filter
// m-05video
Video optional.
Bewegtbild in derselben Galerie: selbst gehostet oder eingebunden. Erst lädt das Vorschaubild, das Video startet auf Klick — so bleibt die Ladezeit auch mit Video niedrig.
output: poster + video
// m-06pflege
Pflege im CMS.
Bilder, Reihenfolge, Kategorien und Alt-Texte pflegt deine Redaktion selbst — in TYPO3, WordPress oder Statamic. Umwandlung und Auflösungen entstehen automatisch beim Upload.
output: redaktion + auto-render
// performance
Viele Bilder, trotzdem schnell.
core web vitals · auch bei 200 motiven
Eine Galerie ist der härteste Test für die Ladezeit einer Seite — nirgends kommen so viele große Dateien auf einmal zusammen. Die meisten Galerie-Tools lösen das gar nicht: Sie laden alle Bilder in Originalgröße, und die Core Web Vitals kippen. Wir drehen jeden Hebel, den es gibt.
Der größte ist das Format. AVIF ist laut den Referenzdaten von Google und der Alliance for Open Media rund 50 % kleiner als ein vergleichbares JPEG, WebP etwa 25 bis 34 %. Dazu kommen Lazy Loading, responsive srcset und ein bevorzugt geladenes erstes Bild. Zusammen halten sie den Ladewert LCP unter 2,5 s — auch wenn die Galerie hunderte Motive zeigt.
- 01AVIF & WebP — kleinere Dateien, gleiche Schärfe
- 02Lazy Loading — laden erst kurz vor dem Sichtfeld
- 03Responsive srcset — pro Gerät die passende Größe
- 04Feste Maße — kein Springen des Layouts (CLS)
// einbau
So bauen wir sie ein.
baustein rein · redaktion übernimmt
// 01 · briefing
Motive & Kategorien.
Wir klären, was rein soll: Art der Bilder, Kategorien, ob Video dazukommt und wo die Galerie steht.
// 02 · bau
In dein Design.
Wir bauen die Galerie in deinem Look, angebunden ans CMS, mit der Bild-Pipeline für AVIF und WebP.
// 03 · test
Auf Tempo geprüft.
Wir messen mit Lighthouse: Ladezeit, Layout-Stabilität und Bedienung per Tastatur, bevor es live geht.
// 04 · übergabe ● live
Du pflegst selbst.
Kurze Einweisung, dann pflegt deine Redaktion Bilder und Reihenfolge selbst — Optimierung läuft automatisch.
// faq
Häufige Fragen.
Was ist eine Portfolio- & Media-Galerie?
Eine Portfolio- und Media-Galerie ist eine Website-Komponente, die Bilder und optional Videos in einem Raster zeigt und in der Großansicht als Lightbox öffnet. Besucher filtern nach Kategorien, die Bilder werden in modernen Formaten wie AVIF und WebP ausgeliefert und lazy geladen. siteway baut die Galerie als Baustein in eine bestehende oder neue Website ein.
Wie bleibt eine Galerie mit vielen Bildern schnell?
Über vier Hebel: Bilder werden in AVIF und WebP ausgeliefert — rund 30 bis 50 Prozent kleiner als JPEG. Sie laden lazy, also erst kurz bevor sie ins Bild scrollen. Per responsive srcset bekommt jedes Gerät nur die passende Auflösung. Und das erste sichtbare Bild wird bevorzugt geladen. So bleibt der Ladewert LCP unter 2,5 Sekunden, auch bei hunderten Motiven.
In welche CMS baut ihr die Galerie ein?
In TYPO3, WordPress und Statamic. Deine Redaktion pflegt Bilder, Reihenfolge, Kategorien und Alt-Texte selbst im gewohnten Backend — die Umwandlung in AVIF und WebP, die passenden Auflösungen und das Lazy Loading laufen automatisch im Hintergrund.
Kann die Galerie auch Videos einbinden?
Ja. Neben Bildern lassen sich Videos in dieselbe Galerie einbetten — selbst gehostet oder über einen Anbieter eingebunden. Videos werden datensparsam geladen: Vorschaubild zuerst, das eigentliche Video erst auf Klick. So bleibt die Ladezeit auch mit Bewegtbild niedrig.
Wie regelt ihr Bildrechte und Alt-Texte?
Jedes Motiv bekommt einen Alt-Text für Screenreader und Suchmaschinen sowie bei Bedarf einen Bildnachweis. Das erfüllt die Barrierefreiheit nach WCAG 2.2 und hält die Nutzungsrechte sauber. Für eigene Fotos klären wir die Lizenz gemeinsam, für Stock-Material dokumentieren wir die Quelle.
Was kostet die Portfolio- & Media-Galerie?
Festpreis nach Briefing. Die Galerie ist einzeln buchbar — als Baustein für deine bestehende Website — oder Teil einer kompletten neuen Website. Sobald Umfang, Kategorien und CMS feststehen, nennen wir einen festen Preis und halten ihn im Vertrag fest.
// passt dazu
Passt dazu.
bausteine & leistungen im überblick
komponente
Download- & Mediathek.
Wenn Besucher nicht nur ansehen, sondern herunterladen sollen: Datenblätter, Broschüren und Medien in einer Bibliothek.
weiterlesen →
// leistung
Performance & Core Web Vitals.
Die ganze Website auf Tempo getrimmt — dieselbe Disziplin, die die Galerie schnell hält, für jede Seite.
weiterlesen →
// cases
Referenzen ansehen.
Galerien und Portfolios im Einsatz — wie wir Bilder auf echten Kunden-Websites zeigen.
zu den cases →
// Galerie in deine Website bauen?
Briefing starten