Una guía para principiantes: imágenes receptivas con srcset

Debido a quecasi el 50% del peso de una página típica se compone de imágenes , la optimización de imágenes es extremadamente importante para ejecutar un sitio de alto rendimiento. Cada byte que no tiene que transferir para servir su contenido significa una página más ágil y tiempos de carga más rápidos para sus usuarios.

Este tutorial cubre los entresijos del uso del atributo srcset y cómo imgix facilita el proceso.

La entrega de imágenes del tamaño correcto es importante porque puede minimizar los bytes transferidos y la sobrecarga de la CPU . El atributo srcset es una de las mejores formas de hacerlo en la actualidad.

srcset y densidades de visualización

srcset proporciona una forma sencilla de especificar diferentes imágenes para diferentes resoluciones de dispositivos. Permite que los sitios sirvan versiones de imágenes de 2x, 3x o superiores a dispositivos modernos con pantallas de alta resolución. Usarlo dentro de una etiqueta img es fácil:

 <img srcset="asset.png 1x, asset-2x.png 2x, asset-3x.png 3x" src="asset.png" >

Si bien esto ofrece los mejores activos a los usuarios, traslada la carga al servicio para generar y almacenar cada versión de cada activo. Esto puede hacer que los costos de almacenamiento se disparen y es posible que nunca sirva todos los activos que genera.

Cuando se trata de una gran biblioteca o con contenido generado por el usuario, esto es insostenible.

Con imgix, toda su biblioteca de imágenes está lista para srcset al instante.

Usando srcset con imgix

Usando los parámetros de URL imgix w y dpr , podemos simplificar la cantidad de esfuerzo que se necesita para generar los atributos srcset en nuestras imágenes. Para este ejemplo, usaremos la imagen ubicada en:

https://assets.imgix.net/examples/bluehat.jpg

Queremos servir esta imagen a 400 píxeles de ancho:

 <img srcset="https://assets.imgix.net/examples/bluehat.jpg?w=400&dpr=1 1x, https://assets.imgix.net/examples/bluehat.jpg?w=400&dpr=2 2x, https://assets.imgix.net/examples/bluehat.jpg?w=400&dpr=3 3x" src="https://assets.imgix.net/examples/bluehat.jpg?w=400" >

Obtenemos una etiqueta de imagen que ofrece la mejor resolución para cada dispositivo en función de su relación dispositivo-píxel (DPR). imgix servirá automáticamente más píxeles cuando se le proporcione el parámetro dpr .

Cálculo de la relación dispositivo-píxel

Puede ver que hemos aplicado dpr=1 , dpr=2 y dpr=3 a nuestros activos 1x, 2x y 3x, respectivamente. El parámetro dpr indica a imgix que trate los parámetros w como píxeles independientes del dispositivo (también conocidos como "píxeles CSS").

Por lo tanto, la imagen de 400×300 en dpr=2 será en realidad una imagen de 800×600 píxeles. La imagen dpr=3 será de 1200×900 píxeles.

Esto le brinda lo mejor de ambos mundos: resolución completa para los dispositivos que la admiten, sin entregar más datos de los necesarios a los dispositivos que no la usarán. Al usar imgix, solo tenemos que almacenar el activo original y luego manipularlo sobre la marcha, como hemos visto anteriormente.

Esto también elimina el dolor de cabeza cuando sale un dispositivo 4x . imgix actualmente admite hasta dpr=5 .

Esta práctica funciona mejor con diseños de imagen fijos. Actualmente, se admite ampliamente el uso srcset con dpr .

Uso srcset y sizes con consultas de medios

Un enfoque diferente para manejar imágenes receptivas para diseños fluidos es usar definiciones de tamaño con srcset . Esta solución le brinda la capacidad de orientar los tamaños en función de las definiciones de consulta de medios dentro de un atributo sizes .

El navegador solicitará la imagen más apropiada o, según el navegador, cargará la mejor imagen del caché cuando esté disponible.

El siguiente ejemplo muestra el tamaño de tres imágenes con imgix a 1024, 640 y 480 píxeles de ancho. Usando el atributo sizes , estamos apuntando a dos consultas sobre el comportamiento de las imágenes.

En una ventana gráfica de 36em o superior, las imágenes se mostrarán a 1/3 del ancho de la ventana gráfica.

Por debajo de ese tamaño, las imágenes se mostrarán en el tamaño completo de la ventana gráfica. En esos tamaños, el navegador determinará qué imagen cargar cuando la página se represente para el tamaño de destino dado.

 <img srcset="https://assets.imgix.net/unsplash/bridge.jpg?w=1024&h=1024&fit=crop 1024w, https://assets.imgix.net/unsplash/bridge.jpg?w=640&h=640&fit=crop 640w, https://assets.imgix.net/unsplash/bridge.jpg?w=480&h=480&fit=crop 480w" src="https://assets.imgix.net/unsplash/bridge.jpg?w=640&h=640&fit=crop" sizes="(min-width: 36em) 33.3vw, 100vw" >

Consulte el lápiz <a href="https://codepen.io/imgix/pen/VLNZaW/" target="_blank">VLNZaW</a> de imgix (<a href="https://codepen.io/ imgix" target="_blank">@imgix</a>) en <a href="https://codepen.io" target="_blank">CodePen</a>.

Mejores prácticas usando imgix

Hay más en lo que pensar al entregar las mejores imágenes posibles con srcset e imgix.

imgix ofrece la posibilidad de agregar operaciones adicionales para brindarle más control sobre sus imágenes de salida, y debido a que están definidas en la URL, puede ajustar su configuración y realizar ediciones de última etapa a medida que cambian las decisiones.

Uno de los desafíos de usar srcset es que desea generar suficientes tamaños para que la mayoría de sus usuarios descarguen imágenes que tienen un tamaño similar al que ven en la pantalla, pero si genera demasiados tamaños puede terminar impactando el caché. -capacidad, lo que podría tener un impacto negativo en el rendimiento.

Afortunadamente, muchas de las bibliotecas de imgix pueden generar automáticamente un srcset óptimo para usted.

Utilice fit=max

El uso del parámetro fit=max en una URL de imgix garantizará que una imagen nunca se entregue más grande que su tamaño original. De esta forma, al solicitar una imagen dpr=3 , no habrá extrapolación de imágenes. Obtenga más información sobre fit en la documentación.

Usar auto=format

El parámetro auto=format entregará imágenes WebP livianas para los navegadores que lo admitan (Chrome, Firefox, etc.) y volverá al formato original para otras instancias.

Los formatos más modernos como WebP pueden reducir en gran medida la cantidad de datos de imágenes que se envían al cliente; a veces hasta en un 35%. Obtenga más información sobre la negociación automática de contenido en la documentación.

Usar calidad variable

Al configurar dpr con imgix, es posible que desee considerar ajustar la calidad de sus imágenes. Establecer el parámetro q en valores más bajos para DPR más altos le permite reducir el tamaño del archivo mientras mantiene un conjunto de píxeles más denso para su imagen.

?q=80 El tamaño de la imagen es de 21,3 kB. Pruébelo y vea la diferencia en Sandbox .

?dpr=2&q=40 El tamaño de la imagen es de 34,7 kB. Pruébelo y vea la diferencia en Sandbox.

?dpr=3&q=20 El tamaño de la imagen es de 42,1 kB. Pruébelo y vea la diferencia en Sandbox.

Esta práctica común se facilita con la API de URL de imgix. Ajustar la calidad funciona especialmente bien con formatos con pérdida como WebP y JPEG.

Poniendolo todo junto

Aquí hay una implementación de estos ejemplos aplicados a nuestro ejemplo srcset DPR:

 <img srcset="https://assets.imgix.net/examples/bluehat.jpg?w=400&dpr=1 1x, https://assets.imgix.net/examples/bluehat.jpg?w=400&fit=max&q=40&dpr=2 2x, https://assets.imgix.net/examples/bluehat.jpg?w=400&fit=max&q=20&dpr=3 3x" src="https://assets.imgix.net/examples/bluehat.jpg?w=400" >

Consulte el lápiz <a href="https://codepen.io/imgix/pen/MwRjzZ/" target="_blank">MwRjzZ</a> de imgix (<a href="https://codepen.io/ imgix" target="_blank">@imgix</a>) en <a href="https://codepen.io" target="_blank">CodePen</a>.

Resumen y tutoriales relacionados

Las imágenes receptivas son un área de implementación que cambia rápidamente, y diferentes métodos son aplicables a diferentes casos de uso. Aquí están nuestros otros tutoriales que tocan aspectos del diseño receptivo.

• Diseño para retina, implementación con imgix
• Imágenes receptivas de próxima generación con sugerencias de clientes
• Usando imgix con <imagen>