Bildergalerie erstellen: eine Schritt-für-Schritt Anleitung

Wer viele Fotos auf einer Webseite zeigen will, stößt schnell an die Grenzen einer normalen Seite: Untereinander gestapelte Aufnahmen werden lang, langsam und unübersichtlich. Eine Bildergalerie löst das, indem sie kleine Vorschaubilder in ein Raster setzt und das große Foto erst auf Klick nachlädt. Diese Anleitung zeigt Ihnen Schritt für Schritt, wie Sie eine Bildergalerie erstellen: welche Galerietypen es gibt, welche vier Wege dorthin führen und worauf Sie bei Bildgrößen, Reihenfolge und Datenschutz achten sollten.

Technisches Vorwissen brauchen Sie dafür nicht zwingend. Wie viel Sie mitbringen müssen, hängt allein vom gewählten Weg ab: Ein fertiges Script installieren Sie in wenigen Minuten, eine handgebaute Lösung verlangt Grundkenntnisse in HTML und CSS. Beide führen zum Ziel, sie kosten nur unterschiedlich viel Zeit.

Wer zum ersten Mal eine Bildergalerie erstellen will, rechnet mit ein bis zwei Stunden, wenn die Fotos schon ausgewählt sind. Der größere Teil davon geht für die Vorbereitung der Bilder drauf, nicht für die Technik. Wer diesen Schritt überspringt, merkt es später an langen Ladezeiten und muss die Aufnahmen ein zweites Mal anfassen. Deshalb steht die Vorbereitung in dieser Anleitung vor dem Einrichten und nicht danach.

Welche Bildergalerie passt zu Ihrer Seite?

Bevor Sie eine Bildergalerie erstellen, sollten Sie wissen, wie Ihre Besucher die Fotos ansehen sollen. Drei Darstellungsformen haben sich durchgesetzt, und sie eignen sich für sehr verschiedene Zwecke.

Das Raster mit Vorschaubildern

Die klassische Form: Alle Aufnahmen liegen verkleinert nebeneinander, meist in gleichmäßigen Reihen. Der Nutzer überblickt den gesamten Bestand auf einen Blick und wählt selbst aus, was ihn interessiert. Die verkleinerten Vorschauen heißen Thumbnails und sind der Grund, warum eine Bildergalerie mit hundert Fotos trotzdem schnell lädt. Wer eine Bildergalerie erstellen und dabei viele Aufnahmen zeigen will, fährt mit dem Raster am besten: Portfolios, Vereinsseiten und Produktübersichten sind damit gut bedient.

Die Lightbox

Klickt der Besucher auf ein Vorschaubild, legt sich das große Foto mittig über die abgedunkelte Seite, und mit den Pfeiltasten blättert er weiter. Die Seite selbst wird dabei nicht verlassen. Diese Lightbox ist heute weniger ein eigener Typ als eine Ergänzung zum Raster, und sie gehört bei fast jeder ernsthaften Lösung zu den Funktionen dazu.

Slider und Diashow

Hier laufen die Bilder nacheinander durch, entweder automatisch oder auf Klick. Das Layout bleibt dabei über die ganze Galerie gleich. Eine Slideshow braucht wenig Platz und eignet sich für eine kleine Auswahl auf der Startseite. Für einen umfangreichen Bestand taugt sie nicht: Wer Bild 40 sehen will, muss sich durch 39 andere klicken.

Kurz zusammengefasst, wann welche Form sinnvoll ist:

• Viele Bilder, freie Auswahl: Raster mit Thumbnails, ergänzt um eine Lightbox.
• Wenige Bilder, wenig Platz: Slider oder Diashow.
• Bilder in Gruppen: Raster mit Alben, eine Ebene darüber.
• Große Ansicht ohne Seitenwechsel: in jedem Fall eine Lightbox.

Bildergalerie erstellen: die vier Wege

Die vier Wege unterscheiden sich vor allem darin, wo die Fotos am Ende liegen und wer die Kontrolle darüber behält. Diese Frage sollten Sie früh beantworten, denn ein späterer Wechsel bedeutet, alles noch einmal hochzuladen.

Zur Wahl stehen: ein fertiges Script auf dem eigenen Webspace, eine Erweiterung für ein vorhandenes Redaktionssystem, eine selbst gebaute Lösung aus HTML und CSS oder der Dienst eines Anbieters. Die ersten beiden nehmen Ihnen die Arbeit ab und lassen Ihnen die Daten. Der dritte gibt Ihnen jede Freiheit und kostet dafür Pflegezeit. Der vierte ist am schnellsten eingerichtet und am wenigsten Ihrer. Welcher passt, hängt weniger vom Können ab als davon, wie oft neue Bilder dazukommen.

Ein fertiges Galerie-Script auf dem eigenen Webspace

Sie laden ein Programm auf Ihren Webspace, richten es einmal ein und verwalten die Bilder danach über einen Administrationsbereich im Browser. Die Fotos liegen auf Ihrem Server, die Adresse ist Ihre eigene, und die Darstellung passen Sie über ein Template an das Design Ihrer Seite an. Vorschaubilder erstellt das Script beim Hochladen selbst. Auf diesem Weg lässt sich eine Bildergalerie erstellen, ohne den Quelltext der Seite anzufassen; Voraussetzung ist allein ein Webspace mit PHP. Unser kostenloses Bildergalerie-Script arbeitet genau so, die Installation dauert wenige Minuten.

Ein Plugin für ein Redaktionssystem

Läuft Ihre Seite bereits auf WordPress, Joomla oder TYPO3, liegt eine Erweiterung nahe. Sie installieren ein Plugin aus dem jeweiligen Verzeichnis und binden die Galerie über einen Kurzbefehl in eine bestehende Seite ein. Der Vorteil: Sie bleiben in einer vertrauten Oberfläche und können eine Galerie erstellen, ohne eine Zeile Code anzufassen. Der Preis: Sie hängen an der Weiterentwicklung des Plugins, und viele der beliebten Erweiterungen sind nur in ihrem Grundumfang kostenlos.

Von Hand mit HTML und CSS

Ein Raster aus Bildern ist mit heutigem CSS keine große Sache. Sie legen die Vorschaubilder in einen Container und überlassen die Anordnung dem Grid-Layout, das die Spaltenzahl selbständig an die Bildschirmbreite anpasst:

Das genügt für ein sauberes, mitwachsendes Layout. Das Attribut loading="lazy" sorgt dafür, dass Bilder erst geladen werden, wenn sie in Sichtweite kommen. Die Angaben zu Breite und Höhe verhindern, dass die Seite beim Laden springt. Der Haken an diesem Weg: Jedes neue Foto tragen Sie von Hand nach, und die Vorschaubilder müssen Sie selbst erstellen. Bei zwanzig Aufnahmen ist das machbar, bei zweihundert nicht mehr.

Der Dienst eines Anbieters

Plattformen wie Google Fotos oder Flickr nehmen Ihnen die Technik ab. Sie laden hoch, legen Alben an und binden das Ergebnis ein oder verlinken darauf. Für die Gestaltung stehen fertige Vorlagen bereit. Das geht schnell, hat aber zwei Nachteile: Die Fotos liegen auf fremden Servern, und über den Funktionsumfang entscheidet der Anbieter. Ändert er seine Bedingungen, ändert sich Ihre Galerie mit.

Bilder für die Bildergalerie vorbereiten

Der häufigste Fehler beim Aufbau einer Bildergalerie ist, die Fotos direkt aus der Kamera hochzuladen. Eine solche Datei ist mehrere Megabyte groß und mehrere tausend Pixel breit. Zwanzig davon auf einer Seite, und der Aufbau dauert selbst bei schneller Leitung spürbar lange.

Am Handy fällt das noch stärker auf: Wer über Mobilfunk kommt, wartet bei einer solchen Seite mehrere Sekunden auf das erste Bild und ist oft vorher wieder weg. Dazu kommt, dass der Browser die volle Auflösung ohnehin auf Anzeigegröße herunterrechnet. Die zusätzlichen Pixel werden also übertragen und dann verworfen. Ein paar Minuten Vorbereitung sparen an dieser Stelle mehr als jede spätere Optimierung an der Technik.

Zwei Größen pro Foto

Eine Galerie braucht jedes Bild zweimal: klein als Vorschau und größer für die Detailansicht. Für die Vorschau reicht eine Größe von 300 bis 400 Pixel Kantenlänge, für die große Ansicht genügen 1600 Pixel Breite auch auf hochauflösenden Bildschirmen. Ein fertiges Script erledigt diese Umrechnung beim Hochladen selbst und nutzt dafür die GD-Erweiterung von PHP. Wer von Hand arbeitet, muss die Bilder vorher verkleinern.

JPG, PNG oder WebP

Welches Format das richtige ist, entscheidet der Bildinhalt. Fotos gehören ins JPG, das den Unterschied zu PNG vor allem in der Art der Komprimierung hat. Grafiken mit klaren Flächen und Text sind im PNG besser aufgehoben. WebP liefert bei vergleichbarer Qualität deutlich kleinere Dateien und wird von allen aktuellen Browsern verstanden. Beim Wechsel auf ein neues Format lohnt eine Kontrolle im Browser: Ältere Systeme liefern sonst ein leeres Feld statt des Fotos.

Als Richtwerte für die Vorbereitung:

• Vorschau: 300 bis 400 Pixel Kantenlänge, unter 40 Kilobyte.
• Große Ansicht: maximal 1600 Pixel Breite, unter 300 Kilobyte.
• Format: JPG oder WebP für Fotos, PNG für Grafiken mit Text.
• Seitenverhältnis: im Raster ein einheitliches Format, sonst wirkt das Layout unruhig.
• Dateiname: sprechend statt IMG_4711, also etwa hafen-greetsiel.jpg.

Wie weit Sie beim Komprimieren gehen können, zeigt ein Vergleich am eigenen Bildschirm: Bei Qualitätsstufe 80 sieht kaum jemand einen Unterschied zum Original, die Datei ist aber nur halb so groß.

Die Bildergalerie ordnen: Reihenfolge, Alben, Beschriftung

Sind die Bilder auf dem Server, entscheidet die Anordnung darüber, ob Besucher finden, was sie suchen. Übersicht entsteht dabei durch Ordnung, nicht durch Masse: Eine gute Bildergalerie erstellen Sie mit fünfzig sortierten Aufnahmen leichter als mit dreihundert ungeordneten. Dafür gibt es zwei Stellschrauben: die Sortierung innerhalb einer Ansicht und die Aufteilung in Gruppen.

Die Sortierung festlegen

Die meisten Lösungen sortieren wahlweise nach Datum, Dateiname oder einer selbst gesetzten Reihenfolge. Chronologisch ist richtig, wenn die Galerie einen Ablauf zeigt, etwa ein Vereinsjahr oder eine Reise. Eine eigene Reihenfolge lohnt sich, wenn die stärksten Aufnahmen vorne stehen sollen. Alphabetisch ergibt nur Sinn, wenn die Beschriftungen selbst eine Ordnung haben.

Alben statt einer langen Liste

Ab etwa fünfzig Aufnahmen wird eine einzelne Übersicht unhandlich. Fassen Sie die Bilder dann in Alben zusammen, nach Thema, Ort oder Anlass. Die Besucher wählen erst das Album und sehen darin das Raster. Das verkürzt die Ladezeit jeder einzelnen Seite und gibt der Galerie eine Struktur, die auch Suchmaschinen lesen können. Alben gehören zu den Funktionen, die jede ausgewachsene Lösung mitbringt.

Bildunterschriften schreiben

Eine kurze Bildunterschrift pro Foto ist die Mühe wert. Sie nennt, was zu sehen ist, und gibt der Aufnahme einen Zusammenhang: Ort, Anlass, Jahr. Zwei Sätze genügen, ein ganzer Absatz überfrachtet das Raster. Wo eine Galerie ohne Text auskommen muss, weil die Bilder für sich stehen, verzichten Sie besser ganz darauf, statt jede Datei mit dem gleichen Platzhalter zu beschriften.

Recht und Datenschutz in der Bildergalerie

Sobald Menschen auf den Fotos erkennbar sind, wird aus einer Gestaltungsfrage eine rechtliche. Das gilt für Vereinsfeste ebenso wie für Firmenveranstaltungen, und es gilt auch dann, wenn niemand Einspruch erhebt.

• Für erkennbare Personen brauchen Sie eine Einwilligung, am besten schriftlich.
• Bei Fotos von Kindern müssen beide Sorgeberechtigte zustimmen.
• Fremde Aufnahmen dürfen Sie nur mit Erlaubnis zeigen, das Urheberrecht gilt auch für private Seiten.
• Die DSGVO verlangt einen Hinweis in der Datenschutzerklärung, sobald Sie Bilder mit Personenbezug veröffentlichen.

Soll die Galerie nicht öffentlich sein, schützen Sie das Verzeichnis mit einem Passwort. Die meisten Scripte bringen dafür eine Rechteverwaltung als Funktion mit; alternativ genügt ein Schutz über die htaccess-Datei.

Die Bildergalerie in der Suche sichtbar machen

Bilder sind für Suchmaschinen zunächst nur Dateien. Erst der Text drumherum sagt ihnen, was darauf zu sehen ist, und genau daran scheitern viele Galerien. Die Grundregeln der Suchmaschinenoptimierung gelten dabei auch für eine Bildergalerie.

Alt-Text und Dateiname

Der Alt-Text beschreibt das Bild für alle, die es nicht sehen können, und ist zugleich das wichtigste Signal für die Bildersuche. Er sollte benennen, was tatsächlich zu sehen ist, in einem knappen Satz und ohne aneinandergereihte Suchbegriffe. Der Dateiname arbeitet in dieselbe Richtung. Ergänzend lohnt ein Blick auf den Title-Tag bei Bildern, der eine andere Aufgabe hat als der Alt-Text.

Ladezeit und Adressen

Eine Bildergalerie mit hundert unkomprimierten Fotos lädt langsam, und Ladezeit ist ein Rankingfaktor. Vorschaubilder, verzögertes Nachladen und eine vernünftige Dateigröße lösen das Problem weitgehend. Achten Sie außerdem darauf, dass jedes Album über eine eigene Adresse erreichbar ist. Was nur per JavaScript nachgeladen wird und keine eigene URL hat, taucht in keinem Index auf.

Häufige Fragen zum Erstellen einer Bildergalerie

Vier Fragen kommen bei diesem Thema immer wieder auf: nach den Kosten, nach den nötigen Vorkenntnissen, nach der sinnvollen Menge an Bildern und danach, wie sich das Ergebnis in eine bestehende Seite einfügt. Die Antworten darauf sind kurz.

Bildergalerie erstellen: was kostet das?

Der Weg über ein freies Script kostet nichts außer dem Webspace, den Sie ohnehin bezahlen. Plugins für Redaktionssysteme gibt es in einer kostenlosen Grundversion, die vollen Funktionen kosten meist zwischen 30 und 100 Euro im Jahr. Bei den Diensten der Anbieter zahlen Nutzer erst, wenn der Speicherplatz knapp wird.

Kann ich eine Bildergalerie erstellen ohne Programmierkenntnisse?

Für ein fertiges Script oder ein Plugin nicht. Sie laden die Dateien hoch, folgen der Einrichtung und arbeiten danach in einer Oberfläche im Browser. Nur wer die Bildergalerie von Hand baut, braucht HTML und CSS. Funktionen wie Lightbox oder Suche kommen dann als fertige Bausteine dazu. Anpassungen am Design sind auch ohne Code möglich, solange Ihre Lösung Vorlagen mitbringt.

Wie viele Bilder verträgt eine Bildergalerie?

Technisch gibt es kaum eine Grenze, praktisch schon: Ab etwa fünfzig Aufnahmen pro Ansicht wird das Raster unübersichtlich, und die Ladezeit steigt. Teilen Sie den Bestand ab dieser Größe in Alben auf. Mit einem Script, das Vorschaubilder selbst anlegt, lässt sich auch aus mehreren tausend Fotos eine Bildergalerie erstellen.

Kann ich eine Bildergalerie in eine bestehende Seite einbauen?

Ja. Sie können die Bildergalerie erstellen, ohne die bestehende Seite anzufassen: Sie liegt dann in einem eigenen Verzeichnis, und Sie verlinken sie aus dem Menü heraus oder binden sie in eine vorhandene Seite ein. Layout und Farben lassen sich über das Template so anpassen, dass Nutzer den Übergang nicht bemerken.

Der schnellste Weg zur ersten Galerie

Wenn Sie ohne Umwege eine Bildergalerie erstellen wollen, hat sich diese Reihenfolge bewährt: Fotos auf eine sinnvolle Größe bringen, ein fertiges Script auf den Webspace hochladen, einrichten, Bilder über den Administrationsbereich einspielen und das Design anpassen. Das ist an einem Nachmittag zu schaffen, und die Fotos bleiben dabei auf Ihrem eigenen Server. Wie sich das Ergebnis in eine bestehende Seite einfügt, zeigt die Anleitung zum Einbinden der Galerie in die Homepage. Wer stattdessen eine ganze Seite um die Bilder herum aufbauen möchte, findet die Schritte unter Fotogalerie für Homepage.