Guía para principiantes sobre imágenes receptivas: cómo hacerlo bien

Este tutorial de imágenes receptivas analizará las técnicas de CSS, las características de HTML y algunas herramientas que querrá considerar. Todo esto debería brindarle una buena descripción general de cómo comenzar con imágenes receptivas en sus proyectos hoy.

Tabla de contenido:

• Imágenes receptivas con CSS simple
• Imágenes receptivas con los atributos srcset y sizes
• Usar srcset con un descriptor de densidad de píxeles
• Usando el elemento <picture>
• Herramientas y servicios para ayudar con imágenes receptivas

Imágenes receptivas con CSS simple

La forma más sencilla de hacer que cualquier imagen en una página web responda no requiere consultas de medios ni HTML adicional. Puedes hacer que cualquier imagen crezca y se reduzca dependiendo del tamaño de la ventana con un par de líneas de HTML y CSS.

Primero, mi HTML incluirá atributos de width y height :

La mejor práctica es incluir los valores de width y height en el HTML. Esto garantiza que el navegador reserve el espacio necesario para la imagen y que no haya un reflujo de página posterior mientras se carga la imagen.

Junto con eso, voy a usar el siguiente CSS:

 img { max-width : 100% ; height : auto; }
 Lenguaje de código: CSS ( css )

Estos valores anularán mi HTML. La propiedad max-width se establece en 100% para garantizar que llene el espacio necesario, hasta un máximo de 1000 px (el valor del HTML). El valor de height de auto asegura que la altura de la imagen mantenga las dimensiones de la imagen proporcionales con su ancho y altura naturales. Si elimino la height: auto , la imagen permanecerá en la altura definida en el HTML, independientemente del ancho, que generalmente no es lo que quiero.

Puede probar este sencillo ejemplo utilizando el siguiente CodePen. Lo mejor es abrir la demostración en una nueva ventana si desea probar la capacidad de respuesta.

Y tenga en cuenta que, en mi ejemplo, las dimensiones naturales de la imagen son 2000 px x 1333 px, pero elijo mostrarla a un máximo de 1000 px.

En teoría, podría hacer lo anterior para cada imagen de mi página, y esta sería una forma rudimentaria y aceptable de incorporar imágenes receptivas en mis proyectos. Pero idealmente, me gustaría llevar esto al siguiente nivel y obtener control sobre la resolución de la imagen y otros factores, para mejorar el rendimiento y ayudar con el SEO, que trataré en las siguientes secciones.

Imágenes receptivas con los atributos srcset y sizes

En el ejemplo de CSS simple anterior, estoy cargando una imagen que tiene un tamaño aproximado de 1,44 MB, incluso después de haber usado compresión sin pérdida para reducir el tamaño. Eso no es terrible por sí solo cuando se ve en una computadora de escritorio, pero ciertamente no es del tamaño que quiero cargar en un dispositivo pequeño, como un teléfono inteligente. Aquí es donde los srcset y sizes resultan útiles.

El atributo srcset le permite especificar varios tamaños de imagen en un solo valor. Estas serán las imágenes a las que tendrá acceso el navegador o el dispositivo en determinadas circunstancias. El atributo de sizes funciona junto con srcset para decirle al navegador cuál de las imágenes debe elegir.

Aquí hay un ejemplo que usa varias versiones de la imagen leopard.png del ejemplo anterior:

 < img srcset = "images/leopard-480.png 480w, images/leopard-800.png 800w, images/leopard.png 2000w" sizes = "(max-width: 600px) 480px, (max-width: 1000px) 800px, 1000px" src = "images/leopard.png" alt = "Leopard on a tree branch" >
 Lenguaje de código: HTML, XML ( xml )

Si nunca antes ha visto los srcset y sizes , puede parecer confuso a primera vista. Lo desglosaré todo para que sea relativamente fácil de comprender.

Desglosando el atributo srcset

El atributo srcset acepta una lista separada por comas de una o más cadenas. Cada cadena contiene:

• Una URL que apunta a una imagen.
• Uno de los siguientes descriptores opcionales (separados por un espacio):
  • Un descriptor de ancho
  • Un descriptor de densidad de píxeles

En mi ejemplo, he incluido un descriptor de ancho, que es el que verá con más frecuencia. He incluido tres versiones diferentes de la imagen: la versión grande de alta resolución, junto con una de 800 px de ancho y otra de 480 px de ancho.

Observe que cuando utilicé el descriptor de ancho en el ejemplo anterior, la sintaxis es el valor de ancho seguido inmediatamente por una "w" (¡no use un valor de unidad "px"!). Para cada uno de los descriptores de ancho que representan las imágenes, estoy usando el ancho intrínseco de la imagen en píxeles. Puede obtener el tamaño real de cualquier imagen de varias maneras diferentes: haciendo referencia a sus propiedades en su sistema de archivos, un editor de fotos o incluso en su navegador o en las herramientas de desarrollo del navegador.

Desglosando el atributo de sizes

El atributo de sizes solo funciona junto con el atributo srcset . Puede usar srcset solo (vea la siguiente sección), pero la forma más común de usar srcset es junto con las sizes .

El atributo de sizes acepta una lista separada por comas de una o más cadenas. Cada cadena contiene:

• Una condición de medios (similar a las consultas de medios utilizadas en CSS)
• Un valor que define el tamaño de la "ranura" que ocupará la imagen

El valor de la ranura puede ser una longitud absoluta como em o px o una unidad relativa de ventana gráfica (por ejemplo, vw ). Observe en mi ejemplo que los valores de ranura en el atributo de sizes no coinciden exactamente con los tres descriptores de ancho. Aquí está el código de nuevo:

 < img srcset = "images/leopard-480.png 480w, images/leopard-800.png 800w, images/leopard.png 2000w" sizes = "(max-width: 600px) 480px, (max-width: 1000px) 800px, 1000px" src = "images/leopard.png" alt = "Leopard on a tree branch" >
 Lenguaje de código: HTML, XML ( xml )

El hecho de que los valores de las ranuras no coincidan exactamente con los descriptores de ancho está bien. En mi caso, puedo desglosar el valor de los sizes como:

• Una ventana gráfica de 600 px de ancho cargará la imagen de 480 w desde el valor srcset dentro de una ranura de 480 px de ancho.
• Una ventana gráfica de 1000 px de ancho cargará la imagen de 800 w en una ranura de 800 px.
• La imagen de tamaño completo predeterminada (2000w) llenará un espacio de 1000 px si no se cumplen las condiciones de medios anteriores.

La última cadena es solo un valor de ranura, sin condición de medios. Como se mencionó, esto garantiza que el navegador tendrá algo que mostrar si no se cumple ninguna de las condiciones de los medios, funcionando de manera predeterminada.

Puede ver el código de ejemplo en acción usando la demostración de CodePen a continuación. Tenga en cuenta que, en este caso, tendrá que probar algo que imite diferentes dispositivos (como DevTools en Chrome). También puede abrir la página usando una variedad de dispositivos reales para hacer una prueba real. Para mayor comodidad, he incluido una superposición de texto en cada una de las imágenes para que pueda ver qué se carga cuando ve la página.

Tenga en cuenta que después de que se carga la imagen original, la imagen no cambia de tamaño cuando cambia el tamaño de la ventana gráfica. Los srcset y sizes son útiles para cargar imágenes de acuerdo con las condiciones de los medios en la primera carga, pero no ayudarán a cambiar las imágenes en función del cambio de tamaño de la pantalla. Más adelante, le mostraré una función diferente de imágenes receptivas que resolverá ese problema.

Usar srcset con un descriptor de densidad de píxeles

Anteriormente, mencioné que el atributo srcset se puede usar con un descriptor de densidad de píxeles. Este descriptor permite que el navegador decida qué imagen usar en función de las capacidades de resolución del dispositivo. Esto es lo que parece:

 < img srcset = "images/leopard-480.png, images/leopard-800.png 1.5x, images/leopard.png 2x" src = "images/leopard-480.png" alt = "Leopard on a tree branch" >
 Lenguaje de código: HTML, XML ( xml )

Note un par de cosas aquí. En primer lugar, para el atributo src regular, estoy usando la imagen más pequeña, lo que garantiza un enfoque móvil primero. Luego, el atributo srcset incluye algunas otras versiones de la imagen, con la resolución indicada por los descriptores 1.5x y 2x. La imagen 480 no incluye un descriptor porque el 1x está implícito. Finalmente, observe que no hay un atributo de sizes presente, que no necesito en este caso. MDN explica cómo el navegador elige la imagen:

Para comprender cómo funcionan los descriptores, recuerde que un píxel de dispositivo representa cada píxel de CSS. Así que 1x sería una relación de 1:1, 1,5x sería una relación de 1,5:1 y así sucesivamente. Puede probarlo en CodePen a continuación, pero tendrá que usar diferentes dispositivos (o usar una herramienta que los imite) para ver la diferencia.

Usando el elemento <picture>

Hasta ahora, las características que he discutido para incorporar imágenes receptivas suponen que siempre estoy mostrando la misma imagen pero en diferentes tamaños y resoluciones. Y aunque estoy usando CSS en todos los ejemplos para cambiar el ancho de las imágenes cuando el usuario cambia el tamaño del navegador, la imagen en sí nunca cambia una vez que se carga la página.

El elemento <picture> es una función HTML que le permite ofrecer versiones alternativas de una imagen en función de la presencia de funciones multimedia específicas. Esto también permite que las imágenes se cambien cuando el usuario cambia el tamaño de la ventana gráfica y esencialmente le permite hacer dirección de arte con sus imágenes, mostrando variedades de la misma escena pero recortadas o ampliadas de manera diferente según el tamaño del dispositivo.

Por ejemplo, una toma amplia con un objeto pequeño en el medio sería apropiada para un dispositivo más grande en una computadora de escritorio o tableta, pero un dispositivo más pequeño como un teléfono inteligente podría cargar la misma imagen recortada o ampliada.

Aquí hay un código de ejemplo que me permitirá hacer algo de dirección de arte en mi imagen:

Observe lo siguiente sobre el código:

• El elemento <picture> acepta múltiples elementos <picture> anidados como hijos
• Cada uno de los elementos <source> dentro <picture> utiliza el atributo de media para definir la condición de medios que activa el uso de esa imagen de origen
• El elemento <picture> acepta la <img> elemento como elemento secundario, que el navegador reconoce como una alternativa si no es compatible con <picture>
• No hay atributos directamente en el elemento <picture> ( <picture> solo acepta atributos globales de HTML y no tiene atributos propios)

El CodePen a continuación demuestra esto:

Si abre la demostración en una nueva ventana, puede cambiar el tamaño de la ventana para ver el cambio de imagen. Observe cómo el sujeto de la imagen se acerca más a medida que la ventana del navegador se hace más pequeña. Esta es una manera fácil de crear imágenes dirigidas por arte receptivas que se vean apropiadas en cualquier dispositivo que se esté utilizando. Por supuesto, esto requiere un poco más de trabajo, pero vale la pena si desea que sus imágenes sean significativas en cualquier dispositivo que utilice.

Herramientas y servicios para ayudar con imágenes receptivas

Hay innumerables herramientas disponibles, tanto gratuitas como comerciales, que ayudarán a implementar imágenes receptivas. Y algunos de estos le ayudarán a evitar incluso tener que escribir gran parte del código que he discutido. Aquí hay algunos que pueden resultarle útiles:

Es importante y conveniente que una serie de servicios diferentes puedan crear imágenes receptivas automáticamente, ofreciendo funciones como diferentes tamaños de imagen, una API para la generación de imágenes sobre la marcha y más.

Incluso el propio WordPress viene con soporte incorporado para imágenes receptivas (a partir de la versión 4.4).

Otra herramienta/servicio que vale la pena analizar es Optimole. Es una herramienta avanzada de optimización y entrega de imágenes creada por el equipo detrás de Themeisle. Este no solo reducirá el tamaño del disco de sus imágenes sin que la calidad visual sufra, sino que también se encargará de entregar las imágenes a los visitantes de su sitio web a través de un CDN de imágenes. Uno de los aspectos de esta función de entrega de imágenes es que sus imágenes también se optimizarán para verlas en diferentes dispositivos.

Hay una versión gratuita de Optimole disponible. Permite hasta 5000 visitas al sitio web mensualmente y le brindará todas las funciones de escalado automático, CDN y más.

¿Cuál es su experiencia con las imágenes receptivas en los sitios web? Háganos saber en los comentarios a continuación.

Diseño y presentación por Chris Fitzgerald y Karol K.