Usar<picture> para renderizar dinámicamente imágenes para diferentes entornos de usuario

El diseño receptivo requiere un equilibrio entre el rendimiento y la flexibilidad: servir una imagen optimizada y del tamaño correcto para todos los dispositivos posibles no debería significar un tiempo de carga lento.

Dada la variedad de métodos para implementar el diseño receptivo, es importante comprender cuáles funcionan mejor para diferentes casos de uso.

En este tutorial, repasaremos cuándo usar el elemento <picture> y cómo implementarlo de manera más efectiva con imgix.

Dirección de arte versus cambio de resolución

Las imágenes receptivas generalmente se usan para resolver uno de dos problemas: la necesidad de modificar la imagen para que se ajuste a un diseño que cambia según el dispositivo (dirección de arte) o la necesidad de ajustar la resolución de la imagen al dispositivo (cambio de resolución).

En términos de implementación, es una elección entre darle al navegador suficiente información para decidir qué versión de la imagen usar o controlarla directamente.

El elemento <picture> se usa mejor para el caso de uso de dirección de arte porque los cambios requeridos probablemente incluirán cambiar las relaciones de aspecto, recortar la imagen de manera diferente y otros aspectos de diseño que son más complejos que solo ofrecer una imagen de mayor resolución.

En este caso, desea controlar el navegador directamente, a pesar del posible impacto en el rendimiento.

Uso de imgix y <picture> para dirección de arte

imgix tiene dos beneficios principales cuando se usa el elemento <picture> . En primer lugar, elimina la necesidad de mantener copias separadas y preprocesadas de la imagen para cada tamaño de ventana gráfica. Aplique los parámetros necesarios para ajustar el tamaño, el recorte y la proporción de píxeles del dispositivo.

En segundo lugar, ayuda a minimizar el impacto en el rendimiento al optimizar la imagen y almacenar en caché todas las diferentes versiones solicitadas.

Nota: el elemento <picture> no está disponible para algunos navegadores heredados. Puede usar Picturefill para agregar soporte para esos clientes.

Veamos cómo encaja todo esto. Comenzaremos con una imagen en orientación horizontal y luego proporcionaremos diferentes parámetros para mostrar la parte más significativa de la imagen para diferentes dispositivos que pueden tener otras orientaciones.

Haga clic en la imagen para ver los cambios en la ventana gráfica a tamaño completo

 <picture> <source srcset="https://assets.imgix.net/blog/unsplash-kiss.jpg?w=1280" media="(min-width: 1280px)" > <source srcset="https://assets.imgix.net/blog/unsplash-kiss.jpg?w=768&h=1024&fit=crop" media="(min-width: 768px)" > <source srcset="https://assets.imgix.net/blog/unsplash-kiss.jpg?w=568&h=320&fit=crop" media="(min-width: 480px)" > <img src="https://assets.imgix.net/blog/unsplash-kiss.jpg?w=320&h=568&fit=crop"> </picture>

Aunque es posible que no tengan el tamaño exacto para el dispositivo (dada la amplia variedad de tamaños de pantalla disponibles), establecer algunos puntos de interrupción simples de la ventana gráfica y aplicar algunos parámetros puede ayudarlo a llegar hasta allí con mucha menos sobrecarga que generar diferentes imágenes originales para Cada talla.

Puede continuar ampliando la cantidad de puntos de interrupción según sea necesario, según lo que sepa sobre los dispositivos de sus usuarios.

Incluso con esta implementación simple de <picture> , cubrimos los conceptos básicos, ajustando una sola imagen según sea necesario para proporcionar la versión más convincente de la imagen para cada tamaño de destino.

Sin embargo, con algunas adiciones a este código, es posible hacer <picture> una poderosa herramienta para automatizar la dirección de arte en todo el conjunto de imágenes, no solo en una sola foto aislada.

Dirección de Arte Automatizada

En los ejemplos anteriores, el recorte fue sencillo porque el contenido significativo estaba en el medio (que es el valor predeterminado para fit=crop ).

Sin embargo, si la parte más relevante de la imagen no está centrada, aún puede usar los modos crop de imgix para ajustar mediante programación dónde comienza el recorte, sin tener que generar manualmente versiones precortadas para diferentes relaciones de aspecto.

imgix ofrece dos modos que recortan según el contenido de la imagen: crop=faces y crop=entropy . Funcionan de manera similar evaluando la imagen y detectando caras o áreas de alto contraste y luego recortando con las del centro.

Hay más detalles sobre cómo usar estos modos en nuestras guías sobre cómo hacer avatares y recortar puntos de interés .

Veamos cómo usar <picture> y funciones clave de imgix, como superposiciones de texto y marcas de agua, puede crear un conjunto de imágenes de marca completa que se recortan y cambian para adaptarse a la pantalla de cualquier dispositivo.

Cada versión de estas imágenes se crea a partir de un archivo de imagen de origen sobre la marcha en respuesta al tamaño de la ventana gráfica y se almacena en caché, lo que minimiza en gran medida el almacenamiento de imágenes y cualquier impacto en el rendimiento que <picture> normalmente podría causar.

recorte

Ver ejemplos de recorte de caras/entropía en el CodePen

Vea el elemento Pen Picture y la dirección artística con imgix de imgix ( @imgix ) en CodePen .

En el ejemplo de CodePen, las imágenes se ajustan a la ventana gráfica en tamaño y relación de aspecto, y el estilo de recorte varía según lo que sea necesario en esas dimensiones para mantener al presidente Obama centrado.

Dependiendo de la variación de la imagen, esto se hace con crop=faces , crop=entropy , crop alineación ( crop=top , etc.) y, a veces, rect para ampliar una parte de la imagen en tamaños más pequeños.

La marca de agua del logotipo y el crédito de la foto también se ajustan en tamaño y relleno para adaptarse a los cambios de la ventana gráfica y cambiar de posición para evitar la superposición del sujeto.

Escala de texto y marcas de agua

Cualquier superposición de texto, mezcla o marca de agua que agregue a sus imágenes se puede escalar y ajustar junto con la imagen. Aquí hay un ejemplo que aprovecha <picture> para dirigir el arte de manera aún más dramática.

Ver ejemplos de marcas de agua/mezclas en CodePen

Adición de compatibilidad con DPR

Si desea admitir múltiples resoluciones de píxeles dentro de <picture> , puede hacerlo agregando variaciones de DPR a cada srcset . Por ejemplo, si quisiéramos admitir un dispositivo de mayor densidad para nuestro ejemplo original, el código se vería así:

 <picture> <source srcset="https://assets.imgix.net/blog/unsplash-kiss.jpg?w=1280&dpr=1 1x, https://assets.imgix.net/blog/unsplash-kiss.jpg?w=1280&dpr=2 2x, https://assets.imgix.net/blog/unsplash-kiss.jpg?w=1280&dpr=3 3x, https://assets.imgix.net/blog/unsplash-kiss.jpg?w=1280&dpr=4 4x, https://assets.imgix.net/blog/unsplash-kiss.jpg?w=1280&dpr=5 5x" media="(min-width: 1280px)" > <source srcset="https://assets.imgix.net/blog/unsplash-kiss.jpg?w=768&h=1024&fit=crop&dpr=1 1x, https://assets.imgix.net/blog/unsplash-kiss.jpg?w=768&h=1024&fit=crop&dpr=2 2x, https://assets.imgix.net/blog/unsplash-kiss.jpg?w=768&h=1024&fit=crop&dpr=3 3x, https://assets.imgix.net/blog/unsplash-kiss.jpg?w=768&h=1024&fit=crop&dpr=4 4x, https://assets.imgix.net/blog/unsplash-kiss.jpg?w=768&h=1024&fit=crop&dpr=5 5x" media="(min-width: 768px)" > <source srcset="https://assets.imgix.net/blog/unsplash-kiss.jpg?w=568&h=320&fit=crop&dpr=1 1x, https://assets.imgix.net/blog/unsplash-kiss.jpg?w=568&h=320&fit=crop&dpr=2 2x, https://assets.imgix.net/blog/unsplash-kiss.jpg?w=568&h=320&fit=crop&dpr=3 3x, https://assets.imgix.net/blog/unsplash-kiss.jpg?w=568&h=320&fit=crop&dpr=4 4x, https://assets.imgix.net/blog/unsplash-kiss.jpg?w=568&h=320&fit=crop&dpr=5 5x" media="(min-width: 480px)" > <img srcset="https://assets.imgix.net/blog/unsplash-kiss.jpg?w=320&h=568&fit=crop&dpr=1 1x, https://assets.imgix.net/blog/unsplash-kiss.jpg?w=320&h=568&fit=crop&dpr=2 2x, https://assets.imgix.net/blog/unsplash-kiss.jpg?w=320&h=568&fit=crop&dpr=3 3x, https://assets.imgix.net/blog/unsplash-kiss.jpg?w=320&h=568&fit=crop&dpr=4 4x, https://assets.imgix.net/blog/unsplash-kiss.jpg?w=320&h=568&fit=crop&dpr=5 5x"> </picture>

Observe de nuevo que no es necesario crear nuevas versiones de la imagen; simplemente cree una copia de la fuente, agregue un parámetro dpr a la URL y etiquete cada una con el descriptor de densidad de píxeles adecuado ( 1x , 2x , etc.).

Su imagen original es todo lo que necesita para crear infinitas variaciones a medida que cambian sus necesidades y diseños.

Resumen

imgix es un poderoso aliado para abordar la complejidad de las imágenes receptivas en diseños que cambian rápidamente. Con simples cambios de parámetros, puede abordar nuevos contenedores de diseño, dispositivos y resoluciones de dispositivos mediante programación en lugar de reprocesar todo su catálogo de imágenes.

También apoyamos enfoques con visión de futuro, como Client Hints , que intentan simplificar el diseño y la implementación receptivos.

Cree una cuenta gratuita hoy para aprovechar imgix.

Parámetros de imgix relevantes

• crop | Modo de recorte
• dpr | Proporción de píxeles del dispositivo
• fit | Cambiar el tamaño del modo de ajuste
• rect | Región del rectángulo de origen

Otros recursos

• Consultas de medios : selección curada de sitios web diseñados de manera receptiva que utilizan consultas de medios. Útil para observar diferentes enfoques de la dirección de arte.

• Imágenes receptivas 101 : serie de introducción de Cloud Four Design que cubre todos los métodos para crear imágenes receptivas y sus compensaciones y casos de uso

• Recorte de puntos focales para una dirección de arte receptiva : aprenda a usar <picture> con los parámetros de recorte de puntos focales de imgix para hacer que sus imágenes sean atractivas en cualquier tamaño.