Galerie photos pour site (avec agrandissement)
Collez les adresses des images (une par ligne, avec une légende facultative après une barre verticale). Choisissez les colonnes et les angles, puis copiez le bloc prêt à l’emploi.
Mode d’emploiGalerie avec photo agrandie
Disponible en: 
Galerie photos pour site (avec agrandissement): à quoi ça sert
Une galerie photos bien conçue montre votre travail, vos locaux et vos produits sans alourdir la page. Ce générateur compose la grille responsive avec CSS grid, en choisissant le nombre de colonnes sur ordinateur et sur mobile, le format des miniatures et les angles.
En touchant une photo, elle s’ouvre agrandie grâce à l’élément dialog natif du HTML, avec des flèches à l’écran et au clavier, une légende et une fermeture avec Échap ou en touchant à l’extérieur. Les miniatures se chargent de façon différée et la légende devient le texte alternatif, utile pour l’accessibilité et le référencement des images.
Mode d’emploi
- Collez les adresses des photos avec la légende.
- Choisissez les colonnes, le format et les angles.
- Copiez le code et collez-le dans le site.
Quand l’utiliser
- Portfolio de photographe, de barbier ou d’architecte.
- Photos des locaux d’un restaurant ou d’une boutique.
- Avant et après de prestations.
Questions fréquentes
Cela fonctionne-t-il sans bibliothèque ?
Oui. La grille est en CSS grid et l’agrandissement utilise l’élément dialog natif du navigateur, qui gère déjà le fond sombre, le focus et la fermeture avec la touche Échap. Le script ne compte que quelques lignes, uniquement pour changer de photo.
Les photos alourdissent-elles le chargement ?
Les miniatures utilisent loading=lazy et decoding=async : elles ne se téléchargent que lorsqu’elles approchent de l’écran. Pour alléger davantage, générez des versions plus petites pour les miniatures (l’outil d’images pour site le fait) et n’utilisez la grande que pour l’agrandissement.
Ai-je besoin d’une légende ?
La légende devient le texte alternatif (alt) de la photo, lu par les lecteurs d’écran et utile pour le référencement des images. Décrivez ce qui apparaît, comme "Dégradé avec barbe", plutôt que "photo 1".
Vraiment gratuit ?
Oui, 100 % gratuit. Sans inscription, sans abonnement et sans limite d’utilisation. Tous les outils de Tools123 sont gratuits.