Imagen arriba
Imagen arriba
Una composición apilada mantiene la imagen antes del texto en cualquier ancho del contenedor.
Multimedia, compuesta una sola vez
Todos los ejemplos de esta página usan el mismo renderizador semántico, el mismo catálogo y la misma política de entrega adaptable. Cambia el tamaño, abre la galería o desactiva JavaScript; el contenido permanece completo.
Siete resultados, un componente compartido
La disposición, la proporción, el ajuste y la posición lógica cambian el resultado sin crear componentes separados.
Imagen antes
Imagen antes
La composición dividida solo pasa a horizontal cuando su propio contenedor tiene espacio suficiente.
Imagen después
Imagen después
El texto conserva el primer lugar de lectura y la imagen aparece después, tanto visualmente como en el documento.
Retrato editorial
Retrato editorial
El perfil vertical selecciona una política de imagen más estrecha y un recorte deliberadamente alto.
Superposición legible
Superposición legible
El texto se coloca sobre la imagen mediante una superficie oscura controlada y una receta de contraste legible.
Destacado a todo el ancho
Destacado a todo el ancho
La tarjeta destacada ocupa la cuadrícula disponible sin cambiar las ranuras compartidas de imagen y contenido.
Fotografía contenida
Fotografía contenida
El ajuste contenido mantiene visible la fotografía completa para compararla directamente con los tratamientos recortados.
Figura semántica y crédito del catálogo
Cuando un pie o un crédito pertenece a una imagen, el renderizador genera figure y figcaption reales. El crédito procede del catálogo multimedia y no de texto duplicado.
Galerías que funcionan primero como contenido estático
Todos los elementos aparecen en su orden original. El desplazamiento con ajuste y el visor dialog añaden comodidad sin ocultar contenido detrás de JavaScript.
Desplazamiento ajustado con visor
En un contenedor estrecho, desliza o desplázate por la fila completa. En anchuras mayores, las mismas figuras forman una cuadrícula. Activa cualquier imagen para abrir el visor accesible.
Cuadrícula estática de retratos
Esta galería omite por completo el visor. Todas las figuras y sus pies siguen disponibles sin comportamiento del cliente.
Creado para cargar rápido
La página demuestra tanto la política de entrega como los resultados visuales. Lighthouse verifica el resultado desplegado después de cada implementación.
Fuentes del tamaño correcto
Los perfiles generan anchuras limitadas e indicaciones sizes precisas en lugar de enviar una única imagen sobredimensionada.
Carga intencionada
Solo la primera imagen es inmediata y de alta prioridad. Las demás se cargan de forma diferida y se decodifican de manera asíncrona.
Mejora pequeña
La galería entrega primero HTML completo. Un script aislado mejora los enlaces con dialog nativo, teclado y devolución del foco.