Galleria foto per sito (con ingrandimento)

Galleria foto per sito (con ingrandimento): a cosa serve

Una galleria foto ben fatta mostra il lavoro, gli spazi e i prodotti senza appesantire la pagina. Questo generatore crea la griglia responsive con CSS grid, scegliendo il numero di colonne su computer e cellulare, il formato delle miniature e gli angoli.

Toccando una foto si apre ingrandita usando l’elemento dialog nativo dell’HTML, con frecce sullo schermo e da tastiera, didascalia e chiusura con Esc o toccando fuori. Le miniature si caricano in modo lazy e la didascalia diventa il testo alternativo, ottimo per accessibilità e SEO delle immagini.

Come si usa

1. Incolla gli indirizzi delle foto con la didascalia.
2. Scegli colonne, formato e angoli.
3. Copia il codice e incollalo nel sito.

Quando usarlo

• Portfolio di fotografo, barbiere o architetto.
• Foto degli spazi di un ristorante o di un negozio.
• Prima e dopo di un lavoro.

Domande frequenti

Funziona senza librerie?

Sì. La griglia è una CSS grid e l’ingrandimento usa l’elemento dialog nativo del browser, che gestisce già lo sfondo scuro, il focus e la chiusura con il tasto Esc. Lo script ha poche righe, solo per cambiare foto.

Le foto appesantiscono il caricamento?

Le miniature usano loading=lazy e decoding=async: si scaricano solo quando si avvicinano allo schermo. Per alleggerire ancora di più, genera versioni più piccole per le miniature (lo strumento per le immagini del sito lo fa) e usa quella grande solo per l’ingrandimento.

Serve una didascalia?

La didascalia diventa il testo alternativo (alt) della foto, che viene letto dagli screen reader e aiuta la SEO delle immagini. Descrivi ciò che si vede, ad esempio "Taglio sfumato con barba", invece di "foto 1".

È davvero gratis?

Sì, 100% gratis. Senza registrazione, senza abbonamento e senza limiti d’uso. Tutti gli strumenti di Tools123 sono gratuiti.

Strumenti simili