Debido a que  , 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. casi el 50% del peso de una página típica se compone de imágenes  Este tutorial cubre los entresijos del uso del atributo   y cómo imgix facilita el proceso. srcset  La entrega de imágenes del tamaño correcto es importante porque puede minimizar los bytes transferidos y   . El atributo   es una de las mejores formas de hacerlo en la actualidad.  la sobrecarga de la CPU srcset  srcset y densidades de visualización    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   es fácil: srcset img   <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   al instante. srcset  Usando srcset con imgix  Usando los parámetros de URL imgix   y   , podemos simplificar la cantidad de esfuerzo que se necesita para generar los atributos   en nuestras imágenes. Para este ejemplo, usaremos la imagen ubicada en: w dpr srcset   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" >   https://codepen.io/imgix/pen/aOxmqg?embedable=true  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   ,   y   a nuestros activos 1x, 2x y 3x, respectivamente. El parámetro   indica a imgix que trate los parámetros   como   (también conocidos como "píxeles CSS"). dpr=1 dpr=2 dpr=3 dpr w píxeles independientes del dispositivo  Por lo tanto, la imagen de 400×300 en   será en realidad una imagen de 800×600 píxeles. La imagen   será de 1200×900 píxeles.  dpr=2 dpr=3  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   . imgix actualmente admite hasta   . 4x dpr=5  Esta práctica funciona mejor con diseños de imagen fijos. Actualmente, se   el uso   con   . admite ampliamente srcset dpr  Uso   y   con consultas de medios srcset sizes  Un enfoque diferente para manejar imágenes receptivas para diseños fluidos es usar definiciones de tamaño con   . 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   . srcset 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   , estamos apuntando a dos consultas sobre el comportamiento de las imágenes. sizes  En una ventana gráfica de   o superior, las imágenes se mostrarán a 1/3 del ancho de la ventana gráfica. 36em  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>.   https://codepen.io/imgix/pen/VLNZaW?embedable=true  Mejores prácticas usando imgix  Hay más en lo que pensar al entregar las mejores imágenes posibles con   e imgix. srcset  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   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. srcset  Afortunadamente, muchas de las   pueden generar automáticamente un   óptimo para usted. bibliotecas de imgix srcset  Utilice  fit=max  El uso del parámetro   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   , no habrá extrapolación de imágenes. Obtenga más información sobre   en la documentación. fit=max dpr=3 fit  Usar  auto=format  El parámetro   entregará imágenes WebP livianas para los navegadores que lo admitan (Chrome, Firefox, etc.) y volverá al formato original para otras instancias. auto=format  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   en la documentación. la negociación automática de contenido  Usar calidad variable  Al configurar   con imgix, es posible que desee considerar ajustar la calidad de sus imágenes. Establecer el parámetro   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. dpr q    El tamaño de la imagen es de 21,3 kB.   .  ?q=80 Pruébelo y vea la diferencia en Sandbox    El tamaño de la imagen es de 34,7 kB.  ?dpr=2&q=40 Pruébelo y vea la diferencia en Sandbox.     El tamaño de la imagen es de 42,1 kB.  ?dpr=3&q=20 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   DPR: srcset   <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>

Sign Up for Free

Get A Demo

Read the Docs

Visit Website

Este audio es producido en el idioma original de la historia!

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

About Author

COMENTARIOS

ETIQUETAS

ESTE ARTÍCULO FUE PRESENTADO EN

Related Stories

La guía completa para una migración exitosa a la nube: estrategias y mejores prácticas

Creación de productos criptográficos centrados en el usuario: la importancia de los comentarios de los clientes

Liberando el poder de la IA. Una revisión sistemática de técnicas de vanguardia: resumen e introducción

Las capas invisibles: por qué las entrevistas con los usuarios son un activo irremplazable

La guía completa para una migración exitosa a la nube: estrategias y mejores prácticas

Creación de productos criptográficos centrados en el usuario: la importancia de los comentarios de los clientes

Liberando el poder de la IA. Una revisión sistemática de técnicas de vanguardia: resumen e introducción

Las capas invisibles: por qué las entrevistas con los usuarios son un activo irremplazable

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps