Guía de principiantes para imágenes receptivas: cómo hacerlas correctamente

Si es relativamente nuevo en un diseño receptivo o si simplemente desea una referencia rápida para las diversas cosas que puede hacer en HTML y CSS para incorporar imágenes receptivas en sus proyectos, este tutorial con imágenes receptivas debería ser útil. En esta etapa, hacer que los sitios web se vean bien y funcionan bien en múltiples dispositivos y plataformas es una parte integral de un buen diseño y desarrollo web. No hay separación entre “diseño móvil” y “diseño de escritorio”; Cada sitio web creado hoy debe ser receptivo y debe funcionar bastante bien en cada dispositivo. Gran parte del proceso de diseño receptivo son las imágenes receptivas.

Este tutorial con imágenes receptivas pasará por técnicas CSS, funciones HTML y algunas herramientas que querrá considerar. Todo esto debería darle una buena imagen general sobre comenzar con imágenes receptivas en sus proyectos hoy. Contenido:
Imágenes receptivas con CSS simple
Imágenes receptivas con los atributos de scSet y tamaños
Uso de srcset con un descriptor de densidad de píxeles
Usando el elemento
Herramientas y servicios para ayudar con imágenes receptivas
Cómo crear imágenes #Sponsive para cualquier web #Site usando #HTML y #CSS Simple ️
Haga clic en Tweet
Imágenes receptivas con CSS simple La forma más fácil de hacer que no se requiera una imagen desde una página web no requiere medios adicionales o consultas HTML. Puede hacer que cualquier imagen crezca y disminuya dependiendo del tamaño de la ventana con unas pocas líneas de HTML y CSS.
Primero, mi HTML incluirá los atributos de ancho y altura:

lenguaje de código: html, xml (xml)
Incluir valores de ancho y altura en HTML es la mejor práctica. Esto asegura que el navegador se reserva el espacio necesario para la imagen y que no haya una redistribución posterior de la página a medida que se carga la imagen. Junto con esto, usaré el siguiente CSS:
Img {width máximo: 100%; Altura: Auto; }
Idioma de código: CSS (CSS) Estos valores anularán mi HTML. La propiedad del ancho máximo se establece en 100% para garantizar que llene cualquier espacio, hasta un máximo de 1000px (valor HTML). El valor de la altura automática asegura que la altura de la imagen mantenga las dimensiones de la imagen proporcional a su ancho y altura natural. Si elimino la altura: Auto, la imagen permanecerá en la altura definida en HTML, independientemente del ancho, que generalmente no es lo que quiero.
Puede probar este ejemplo simple usando el siguiente CodePen. Es mejor 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 2000px x 1333px, pero elijo mostrarlo hasta un máximo de 1000px. Teóricamente, podría hacer lo anterior para cada imagen en 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 el control sobre la resolución de la imagen y otros factores, para mejorar el rendimiento y ayudar al SEO, que discutiré en las próximas secciones.
Imágenes receptivas con los atributos de SRCSET y los tamaños en el ejemplo simple de CSS anterior, cargo una imagen con un tamaño de aproximadamente 1.44 MB, incluso después de usar compresión sin pérdida para reducir el tamaño. Esto no es terrible en sí mismo cuando se ve en un escritorio, pero ciertamente no es del tamaño que quiero cargar en un dispositivo pequeño, como un teléfono inteligente. Aquí hay atributos útiles srcset y tamaños. El atributo SRCSET le permite especificar múltiples dimensiones de imagen en un valor. Estas serán las imágenes a las que el navegador o dispositivo tendrán acceso en ciertas circunstancias. El atributo de tamaños funciona con srcset para decirle al navegador cuál de las imágenes elegir.

El lenguaje del código: html, xml (xml) Si nunca ha visto los atributos srcset y tamaños, esto puede parecer confundido a primera vista. Romperé todo para que sea relativamente fácil de entender.
El desglose del atributo SRCSET El atributo SRCSET acepta una lista de una o más filas separadas por una coma. Cada cadena contiene:
Una URL que indica 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, incluí un descriptor de ancho, que es el que verá con más frecuencia. Incluimos tres versiones diferentes de la imagen: la gran versión de alta resolución, junto con una con un ancho de 800 píxeles y otra con un ancho de 480 píxeles. Observe cuando utilicé el descriptor de ancho en el ejemplo anterior, la sintaxis es el valor del ancho seguido inmediatamente por una “W” (¡no use un valor unitario “PX”!). Para cada uno de los descriptores de ancho que representan las imágenes, usan el ancho intrínseco de la imagen en los píxeles. Puede obtener el tamaño real de cualquier imagen de varias maneras diferentes: refiriéndose a sus propiedades en su sistema de archivos, un editor de fotos o incluso en las herramientas de desarrollo del navegador o navegador. La desviación de los tamaños del atributo del atributo funciona solo con juntos. El atributo scSet. Puede usar SRCSET solo (consulte la siguiente sección), pero la forma más común de usar SRCSET es con tamaños. El atributo de tamaños acepta una lista separada por coma de una o más cadenas. Cada cadena contiene:
Una condición de medios (similar a los interrogatorios de los medios utilizados en CSS)
Un valor que define el tamaño de “ranura” que ocupará la imagen
El valor de la ranura puede ser una longitud absoluta como EM o PX o una unidad de visualización relativa (por ejemplo, VW). Observe en mi ejemplo que los valores de la ranura de la ranura no coinciden exactamente con los tres descriptores de ancho. Aquí está el código nuevamente:

lenguaje de código: html, xml (xml) El hecho de que los valores de la ranura no coinciden exactamente con los descriptores de ancho. En mi caso, puedo desglosar el valor de los tamaños de la siguiente manera:
Una ventana de vista de 600 px de ancho cargará la imagen de 480 W del valor SCSET en una ranura que tiene 480 PX de ancho.
Una ventana de vista de 1000 px de ancho cargará la imagen de 800 W en una ranura de 800 px.
La imagen predeterminada de tamaño completo (2000W) llenará una ranura de 1000px 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 asegura que el navegador tenga algo que mostrar si no se cumple alguna de las condiciones de los medios, funcionando de forma predeterminada.
Puede ver el ejemplo de código en acción utilizando la demostración de CodePen a continuación. Tenga en cuenta que en este caso, necesitará probar algo que imite diferentes dispositivos (como DevTools de Chrome). También puede abrir la página utilizando una variedad de dispositivos reales para hacer una prueba verdadera. Por conveniencia, incluimos una superposición de texto en cada una de las imágenes para que pueda ver lo que se carga al ver la página.
Tenga en cuenta que después de cargar la imagen original, la imagen no cambia su tamaño cuando cambia el tamaño de la ventana de visualización. SRCSET y los tamaños 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 tarde, le mostraré otra característica de las imágenes receptivas que resolverán este problema. El uso de 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 de acuerdo con las capacidades de resolución del dispositivo. Así es como se ve:

Lenguaje del código: HTML, XML (XML) Observe algunas cosas aquí. En primer lugar, para el atributo SRC habitual, uso la imagen más pequeña, asegurando un enfoque móvil. A continuación, el atributo SCSET incluye varias otras versiones de imagen, con la resolución indicada por los descriptores 1.5x y 2x. La imagen 480 no incluye un descriptor porque 1x es predeterminado. Finalmente, observe que no hay un atributo de tamaño, que no necesito en este caso. MDN explica cómo Browser elige la imagen:
El agente de usuario selecciona cualquiera de las fuentes disponibles a su discreción. Esto les da un margen de maniobra significativa para adaptar su selección en función de cosas como las preferencias del usuario o las condiciones de ancho de banda.

Para comprender cómo funcionan los descriptores, recuerde que un píxel de dispositivo representa cada CSS de píxeles. Entonces 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 el CodePen a continuación, pero necesitará usar diferentes dispositivos (o usar un instrumento que los imita) para ver la diferencia. Al usar el elemento , las características que discutimos para incorporar imágenes receptivas. Supongo Siempre muestro la misma imagen, pero a diferentes dimensiones y resoluciones. Y aunque uso 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 es una característica HTML que le permite proporcionar versiones alternativas de una imagen basada en la presencia de características de medios específicas. Esto también le permite cambiar las imágenes cuando el usuario cambia el tamaño de la ventana de visualización y, en esencia, le permite hacer la dirección artística con sus imágenes, mostrando variedades de la misma escena, pero cortada o ampliada según el tamaño del dispositivo. Por ejemplo, una foto ancha con un objeto pequeño en el medio sería adecuado para un dispositivo más grande en un escritorio o tableta, pero un dispositivo más pequeño, como un teléfono inteligente, podría cargar la misma imagen cortada o ampliada. Aquí hay un ejemplo de un código que me permitirá hacer una dirección artística en mi imagen:
< Code Language: HTML, XML (XML)
Observe lo siguiente sobre el código:
El elemento acepta más elementos como niños
Cada uno de los elementos dentro de utiliza el atributo de medios para definir la condición de los medios que desencadena el uso de esa imagen de origen
El elemento acepta el estándar & lt; img & gt; Elemento cuando era niño, que el navegador reconoce como una alternativa si no acepta
No hay atributos directos en el elemento ( solo acepta los 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 tema de la imagen se amplía más a medida que la ventana del navegador se vuelve más pequeña. Esta es una manera fácil de hacer imágenes receptivas y orientadas al arte que se ven adecuadamente en cualquier dispositivo utilizado. Por supuesto, esto requiere un poco más de trabajo, pero vale la pena si desea que sus imágenes tengan sentido en cualquier dispositivo utilizado.
Herramientas y servicios para ayudar con las imágenes receptivas Hay innumerables herramientas disponibles, tanto gratuitas como comerciales, que ayudarán a implementar imágenes receptivas. Y algunos de estos lo ayudarán a evitar tener que escribir gran parte del código que discutimos. Aquí hay algunos útiles: generador de puntos de interrupción de imágenes receptivos: herramientas en línea para generar fácilmente las dimensiones de imagen de actualización óptimas.
Imágenes Responsiver-un módulo de nodo que transforma la sintaxis simple de las imágenes HTML en mejores imágenes receptivas.
El complemento Gatsby-Plugin-IMage-A Gatsby que se ocupa de las partes pesadas de la producción de imágenes en varias dimensiones y se formó.
Lazysizes: una herramienta de carga rápida, sin choque, sin SEO (que incluye imágenes receptivas, imagen/srcset), marcos de iframe y muchos más.
Wurfl.js-javaScript que detecta modelos de dispositivos de teléfonos inteligentes, tabletas, televisores inteligentes y consolas de juegos que acceden a su sitio.
Picturefill: un proyecto antiguo que le permite usar el elemento en los navegadores más antiguos. Recomendaría evitar esta herramienta, porque probablemente aumentará su código en los navegadores que ya son lentos al principio. Las técnicas de respaldo adecuadas o el enfoque basado en dispositivos móviles probablemente sean mejores.
Importante y conveniente, varios servicios diferentes pueden hacer imágenes receptivas automáticamente, ofreciendo funciones como diferentes tamaños de imagen, una API para generar imágenes sobre la marcha y muchas más. Incluso la propia WordPress viene con soporte construido para imágenes receptivas (comenzando con la versión 4.4). Otra herramienta/servicio que merece ser analizado es Optimole. Es una herramienta avanzada de optimización y entrega de imágenes, creada por el equipo detrás de Temois. No solo reducirá el tamaño de las imágenes del disco. Sin sufrir la calidad visual, sino que también se ocupará de la entrega de las imágenes de los visitantes a su sitio a través de una imagen CDN. Uno de los aspectos de esta función de entrega de imágenes es que sus imágenes también se optimizarán para ver en diferentes dispositivos. Hay una versión Optimole gratuita disponible. Permite hasta 5,000 visitas mensuales al sitio y le dará todas las funciones de escala automática, CDN y muchas más. ¿Cuál es su experiencia con imágenes receptivas en los sitios web? Háganos saber en los comentarios a continuación. Cómo hacer imágenes #Sponsive con #CSS y #HTML (con ejemplos prácticos) ️
Haga clic en Tweet
… Recuerde unirse a nuestro curso rápido para acelerar su sitio de WordPress. Con algunos remedios simples, puede reducir el tiempo de carga incluso en 50-80%:
Apariencia y presentación de Chris Fitzgerald y Karol K.