Fotogalerie für die Website (mit Vergrößerung)

Fotogalerie für die Website (mit Vergrößerung): wofür es gut ist

Eine gut gemachte Fotogalerie zeigt die Arbeit, den Raum und die Produkte, ohne die Seite zu belasten. Dieser Generator baut das responsive Raster mit CSS Grid und wählt die Anzahl der Spalten am Computer und am Handy, das Format der Vorschaubilder und die Ecken.

Beim Antippen eines Fotos öffnet es sich vergrößert über das native HTML-Element dialog, mit Pfeilen auf dem Bildschirm und der Tastatur, Beschriftung und Schließen mit Esc oder Tippen außerhalb. Die Vorschaubilder werden verzögert geladen, und die Beschriftung wird zum Alternativtext, gut für Barrierefreiheit und Bilder-SEO.

So geht’s

1. Füge die Adressen der Fotos mit der Beschriftung ein.
2. Wähle Spalten, Format und Ecken.
3. Kopiere den Code und füge ihn in die Website ein.

Wann nutzen

• Portfolio von Fotografen, Friseuren oder Architekten.
• Fotos vom Raum eines Restaurants oder Ladens.
• Vorher und nachher von Leistungen.

Häufige Fragen

Funktioniert es ohne Bibliothek?

Ja. Das Raster ist CSS Grid, und die Vergrößerung nutzt das native dialog-Element des Browsers, das schon den dunklen Hintergrund, den Fokus und das Schließen mit der Esc-Taste übernimmt. Das Skript hat wenige Zeilen, nur zum Wechseln des Fotos.

Belasten die Fotos das Laden?

Die Vorschaubilder nutzen loading=lazy und decoding=async: Sie werden erst geladen, wenn sie in die Nähe des Bildschirms kommen. Für noch weniger Gewicht erzeuge kleinere Versionen für die Vorschaubilder (das Werkzeug Bilder für die Website macht das) und nutze das große nur in der Vergrößerung.

Brauche ich eine Beschriftung?

Die Beschriftung wird zum Alternativtext (alt) des Fotos, den Screenreader lesen und der bei der Bilder-SEO hilft. Beschreibe, was zu sehen ist, wie „Fade-Haarschnitt mit Bart“, statt „Foto 1“.

Ist das wirklich kostenlos?

Ja, 100% kostenlos. Ohne Anmeldung, ohne Abo und ohne Nutzungslimit. Alle Tools von Tools123 sind kostenlos.

Ähnliche Tools