La especificación de imagen receptiva es un documento fantástico que describe muchos usos para tales imágenes. Pero la experiencia me dice que la mayoría de las veces, cuando se trabaja con ellos, solo necesita saber cómo dar al cliente copias de la misma imagen de diferentes tamaños, eligiéndolas según el ancho del área de visualización de la página. A esto lo llamamos "cambio de resolución". Para resolver este problema, puede usar los atributos srcsety sizes.La salida de imágenes receptivas implica el uso de una lógica bastante compleja. Esto, entre otras cosas, incluye determinar qué imagen se mostrará, así como determinar si el usuario está trabajando con una pantalla de alta resolución. Afortunadamente, los navegadores son mejores que las personas que pueden determinar qué imágenes son las más adecuadas para cada usuario en particular. Todo lo que tenemos que hacer es darles algunas pistas. El atributo srcsetle da al navegador una lista de recursos gráficos de los cuales puede seleccionar la imagen más adecuada. El atributo le sizespermite decirle al navegador qué tamaño de imagen desea mostrar en un caso particular.
Y, por cierto, al usar imágenes receptivas no tiene que preocuparse por el soporte del navegador para esta tecnología. Los atributos que nos interesan disfrutan de una excelente compatibilidad con el navegador. Y además, tenemos a nuestra disposición un mecanismo de respaldo diseñado para navegadores antiguos como IE11.Cómo se "comunica" la etiqueta con el navegador
Así es como la etiqueta <img>le dice al navegador qué imagen seleccionar."Hablar" de la etiqueta y el navegadorAquí la etiqueta<img>le dice al navegador lo siguiente: "Con este tamaño de pantalla, se mostrará aproximadamente en el siguiente tamaño (indica un atributosizes). Puede tomar cualquiera de estas imágenes que tengan el siguiente ancho (indica un atributosrcset). Por lo tanto, elija la imagen que ahora sea más adecuada ".Atributo Srcset
El atributo srcsetproporciona al navegador un conjunto de recursos gráficos entre los que puede elegir el más adecuado. También contiene información sobre el tamaño de cada una de las imágenes propuestas.Atributo Srcset Este atributosrccontiene una imagen alternativa para navegadores que no entienden el atributosrcset. LasrcsetURL contiene imágenes e información sobre su ancho. Del conjunto de imágenes que se le proporcionan, el navegador elegirá lo que mejor se adapte. Además, si el usuario tiene una pantalla con una alta densidad de píxeles (pantalla Retina), el navegador tendrá esto en cuenta al elegir una imagen.El atributosrcsetcontiene una lista de URL de imágenes seguidas de información de ancho de imagen. Los pares estánURL-separados por comas. Elementos de la lista siguiente aspecto:image.jpg 1000w. Tal registro le dice al navegador que la imagenimage.jpgtiene 1000 píxeles de ancho.Al describir el conjunto de imágenes de esta manera, le decimos al navegador lo siguiente: "Le doy una lista de imágenes y confío en que elija la más adecuada".El navegador seleccionará la mejor imagen, guiado por un conjunto complejo de criterios, que incluyen qué imagen muestra el usuario, cuál es el tamaño actual del área de visualización y si el usuario tiene una pantalla de alta resolución.El navegador es lo suficientemente inteligente como para saber que en una pantalla de escritorio de baja resolución, si el ancho de la imagen de salida es de 800 píxeles, debe seleccionar la imagen de la lista con un ancho de al menos 800 píxeles.El navegador, además, sabe que si una imagen con un ancho de 320 píxeles se muestra en una pantalla de alta resolución, debe seleccionar un archivo de imagen que tenga al menos 640 píxeles de ancho. Como resultado, no debemos preocuparnos por los recursos gráficos 1x y 2x. Todo lo que necesita hacer es darle al navegador un buen conjunto de imágenes y dejar que haga su trabajo.¿Cómo describir imágenes adecuadas para diferentes pantallas?Atributo de tamaños
El atributo srcsetes una gran herramienta. Pero cuando el navegador lee el código HTML de la página, no sabe si, por ejemplo, se usa el estilo CSS, que establece el tamaño de la imagen al 50% del ancho de la pantalla. Aquí es donde entra en juego el atributo sizes. Con él, podemos darle al navegador una pista sobre el tamaño de la imagen que se mostrará después de aplicarle CSS.Atributo de tamaños100vw- el tamaño predeterminado cuando no se cumple ninguna de las condiciones. Se indica en último lugar en la lista que está en el atributo sizes.1023px - ancho de la ventana.780px - ancho de imagen cuando se cumple la condición especificada.
El navegador se detendrá en la primera condición cumplida.El atributo sizescontiene una lista de condiciones de medios, separadas por comas. Las condiciones de medios son un subconjunto de consultas de medios. Aquí no puede especificar el tipo de entorno al que se aplica la condición ( printo screen), pero puede utilizar consultas de medios relacionadas con el ancho del área de visualización.Cada entrada de la lista contiene el ancho de la ventana de la vista y el ancho de la imagen correspondiente. El elemento de la lista tiene la forma (min-width: 1023px) 780px. Tal registro le dice al navegador que si el ancho de la ventana gráfica es de 1023 píxeles (o más), entonces debe usar una imagen con un ancho de 780 píxeles.Aquí, además, se pueden usar unidades de ancho relativo. Por ejemplo, algo como50vw. Esto le dice al navegador que el ancho de la imagen será el 50% del ancho de la ventana gráfica. Aquí, en situaciones más complejas, incluso puede usar la función calc. Por ejemplo, el diseño de la vista calc(50vw — 2rem)le dice al navegador que el ancho de la imagen será el 50% del ancho de la ventana gráfica menos 2rem. Quizás el ancho se establece de esta manera para tener en cuenta el ancho de alguna sangría o algún borde.El último elemento de la lista no cuenta con una condición de medios. Si agrega un ancho a la lista y no especifica una condición de medios, el valor correspondiente se considerará como el valor predeterminado, es decir, en caso de que no se cumpla ninguna de las otras condiciones.El navegador mirará esta lista de arriba a abajo y se detendrá en el primer elemento adecuado correspondiente al ancho de la ventana gráfica.Suponga que lo sizessiguiente está en el atributo :(min-width: 1023px) 780px,
(min-width: 675px) 620px,
100vw
Esto es lo que sucederá en diferentes situaciones:- Si el usuario está trabajando en una pantalla de escritorio grande, entonces el navegador considerará adecuado el primer elemento de la lista y sabrá que el ancho de la imagen debe ser de 780 píxeles.
- El ancho estándar del área de visualización de una pantalla vertical de iPad es de 768 píxeles. En esta situación, el navegador omitirá la primera entrada de la lista, pero encontrará que las condiciones actuales coinciden con la segunda entrada. Le dice al navegador que la imagen tendrá 620 píxeles de ancho.
- ,
sizes. , , 100% .
Por supuesto, estos son solo ejemplos. En el mundo real, todo es mucho más complicado. Por ejemplo, un usuario con una pantalla grande que visualiza una página en una ventana de navegador estrecha recibirá una imagen más pequeña de la que tendría si la ventana se expandiera a pantalla completa. Un usuario con un iPad Pro puede obtener una imagen más grande si coloca el dispositivo en modo horizontal. Si usa la tableta en modo vertical, puede obtener una imagen de tamaño mediano. Y si usa el navegador en el modo cuando la pantalla se divide entre varias ventanas, entonces puede obtener una imagen pequeña. Algunos teléfonos con pantallas grandes cumplirán con la segunda regla de nuestra lista cuando trabajen con ellos en modo horizontal. Este es el encanto del sistema descrito:el desarrollador no necesita ocuparse de todos estos casos especiales y los diferentes factores de forma de los dispositivos. Le basta con decirle al navegador qué versión de la imagen elegir para un área de visualización específica.¿Cómo preparar una lista de imágenes de las cuales el navegador elegirá la más adecuada?Atributo Src
Es posible que haya notado que el atributo todavía se usa en todos los ejemplos anteriores src. Tal vez se pregunte si este atributo es necesario dado el atributo srcset. El punto aquí es que si le damos al navegador un atributo srcset, entonces si es un navegador moderno, reemplazará el valor srcen el DOM con el valor correspondiente a la imagen seleccionada srcset. Como resultado, resulta que los navegadores modernos ignoran el atributo srcy se centran en el atributo srcset.Pero el atributo src, en sí mismo, sigue siendo importante para los navegadores que no admiten trabajar con imágenes receptivas. Dichos navegadores, bastante antiguos, ignoran los atributos srcsety sizes. Simplemente no saben sobre su existencia. Pero atributosrcentienden, por lo que puede escribir la dirección de la imagen en ella, lo que servirá como una opción de respaldo para dichos navegadores. Normalmente escribo en este atributo la dirección de la imagen más pequeña que se ve bien en los monitores de escritorio que no tienen una alta densidad de píxeles.Preguntas y respuestas
▍ ¿Cómo generar conjuntos de imágenes?
Las imágenes se pueden generar de varias maneras: manualmente, usando la herramienta para crear imágenes receptivas, usando las capacidades apropiadas de CDN.Para crear imágenes manualmente, debe abrir la imagen original en Photoshop (o en otro editor que utilice) y exportarla en todos los tamaños necesarios.Esto puede requerir mucho tiempo, por lo que es posible que desee automatizar este trabajo utilizando la herramienta adecuada. Entre estas herramientas, me gusta más el Generador de puntos de interrupción de imagen receptiva .de Cloudinary. Cuando trabaje con esta herramienta, simplemente transfiérale la imagen, después de lo cual creará automáticamente sus variantes de diferentes tamaños. Aquí puede ajustar la cantidad de imágenes generadas. Una vez que las imágenes están listas, se pueden descargar y usar en el proyecto.Otra opción para admitir imágenes receptivas es usar el CDN apropiado para alojarlas. Por ejemplo: Cloudinary o imgix. Usando un servicio similar, la imagen en la resolución más alta disponible se descarga a la CDN. Luego puede solicitar versiones de la imagen en diferentes tamaños utilizando los parámetros de URL. En este caso, no tiene que preocuparse por cambiar el tamaño de la imagen: solo informe al CDN sobre el tamaño en el que va a mostrar la imagen correspondiente.Aquí hay una lista de servicios y proyectos que puede usar para crear variaciones de imágenes de diferentes tamaños.▍¿Qué tamaños debo proporcionar al navegador?
¡Buena pregunta! Si le da al navegador demasiados recursos gráficos, simplemente perderá su tiempo y esfuerzo al crearlos. Si hay muy pocos recursos, esto significará que está obligando a los usuarios de su sitio a descargar imágenes que son más grandes de lo que necesitan.Si trabaja con una sola imagen y tiene la oportunidad de personalizar el diseño para la salida de esta imagen, puede usar la herramienta Generador de puntos de interrupción de imagen receptiva. Examinará automáticamente la imagen y decidirá cuál es el conjunto óptimo de recursos (en términos de equilibrio entre tamaños de archivo y resolución) generados a partir de esta imagen. Entonces esta herramienta no solo generará archivos, sino que también preparará automáticamente srcsety atributos sizes.Un conjunto estándar de tamaños de imagen con un ancho de 320 a 2560 píxelesSi está trabajando en un determinado CMS, o si está creando una aplicación web, y no sabe qué tamaño de imagen se mostrará en un lugar u otro, entonces le recomiendo usar el conjunto estándar de tamaños imágenes Anteriormente, he utilizado las siguientes dimensiones:320w,640w,960w,1280w,1920wy2560w. Estos son números redondos obtenidos al multiplicar 320 por diferentes coeficientes. Este conjunto de recursos cubre las necesidades de una amplia variedad de pantallas, desde pequeñas pantallas móviles hasta enormes monitores de escritorio.Sin embargo, usar un conjunto estándar de recursos siempre es menos efectivo que usar su propio conjunto, teniendo en cuenta las características del proyecto. En este caso, aunque vemos una secuencia bastante lógica, muestra un aumento progresivo en el tamaño de los archivos, ya que si el ancho (y, en consecuencia, la altura) de una imagen se duplica, entonces el número de píxeles en esta imagen se cuadruplica . Como resultado, si tiene que usar un conjunto estándar de tamaños de imagen, es posible que deba elegir un conjunto que tenga menos opciones para imágenes de tamaños pequeños y más opciones para tamaños grandes.Si aloja imágenes en Cloudinary, habrá otro enfoque disponible para usted. Es para usarCloudinary API , que le permite procesar imágenes usando Responsive Image Breakpoints Generator cuando se descargan. Después de que las imágenes se procesen automáticamente, puede llenar dinámicamente los atributos srcsety utilizando la respuesta API sizes.▍ ¿Qué valores se deben ingresar en el atributo de tamaños?
Para determinar qué valores deben ingresarse en el atributo sizes, debe analizar el CSS y comprender qué ancho de imagen se muestra en diferentes condiciones.A veces esto está determinado por el ancho de la imagen en sí:img {
width 320px;
}
@media screen and (min-width: 37.5em) {
width: 640px;
}
En este caso, hay dos opciones de tamaño de imagen fijo. Este hecho puede reflejarse directamente en el atributo sizes:<img
alt="Ferrari"
src="ferrari.jpg"
srcset="ferrari-s.jpg 320w,
ferrari-m.jpg 960w,
ferrari-l.jpg 1920w"
sizes="(min-width: 37.5em) 640px, 320px">
Sin embargo, a menudo resulta que los tamaños de imagen son flexibles. A menudo, las imágenes heredan tamaños de sus contenedores:img {
height: auto;
width: 100%;
}
.container {
padding: 1rem;
width: 100%;
}
@media screen and (min-width: 37.5em) {
.container {
width: 50%;
}
}
En este ejemplo (suponiendo que el único elemento que afecta el ancho de la imagen es .container), el ancho del contenedor puede considerarse el ancho de la imagen. Aquí vale la pena prestar atención al hecho de que el ancho de la sangría interna se resta del ancho del contenedor. Es posible que deba considerar esto, tal vez no. Todo depende de cuánto afecta la sangría al ancho final de la imagen.<img
alt="Ferrari"
src="ferrari.jpg"
srcset="ferrari-s.jpg 320w,
ferrari-m.jpg 960w,
ferrari-l.jpg 1920w"
sizes="(min-width: 37.5em) calc(50vw - 2rem),
calc(100vw - 2rem)">
Como puede ver, establecer un atributo sizesdepende en gran medida del diseño particular. Por lo general, construyo trabajo, comenzando por explorar imágenes en las herramientas de desarrollo del navegador y descubriendo qué opciones afectan el tamaño de la imagen.▍ ¿Cómo verificar la configuración correcta para imágenes receptivas?
Es fácil imaginar que probar las configuraciones correctas para imágenes receptivas puede ser difícil y llevar mucho tiempo. Pero, para nuestra felicidad, existe una herramienta que simplifica la solución de tales problemas. Este es un Linter de imagen receptivo .Este es un bookmarklet que se puede agregar al navegador y usar en su propio sitio. Cuando se llama, escanea automáticamente la página, utilizando varios tamaños del área de visualización y la densidad de píxeles de la pantalla para probar las imágenes.Luego, muestra un informe que contiene información sobre todas las imágenes de la página y si la gestión de sus tamaños está organizada correctamente. Si algo sale mal al probar la página, se le informará al respecto e incluso se le dará consejos sobre cómo solucionar el problema.Resumen
Como puede ver, la combinación de atributos srcsety sizesofrece una gran oportunidad. Al establecer estos dos atributos, le informa al navegador sobre el ancho de las imágenes que desea usar para un cierto ancho del área de visualización, y le da una lista de recursos gráficos de los cuales el navegador selecciona el que considera más adecuado.Si necesita resolver problemas más complejos cuando trabaja con imágenes, tenga en cuenta que existen herramientas para resolver tales problemas. Digamos que esto es algo como usar formatos gráficos modernos como WebP , o enviar diferentes imágenes al cliente, dependiendo del tamaño de la pantalla. Si desea profundizar en el trabajo con imágenes receptivas, eche un vistazo a este material.¡Queridos lectores! ¿Utiliza imágenes receptivas en sus proyectos?