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   y cómo implementarlo de manera más efectiva con imgix. <picture>  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   (cambio de resolución). ajustar la resolución de la imagen al dispositivo  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   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. <picture>  En este caso, desea controlar el navegador directamente, a pesar del posible impacto en el rendimiento.  Uso de imgix y   para dirección de arte <picture>  imgix tiene dos beneficios principales cuando se usa el elemento   . 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. <picture>  En segundo lugar, ayuda a minimizar el impacto en el rendimiento al optimizar la imagen y almacenar en caché todas las diferentes versiones solicitadas.    el elemento     para algunos navegadores heredados. Puede usar   para agregar soporte para esos clientes. Nota: <picture> no está disponible Picturefill  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   , 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. <picture>  Sin embargo, con algunas adiciones a este código, es posible hacer   una poderosa herramienta para automatizar la dirección de arte en todo el conjunto de imágenes, no solo en una sola foto aislada. <picture>  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   de imgix para ajustar mediante programación dónde comienza el recorte, sin tener que generar manualmente versiones precortadas para diferentes relaciones de aspecto. crop  imgix ofrece dos modos que recortan según el contenido de la imagen:   y   . Funcionan de manera similar evaluando la imagen y detectando caras o áreas de alto contraste y luego recortando con las del centro. crop=faces crop=entropy  Hay más detalles sobre cómo usar estos modos en nuestras guías sobre   y   . cómo hacer avatares recortar puntos de interés  Veamos cómo usar   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. <picture>  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   normalmente podría causar. <picture>  recorte    Ver ejemplos de recorte de caras/entropía en el CodePen   https://codepen.io/imgix/pen/ZQVXBY?embedable=true  Vea el   de imgix (   ) en   . elemento Pen Picture y la dirección artística con imgix @imgix 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 alineación (   , etc.) y, a veces,   para ampliar una parte de la imagen en tamaños más pequeños. crop=faces crop=entropy crop=top rect  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   para dirigir el arte de manera aún más dramática.  <picture>   Ver ejemplos de marcas de agua/mezclas en CodePen   https://codepen.io/imgix/pen/NxoadL?embedable=true  Adición de compatibilidad con DPR  Si desea admitir múltiples resoluciones de píxeles dentro de   , puede hacerlo agregando variaciones de   a cada   . Por ejemplo, si quisiéramos admitir un dispositivo de mayor densidad para nuestro ejemplo original, el código se vería así: <picture> DPR srcset   <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   a la URL y etiquete cada una con el descriptor de densidad de píxeles adecuado (   ,   , etc.). dpr 1x 2x  Su imagen original es todo lo que necesita para crear infinitas variaciones a medida que cambian sus necesidades y diseños.  Resumen    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. imgix  También apoyamos enfoques con visión de futuro, como   , que intentan simplificar el diseño y la implementación receptivos. Client Hints    para aprovechar imgix. Cree una cuenta gratuita hoy  Parámetros de imgix relevantes    | Modo de recorte crop    | Proporción de píxeles del dispositivo dpr    | Cambiar el tamaño del modo de ajuste fit    | Región del rectángulo de origen rect  Otros recursos    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.  : Consultas de medios    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  : Imágenes receptivas 101    aprenda a usar   con los parámetros de recorte de puntos focales de imgix para hacer que sus imágenes sean atractivas en cualquier tamaño.  : Recorte de puntos focales para una dirección de arte receptiva <picture>

Sign Up for Free

Get A Demo

Read the Docs

Visit Website

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

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

About Author

COMENTARIOS

ETIQUETAS

ESTE ARTÍCULO FUE PRESENTADO EN

Related Stories

Aumente su productividad con estas 18 herramientas para desarrolladores 🚀🔥

Cómo mejorar su flujo de trabajo 10 veces: 17 aplicaciones esenciales

Telegram: el puente de Crypto Island hacia el continente

Una breve introducción a la teoría del cerebro de Boltzmann

Aumente su productividad con estas 18 herramientas para desarrolladores 🚀🔥

Cómo mejorar su flujo de trabajo 10 veces: 17 aplicaciones esenciales

Telegram: el puente de Crypto Island hacia el continente

Una breve introducción a la teoría del cerebro de Boltzmann

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps