Planificación de imágenes responsivas

La primera vez que hice una imagen responsiva, fue tan simple como codificar estas cuatro líneas:

img {  max-width: 100%;  height auto; /* default */}

Aunque eso funcionó para mí como desarrollador, no fue lo mejor para la audiencia. ¿Qué pasa si la imagen del srcatributo es pesada? En dispositivos para desarrolladores de alta gama (como el mío con 16 GB de RAM), se producen pocos o ningún problema de rendimiento. ¿Pero en dispositivos de gama baja? Es otra historia.

La ilustración anterior no es lo suficientemente detallada. Soy de Nigeria y, si su producto funciona en África, entonces no debería mirar eso. Mire este gráfico en su lugar:

Hoy en día, el iPhone más barato se vende por un promedio de 300 dólares. El promedio africano no puede permitirselo a pesar de que el iPhone es un umbral para medir dispositivos rápidos .

Ese es todo el análisis de negocios que necesita para comprender que el ancho de CSS no es suficiente para imágenes responsivas. ¿Qué harías? Primero déjame explicarte de qué se tratan las imágenes.

Matices de imágenes.

Las imágenes son atractivas para los usuarios, pero son un desafío minucioso para nosotros, los desarrolladores, que debemos considerar los siguientes factores:

• Formato
• Tamaño de la discoteca
• Dimensión de renderizado (ancho y alto del diseño en el navegador)
• Dimensión original (ancho y alto originales)
• relación de aspecto

Entonces, ¿cómo elegimos los parámetros correctos y los mezclamos y combinamos hábilmente para ofrecer una experiencia óptima a su audiencia? La respuesta, a su vez, depende de las respuestas a estas preguntas:

• ¿Las imágenes son creadas dinámicamente por el usuario o estáticamente por un equipo de diseño?
• Si el ancho y el alto de la imagen cambian de manera desproporcionada, ¿afectaría eso la calidad?
• ¿Todas las imágenes se representan con el mismo ancho y alto? Cuando se renderizan, ¿deben tener una relación de aspecto específico o una que sea completamente diferente?
• ¿Qué se debe considerar al presentar las imágenes en diferentes ventanas gráficas?

Anota tus respuestas. No sólo le ayudará a comprender sus imágenes (sus fuentes, requisitos técnicos, etc.), sino que también le permitirá tomar las decisiones correctas en la entrega.

Estrategias provisionales para la entrega de imágenes.

La entrega de imágenes ha evolucionado desde una simple adición de URL al srcatributo hasta escenarios complejos. Antes de profundizar en ellas, hablemos de las Múltiples opciones para presentar imágenes para que puedas idear una estrategia sobre cómo y cuándo entregar y renderizar las tuyas.

Primero, identifique las fuentes de las imágenes. De esta manera, se puede reducir el número de casos extremos oscuros y las imágenes se pueden manejar de la manera más eficiente posible.

En general, las imágenes son:

• Dinámico : las imágenes dinámicas las carga la audiencia y han sido generadas por otros eventos en el sistema.
• Estático : un fotógrafo, diseñador o usted (el desarrollador) crea las imágenes para el sitio web.

Profundizamos en la estrategia para cada uno de este tipo de imágenes.

Estrategia para imágenes dinámicas.

Es bastante fácil trabajar con imágenes estáticas. Por otro lado, las imágenes dinámicas son complicadas y propensas a generar problemas. ¿Qué se puede hacer para mitigar su naturaleza dinámica y hacer las más predecibles como imágenes estáticas? Dos cosas: validación y recorte inteligente .

Validación

Establezca algunas reglas para la audiencia sobre lo que es aceptable y lo que no. Hoy en día podemos validar todas las propiedades de una imagen, a saber:

• Formato
• Tamaño de la discoteca
• Dimensión
• relación de aspecto

Nota: El tamaño de renderizado de una imagen se determina durante el renderizado, por lo que no hay validación de nuestra parte.

Después de la validación, surgiría un conjunto de imágenes predecibles, que son más fáciles de consumir.

Registro inteligente

Otra estrategia para manejar imágenes dinámicas es recortarlas de manera inteligente para evitar eliminar contenido importante y reenfocarse (o volver a centrar) el contenido principal. Eso es difícil de hacer. Sin embargo, puedes aprovechar la inteligencia artificial que ofrecen las herramientas de código abierto o las empresas SaaS especializadas en la gestión de imágenes. Un ejemplo está en las próximas secciones.

---

Una vez que se haya definido una estrategia para imágenes dinámicas, cree una tabla de reglas con todas las opciones de diseño para las imágenes. A continuación se muestra un ejemplo. Incluso vale la pena analizar los análisis para determinar los dispositivos y tamaños de ventanas gráficas más importantes.

Ventana gráfica del navegador	portatil hp	PS4 delgada	Lente de la cámara/relación de aspecto
300	100 vw	100 vw	100 VW/1:2
300 – 699	100 vw	100 vw	100 VW/1:1
700 – 999	50 vw	50 vw	50 VW/1:1
999	33 vw	33 vw	100 VW/1:2

El mínimo básico (subóptimo)

Ahora dejemos de lado las complejidades de la capacidad de respuesta y simplemente hagamos lo que mejor sabemos hacer: marcado HTML simple con CSS de ancho máximo.

El siguiente código representa algunas imágenes:

mainfigure    img src="https://res.cloudinary.com/...w700/ps4-slim.jpg" alt="PS4 Slim"/figure      figure    img src="https://res.cloudinary.com/...w700/x-box-one-s.jpg" alt="X Box One S"/figure        !-- More images --    figure    img src="https://res.cloudinary.com/...w700/tv.jpg" alt="Tv"/figure/main

Nota: Los puntos suspensivos (…) en la URL de la imagen especifican la carpeta, la dimensión y la estrategia de recorte, que son demasiado detallados para incluirlos, de ahí el truncamiento para centrarse en lo que importa ahora. Para obtener la versión completa, consulte el ejemplo de CodePen a continuación.

Este es el ejemplo de CSS más corto en Internet que hace que las imágenes responden:

/* The parent container */main {  display: grid;  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));}img {  max-width: 100%;}

Si las imágenes no tienen un ancho y alto uniformes, reemplácelas max-widthcon object-fity establezca el valor en cover.

La publicación del blog de Jo Franchetti sobre diseños responsivos comunes con CSS Grid explica cómo el valor de grid-template-columnshace que todo el diseño sea adaptable (responsivo).

Sin embargo, lo anterior no es lo que estamos buscando porque…

• el tamaño y el peso de la imagen son los mismos en dispositivos de gama alta y baja, y
• Es posible que queramos ser más estrictos con el ancho de la imagen en lugar de establecerlo en 250 y dejarlo crecer.

Bueno, esta sección cubre “lo mínimo indispensable”, así que eso es todo.

Variaciones de diseño

Lo peor que le puede pasar al diseño de una imagen es una mala gestión de las expectativas. Debido a que las imágenes pueden tener diferentes dimensiones (ancho y alto), debemos especificar cómo renderizarlas.

¿Deberíamos recortar inteligentemente todas las imágenes a una dimensión uniforme? ¿Deberíamos conservar la relación de aspecto de una ventana gráfica y modificarla para otra diferente? La pelota está en nuestro tejado.

En el caso de imágenes en una cuadrícula, como las del ejemplo anterior con diferentes relaciones de aspecto, podemos aplicar la técnica de dirección de arte para renderizar las imágenes. La dirección de arte puede ayudar a lograr algo como esto:

Para obtener detalles sobre el cambio de resolución y la dirección de arte en imágenes responsivas, lea la serie de Jason Grigsby. Otra referencia informativa es la Guía de imágenes receptivas de Eric Portis, partes 1, 2 y 3.

Vea el ejemplo de código a continuación.

mainfigure    picture      source media="(min-width: 900px)"            img src="https://res.cloudinary.com/.../c_fill,g_auto,h_700,w_700/camera-lens.jpg" alt="Camera lens"    /picture/figure  figure    picture      source media="(min-width: 700px)"    /picture    img src="https://res.cloudinary.com/.../c_fill,g_auto,h_700,w_700/ps4-pro.jpg" alt="PS4 Pro"/figure/main

En lugar de renderizar solo una imagen de 700 px de ancho, renderizamos 700 px x 700 px solo si el ancho de la ventana gráfica excede los 700 px. Si la ventana gráfica es más grande, se produce la siguiente representación:

• Las imágenes de la lente de la cámara se representan como una imagen vertical de 700 px de ancho y 1000 px. de altura (700px x 1000px).
• Las imágenes de PS4 Pro se renderizan a 1000 px x 1000 px.

Dirección artística

Al recortar imágenes para que respondan, podríamos eliminar sin darnos cuenta el contenido principal, como el rostro del sujeto. Como se mencionó anteriormente, las herramientas de código abierto de IA pueden ayudar a recortar de manera inteligente y reenfocarse en los objetos principales de las imágenes. Además, la publicación de Nadav Soferman sobre recorte inteligente es una guía de inicio útil.

Cuadrícula estricta y extensión

El primer ejemplo de imágenes responsivas en esta publicación es flexible. Con un ancho mínimo de 300 píxeles, los elementos de la cuadrícula fluyen automáticamente hacia su lugar de acuerdo con el ancho de la ventana gráfica. Fantástico.

Por otro lado, es posible que deseemos aplicar una regla más estricta a los elementos de la cuadrícula según las especificaciones de diseño. En ese caso, las consultas de los medios resultan útiles.

Alternativamente, podemos aprovechar la grid-spancapacidad de crear elementos de cuadrícula de distintos anchos y largos:

@media(min-width: 700px) {  main {    display: grid;    grid-template-columns: repeat(2, 1fr);  }}@media(min-width: 900px) {  main {    display: grid;    grid-template-columns: repeat(3, 1fr)  }  figure:nth-child(3) {    grid-row: span 2;  }  figure:nth-child(4) {    grid-column: span 2;    grid-row: span 2;  }}

Para una imagen de 1000 px x 1000 px cuadrados en una ventana gráfica amplia, podemos ampliarla para tomar dos celdas de cuadrícula tanto en la fila como en la columna. La imagen que cambia a una orientación vertical (700 px x 1000 px) en una ventana gráfica más amplia puede ocupar dos celdas seguidas.

Optimización progresiva

La optimización ciega es tan tonta como ninguna optimización. No se centre en la optimización sin predefinir las medidas adecuadas. Y no optimice si la optimización no está respaldada por datos.

No obstante, existe un amplio margen de optimización en los ejemplos anteriores. Comenzamos con lo mínimo, le mostramos algunos trucos interesantes y ahora tenemos una cuadrícula funcional y receptiva. La siguiente pregunta es: "Si la página contiene entre 20 y 100 imágenes, ¿qué tan buena será la experiencia del usuario?"

Aquí está la respuesta: debemos asegurarnos de que en el caso de numerosas imágenes para renderizar, su tamaño se ajuste al dispositivo que las renderiza. Para lograrlo, necesitamos especificar las URL de varias imágenes en lugar de una. El navegador elegirá el correcto (el más óptimo) según los criterios. Esta técnica se llama cambio de resolución en imágenes responsivas. Vea este ejemplo de código:

img src="https://res.cloudinary.com/.../h_700,w_700/v1548054527/ps4.jpg 700w" alt="PS4 Slim"

El tweet de Harry Roberts explica intuitivamente lo que sucede:

Cuando probé por primera vez el cambio de resolución, me confundí y tuiteé:

Felicitaciones a Jason Grigsby por la aclaración en sus respuestas.

Gracias al cambio de resolución, si se cambia el tamaño del navegador, descarga la imagen correcta para la ventana gráfica correcta; por lo tanto, imágenes pequeñas para teléfonos pequeños (buenas para CPU y RAM) e imágenes más grandes para ventanas gráficas más grandes.

La tabla anterior muestra que el navegador descarga la misma imagen (rectángulo azul) con diferentes tamaños de disco (rectángulo rojo).

El generador de puntos de interrupción de imágenes adaptables, gratuito y de código abierto de Cloudinary, es extremadamente útil para adaptar imágenes de sitios web a múltiples tamaños de pantalla. Sin embargo, en muchos casos, bastaría con el entorno srcsety solo.sizes

Conclusión

Este artículo tiene como objetivo brindar pautas simples pero efectivas para configurar imágenes y diseños responsivos a la luz de las muchas (y potencialmente confusas) opciones disponibles. Familiarízate con la cuadrícula CSS, la dirección de arte y el cambio de resolución y serás un ninja en poco tiempo. ¡Sigue practicando!