Post Top Ad

Your Ad Spot

martes, 21 de abril de 2020

Imágenes responsivas: servir imágenes escaladas

Técnicas de imagen sensibles, como el srcsetsizesmediaatributos HTML, permiten diferentes imágenes a escala que se entregarán en función del tamaño y la resolución del dispositivo de acceso a. Esto le permite optimizar aún más la entrega de su imagen para mejorar el rendimiento general de su sitio web o aplicación.
En lugar de tomar una sola imagen y solo hacer que responda con CSS, que luego se entrega a todos los dispositivos, puede entregar imágenes completamente diferentes según el dispositivo solicitante. Esto es ventajoso debido a las importantes mejoras de rendimiento que se pueden obtener. Como recordará de nuestro artículo de Image CDN , las imágenes ocupan el 51% del tamaño promedio de la página web, lo que significa que servir imágenes escaladas es fundamental para reducir el tamaño de su página web.

¿Cuáles son los srcsetsizesmediaatributos?# #

Los srcsetsizesmediaatributos permiten al <img><source>elementos para extenderse al ofrecer la información adicional navegador, tales como diferentes fuentes de imagen, así como diferentes tamaños de pantalla y las condiciones del medio. Esto ofrece a los navegadores la capacidad de mostrar una imagen específica cuando se cumple una regla.
El srcsetatributo permite definir las fuentes de imagen. Esto se puede hacer mediante la definición de la ruta absoluta o relativa a las imágenes y, opcionalmente, los descriptores de densidad de píxeles (por ejemplo 1x2x, y 3x). Este atributo se puede usar en los elementos <img><source>.
Tanto el sizesmediaatributos son casi idénticos. Ambos permiten definir diferentes tamaños de pantalla a través de diversas condiciones de medios. Sin embargo, el sizesatributo permite que un tamaño de imagen se defina solo o en relación con una condición de medios. El sizesatributo se puede usar en los elementos <img><source>, mientras que el mediaatributo se puede usar en el <source>elemento pero no en el <img>elemento.
En todos los casos, el <source>elemento debe ser un hijo directo del <picture>elemento.

Cómo utilizar el srcsetsizesmediaatributos#

Para cubrir los conceptos básicos, todo lo que realmente se requiere para insertar una imagen es la <img>etiqueta y el srcatributo, por ejemplo:
<img src="/img/blog/responsive-images.png">
El srcatributo le permitirá al navegador saber dónde realizar la solicitud de imagen. Si se define una ruta absoluta, como se muestra arriba, el navegador realizará una solicitud utilizando el esquema y el nombre de host del sitio web donde se coloca el elemento.
Sin embargo, es muy recomendable agregar el altatributo ya que este atributo es importante para los motores de búsqueda y los lectores de pantalla. Los atributos widthheightpueden definir el <img> srctamaño, pero esto podría conducir a una imagen más grande que el dispositivo que lo ve. Es por eso que es común ver el classatributo para diseñar la imagen, por ejemplo:
<img src="/img/blog/responsive-images.png" alt="responsive images" class="img-fluid rounded">
El problema con el uso del <img>elemento anterior es que dará como resultado que se entregue una sola imagen en todos los dispositivos. Si bien el uso de CSS para escalar la imagen para que se ajuste a todos los dispositivos hace que la imagen responda, lo que en nuestro caso se logra mediante el uso de la img-fluidclase, esto conduciría a una cantidad significativa de datos innecesarios que se entregarán. Servir una imagen sin escala reducirá el rendimiento, aumentará el tamaño general de la página y desperdiciará el ancho de banda. Aquí es donde los que responden srcsetsizesmediaatributos vienen al rescate.

srcset# #

El srcsetatributo se puede usar en los elementos <img><source>Simplemente agregamos el ancho de las imágenes después del nombre del archivo, como 730w, 610w y 350w. Sin embargo, el problema con este método es que depende únicamente del tamaño de la ventana gráfica para indicarle al navegador qué imagen cargar, por ejemplo:
<img srcset="/img/blog/responsive-images-lg.png 730w,
             /img/blog/responsive-images-md.png 610w,
             /img/blog/responsive-images-sm.png 350w"
     src="/img/blog/reponsive-images.png"
     alt="responsive images">
<picture>
    <source srcset="/img/blog/responsive-images-lg.png 730w">
    <source srcset="/img/blog/responsive-images-md.png 610w">
    <source srcset="/img/blog/responsive-images-sm.png 350w">
    <img src="/img/blog/reponsive-images.png" alt="responsive images" class="img-fluid rounded">
</picture>
Afortunadamente para nosotros, aquí es donde entran en juego los atributos sizesmedia.

sizes# #

El sizesatributo le dice al navegador exactamente qué tamaño tendrá la imagen en relación con el tamaño de la ventana gráfica en condiciones de medios, que son similares a las consultas de medios. Esto se puede usar junto con srcset, por ejemplo:
<img sizes="(min-width: 1200px) 730w,
            (max-width: 1199px) 610w,
            (max-width: 380px) 350w"
     srcset="/img/blog/responsive-images-lg.png 730w,
             /img/blog/responsive-images-md.png 610w,
             /img/blog/responsive-images-sm.png 350w"
     src="/img/blog/reponsive-images.png"
     alt="responsive images">
<picture>
    <source sizes="(min-width: 1200px) 730w" srcset="/img/blog/responsive-images-lg.png 730w">
    <source sizes="(max-width: 1199px) 610w" srcset="/img/blog/responsive-images-md.png 610w">
    <source sizes="(max-width: 380px) 350w" srcset="/img/blog/responsive-images-sm.png 350w">
    <img src="/img/blog/reponsive-images.png" alt="responsive images" class="img-fluid rounded">
</picture>
El sizesatributo es muy útil cuando se usa el <img>elemento, sin embargo, si está usando el <source>elemento, a menudo tiene más sentido usar el mediaatributo.

media# #

El mediaatributo permite definir una condición de medios. Esto se puede usar en el <source>elemento si es un hijo directo del <picture>elemento. Si la condición es verdadera <source>, se usa ese elemento, si es falso, se omite, por ejemplo:
<picture>
    <source media="(min-width: 1200px)" srcset="/img/blog/responsive-images-lg.png">
    <source media="(max-width: 1199px)" srcset="/img/blog/responsive-images-md.png">
    <source media="(max-width: 380px)" srcset="/img/blog/responsive-images-sm.png">
    <img src="/img/blog/reponsive-images.png" alt="responsive images" class="img-fluid rounded">
</picture>
Además de poder definir qué imagen se usa en función del tamaño de la ventana gráfica, también es posible definir qué imagen se usa en función de la densidad de píxeles de la pantalla.

Descriptores de densidad de píxeles#

Los descriptores de densidad de píxeles, también conocidos como descriptores de pantalla o densidad de pantalla, son una forma extremadamente útil de mostrar imágenes de alta resolución en pantallas de alta resolución. Estos descriptores se definen utilizando 1x2x3xPermiten que se muestre una imagen que sea dos o tres veces más grande que la original, conservando las mismas dimensiones que la imagen original, por ejemplo:
<img sizes="(min-width: 1200px) 730w,
            (max-width: 1199px) 610w,
            (max-width: 380px) 350w"
     srcset="/img/blog/responsive-images-lg.png 730w 1x,
             /img/blog/responsive-images-lg@2x.png 730w 2x,
             /img/blog/responsive-images-md.png 610w 1x,
             /img/blog/responsive-images-md@2x.png 610w 2x,
             /img/blog/responsive-images-sm.png 350w 1x,
             /img/blog/responsive-images-sm@2x.png 350w 2x"
     src="/img/blog/reponsive-images.png"
     alt="responsive images">
<picture>
    <source media="(min-width: 1200px)" srcset="/img/blog/responsive-images-lg.png 1x, /img/blog/responsive-images-lg@2x.png 2x">
    <source media="(max-width: 1199px)" srcset="/img/blog/responsive-images-md.png 1x, /img/blog/responsive-images-md@2x.png 2x">
    <source media="(max-width: 380px)" srcset="/img/blog/responsive-images-sm.png 1x, /img/blog/responsive-images-sm@2x.png 2x">
    <img src="/img/blog/reponsive-images.png" alt="responsive images" class="img-fluid rounded">
</picture>
El sizesmedialos atributos no son necesarios cuando se utilizan los descriptores densidad de píxeles, sin embargo, la real 2x3xla imagen necesita ser dos o tres veces más grande. Puede reducir aún más el tamaño de las imágenes escaladas utilizando el formato de imagen de próxima generación, WebP.

Formato WebP#

Por último, no nos olvidemos del formato WebP. Las imágenes con formato WebP son en promedio un 26% más pequeñas que las imágenes con formato PNG y un 25-34% más pequeñas que las imágenes con formato JPEG. Esto significa que solo convertir sus imágenes a WebP puede disminuir el tamaño de sus páginas en aproximadamente un 25%. Sin embargo, las imágenes con formato WebP no son aceptadas por todos los navegadores, que es donde el typeatributo se vuelve útil en el <source>elemento, por ejemplo:
<picture>
    <source type="image/webp" media="(min-width: 1200px)" srcset="/img/blog/responsive-images-lg.webp 1x, /img/blog/responsive-images-lg@2x.webp 2x">
    <source type="image/webp" media="(max-width: 1199px)" srcset="/img/blog/responsive-images-md.webp 1x, /img/blog/responsive-images-md@2x.webp 2x">
    <source type="image/webp" media="(max-width: 380px)" srcset="/img/blog/responsive-images-sm.webp 1x, /img/blog/responsive-images-sm@2x.webp 2x">
    <source type="image/png" media="(min-width: 1200px)" srcset="/img/blog/responsive-images-lg.png 1x, /img/blog/responsive-images-lg@2x.png 2x">
    <source type="image/png" media="(max-width: 1199px)" srcset="/img/blog/responsive-images-md.png 1x, /img/blog/responsive-images-md@2x.png 2x">
    <source type="image/png" media="(max-width: 380px)" srcset="/img/blog/responsive-images-sm.png 1x, /img/blog/responsive-images-sm@2x.png 2x">
    <img src="/img/blog/reponsive-images.png" alt="responsive images" class="img-fluid rounded">
</picture>
Como ya sabemos, <source>solo se usará si la condición es verdadera, lo que significa que en nuestro ejemplo anterior, las imágenes de WebP se usarán donde se acepten, las imágenes PNG se usarán donde las imágenes de WebP no se acepten, y si todo lo demás falla, el <img>elemento lo hará. ser usado. La clase aplicada a la imagen utilizada en el <source>elemento se extraerá del classatributo en el <img>elemento.

Soporte de navegador#

La mayoría de los navegadores web modernos son compatibles srcset , excepto Internet Explorer y Opera Mini. Sin embargo, Microsoft agregó soporte para este atributo en el navegador Edge. Si el navegador no admite este atributo, el navegador simplemente recurrirá a la imagen original. Si usa la <img>etiqueta, la imagen alternativa se define en el srcatributo. Si se usa el <picture>elemento, la imagen alternativa se define en el <img>elemento. Esto significa que realmente no hay ninguna desventaja en usar los atributos desde la perspectiva del navegador.
web browser support srcset

¿Por qué son importantes las imágenes receptivas?# #

La razón por la que las imágenes receptivas son tan importantes se reduce al tamaño de los archivos . En dispositivos más pequeños, no hay razón para descargar una imagen de 1460 x 730 píxeles. Es un desperdicio de ancho de banda y recursos. ¿Cuánto desperdicio? Podemos echar un vistazo a los tamaños de imagen que utilizamos en los ejemplos anteriores, por ejemplo:
Nombre del archivoTalla
responsive-images.jpg30,7 KB
responsive-images-lg.jpg24,1 KB
responsive-images-md.jpg19,7 KB
responsive-images-sm.jpg10,6 KB
Si un dispositivo pequeño, como un teléfono, tiene un tamaño de pantalla de 375 píxeles, la responsive-images-sm.jpgimagen a escala sería de 10,6 KB. Si comparamos eso con la responsive-images.jpgimagen original sin escala (que CSS tendría que reducir) a 30.7 KB, ¡eso es una disminución del 65.47%! Esto variará dependiendo de si se usan o no descriptores de densidad de píxeles, sin embargo, servir imágenes escaladas siempre reducirá el peso total de la página.
Con imágenes más complejas y de mayor resolución, es probable que tenga una disminución aún mayor. Además, con el tiempo esto puede ahorrar bastante ancho de banda de su proveedor de alojamiento o CDN, lo que a su vez le ahorra dinero.

Resumen#

Como puede ver, es más importante que nunca que los desarrolladores web implementen estas técnicas de imagen receptiva, ya que garantizarán tiempos de descarga más rápidos para los usuarios móviles y, con el tiempo, ahorrarán ancho de banda .
  • ETIQUETAS

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

outbrain

Páginas