Planificación de imágenes receptivas | Programar Plus

La primera vez que hice una imagen receptiva, 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é sucede si la imagen en el src el atributo es pesado? En los dispositivos para desarrolladores de alta gama (como el mío con 16 GB de RAM), ocurren 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, no debería estar mirando eso. En su lugar, mire este gráfico:

Hoy en día, el iPhone de menor precio se vende por un promedio de $ 300. El africano medio no puede permitírselo a pesar de que el iPhone es un umbral para medir rápido dispositivos.

Ese es todo el análisis comercial que necesita para comprender que el ancho de CSS no es suficiente para imágenes receptivas. ¿Qué harías, preguntas? 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 del disco
• Renderizar dimensión (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 brindar 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 se cambian de manera desproporcionada, ¿afectaría eso la calidad?
• ¿Todas las imágenes se renderizan con el mismo ancho y alto? Cuando se renderizan, ¿deben tener una relación de aspecto específica o una que sea completamente diferente?
• ¿Qué se debe tener en cuenta al presentar las imágenes en diferentes ventanas gráficas?

Anote sus respuestas. No solo lo ayudarán a comprender sus imágenes, sus fuentes, requisitos técnicos y demás, sino que también le permitirán 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 a la src atribuir a escenarios complejos. Antes de profundizar en ellos, hablemos de las múltiples opciones para presentar imágenes para que pueda diseñar una estrategia sobre cómo y cuándo entregar y renderizar las suyas.

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

En general, las imágenes son:

• Dinámica: Las imágenes dinámicas son subidas por la audiencia, habiendo 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.

Analicemos la estrategia para cada uno de estos tipos 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 problemas. ¿Qué se puede hacer para mitigar su naturaleza dinámica y hacerlas más predecibles como imágenes estáticas? Dos cosas: validación y cultivo inteligente.

Validación

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

• Formato
• Tamaño del disco
• Dimensión
• Relación de aspecto

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

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

Recorte inteligente

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

Una vez que se ha definido una estrategia para las 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 los tamaños de las ventanas gráficas más importantes.

El mínimo desnudo (subóptimo)

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

El siguiente código muestra algunas imágenes:

<main>

<figure>
    <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: La elipsis (…) en la URL de la imagen especifica la carpeta, la dimensión y la estrategia de recorte, que son demasiados detalles para incluir, de ahí el truncamiento para enfocarse 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 respondan:

/* 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 un alto uniformes, reemplace max-width con object-fit y establezca el valor en cover.

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

Ver la pluma
Galería de cuadrícula por Chris Nwamba (@codebeast)
en CodePen.

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

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

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

Variaciones de diseño

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

¿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 modificar la relación de otra diferente? La pelota está en nuestra cancha.

En el caso de imágenes en una cuadrícula, como las del ejemplo anterior con diferentes proporciones, 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 receptivas, 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.

<main>

<figure>
    <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 700px de ancho, renderizamos 700px x 700px solo si el ancho de la ventana gráfica excede los 700px. 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 de retrato de 700 px de ancho y 1000 px. de altura (700px x 1000px).
• Las imágenes de PS4 Pro se renderizan a 1000px x 1000px.

Dirección artística

Al recortar imágenes para que respondan, es posible que eliminemos inadvertidamente el contenido principal, como la cara del sujeto. Como se mencionó anteriormente, las herramientas de código abierto de inteligencia artificial pueden ayudar a recortar de manera inteligente y volver a enfocarse en los objetos primarios de las imágenes. Además, la publicación de Nadav Soferman sobre recorte inteligente es una guía de inicio útil.

Rejilla estricta y expansión

El primer ejemplo de imágenes receptivas en esta publicación es flexible. Con un ancho mínimo de 300 px, los elementos de la cuadrícula fluyen automáticamente en 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 en función de las especificaciones de diseño. En ese caso, las consultas de medios son útiles.

Alternativamente, podemos aprovechar la grid-span capacidad para crear elementos de cuadrícula de diferentes anchos y longitudes:

@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 1000px x 1000px cuadrados en una ventana de visualización amplia, podemos dividirla para tomar dos celdas de cuadrícula tanto en la fila como en la columna. La imagen que cambia a una orientación vertical (700px x 1000px) en una ventana gráfica más amplia puede tomar dos celdas en una fila.

Ver la pluma
Galería de cuadrícula [Art Direction] por Chris Nwamba (@codebeast)
en CodePen.

Optimización progresiva

La optimización ciega es tan poco convincente 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 para la optimización en los ejemplos anteriores. Comenzamos con lo mínimo, les mostramos algunos trucos geniales y ahora tenemos una cuadrícula que funciona y que responde. 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 lograr eso, necesitamos especificar las URL de varias imágenes en lugar de una. El navegador elegiría el correcto (el más óptimo) de acuerdo con los criterios. Esta técnica se llama conmutación de resolución en imágenes receptivas. Vea este ejemplo de código:

<img srcset="https://res.cloudinary.com/.../h_300,w_300/v1548054527/ps4.jpg 300w,
          https://res.cloudinary.com/.../h_700,w_700/v1548054527/ps4.jpg 700w,
          https://res.cloudinary.com/.../h_1000,w_1000/v1548054527/ps4.jpg 1000w"  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:

La forma más sencilla que he encontrado (hasta ahora) de destilar / explicar `srcset` y` tamaños`: pic.twitter.com/I6YW0AqKfM

– Harry Roberts (@csswizardry) 1 de marzo de 2017

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

Sé que los descriptores de ancho en los atributos de img srcset representan el ancho de la fuente de la imagen (ancho del archivo original).

Lo que no sé es, ¿por qué se necesita? ¿Qué hace el navegador con ese valor? cc @grigs 🤓

– Christian Nwamba (@codebeast) 5 de octubre de 2018

Me quito el sombrero ante Jason Grigsby por la aclaración en sus respuestas.

Gracias al cambio de resolución, si se cambia el tamaño del navegador, se descarga la imagen correcta para la ventana gráfica correcta; por lo tanto, imágenes pequeñas para teléfonos pequeños (buenas en 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).

Ver la pluma
Galería de cuadrícula [Optimized] por Chris Nwamba (@codebeast)
en CodePen.

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

Conclusión

Este artículo tiene como objetivo proporcionar pautas simples pero efectivas para configurar imágenes y diseños receptivos a la luz de las muchas opciones disponibles, y potencialmente confusas. 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!