Galería de fotos para sitio web (con ampliación)

Galería de fotos para sitio web (con ampliación): para qué sirve

Una galería de fotos bien hecha muestra el trabajo, el local y los productos sin hacer pesada la página. Este generador arma la cuadrícula responsiva con CSS grid, eligiendo el número de columnas en la computadora y en el celular, el formato de las miniaturas y las esquinas.

Al tocar una foto se abre ampliada usando el elemento dialog nativo de HTML, con flechas en pantalla y en el teclado, leyenda y cierre con Esc o tocando fuera. Las miniaturas cargan de forma diferida y la leyenda se convierte en el texto alternativo, bueno para la accesibilidad y el SEO de imágenes.

Cómo usar

1. Pega las direcciones de las fotos con la leyenda.
2. Elige columnas, formato y esquinas.
3. Copia el código y pégalo en el sitio.

Cuándo usar

• Portafolio de fotógrafo, barbero o arquitecto.
• Fotos del local de un restaurante o tienda.
• Antes y después de servicios.

Preguntas frecuentes

¿Funciona sin biblioteca?

Sí. La cuadrícula es CSS grid y la ampliación usa el elemento dialog nativo del navegador, que ya se ocupa del fondo oscuro, del foco y de cerrar con la tecla Esc. El script tiene pocas líneas, solo para cambiar de foto.

¿Las fotos hacen pesada la carga?

Las miniaturas usan loading=lazy y decoding=async: solo se descargan cuando se acercan a la pantalla. Para que sea aún más liviano, genera versiones más pequeñas para las miniaturas (la herramienta de imágenes para sitio web lo hace) y usa la grande solo en la ampliación.

¿Necesito leyenda?

La leyenda se convierte en el texto alternativo (alt) de la foto, que leen los lectores de pantalla y ayuda al SEO de imágenes. Describe lo que aparece, como "Corte degradado con barba", en lugar de "foto 1".

¿Es gratis de verdad?

Sí, 100% gratis. Sin registro, sin suscripción y sin límite de uso. Todas las herramientas de Tools123 son gratuitas.

Herramientas similares