Cómo obtener las cargas de imágenes del navegador más rápidas

El uso del elemento de imagen permite que el navegador seleccione una sola imagen óptima para descargar y mostrar de una lista que puede estar compuesta por diferentes tipos y tamaños de archivos. El amplio soporte disponible para el elemento de imagen nos permite construir fácilmente páginas de visualización de imágenes sensibles e independientes del navegador.

El ejemplo específico que se presenta aquí es un cómic web que tiene bastantes imágenes. El ejemplo utiliza el elemento de imagen para proporcionar una selección entre tres tipos de archivos populares, que son los formatos de imagen AVIF , WEBP y JPG . Cada uno de estos tipos de archivos se presenta en un rango de cinco dimensiones, lo que le da al navegador una opción entre quince imágenes separadas. El navegador seleccionará la primera entrada en la lista de imágenes que satisfaga sus determinaciones de aceptabilidad.

Esta pantalla muestra el código del elemento de imagen <imagen> para una de las imágenes de ejemplo de demostración. En nuestra demostración, cada elemento de la imagen va seguido de un separador de línea en blanco, como se muestra aquí.

Dentro del elemento de imagen hay una lista de elementos de origen , cada uno de los cuales refleja una posible elección de una imagen para que el navegador seleccione. El elemento fuente es un elemento vacío , lo que quiere decir que no tiene una etiqueta de cierre, no hay una etiqueta </source>. En cambio, el elemento fuente actúa más para proporcionar un enlace a un recurso identificado por el contenido del atributo srcset , un nombre de archivo de imagen.

En nuestro ejemplo, cada elemento fuente también tiene dos atributos adicionales. Un atributo está etiquetado como medios y su contenido representa una consulta de medios para las dimensiones de la ventana gráfica más adecuadas para la imagen especificada de srcset . El segundo atributo está etiquetado como tipo y su contenido representa el tipo MIME de la imagen srcset . Si un navegador no es compatible con un tipo MIME en particular, se ignorará ese elemento de origen . Por ejemplo, en este momento, el navegador Microsoft Edge no es compatible con el tipo MIME AVIF y ese navegador simplemente ignora las opciones de archivos AVIF.

La última entrada en el contenido del elemento de imagen es un elemento img designado nominalmente como un elemento alternativo si ninguna de las imágenes de origen enumeradas es aceptable. Además del puntero del atributo src al archivo de imagen, este elemento img tiene un atributo alt para texto alternativo para la imagen y un atributo tabindex que permite al usuario navegar fácilmente entre las imágenes usando la tecla TAB .

En cuanto a los números mágicos que se eligieron para los tamaños, inicialmente hice 3 tamaños de imagen para los puntos de corte de ancho. Eso funcionó lo suficientemente bien como para provocar la adición de dos tamaños de srcset más y un reajuste de los puntos de interrupción y los tamaños para obtener más granularidad. Estos valores se basan en las opciones de punto de interrupción de Bootstrap.

• nombres de puntos de interrupción X- Pequeño Pequeño Mediano Grande X- Grande XX- Grande
• puntos de corte <576px ≥576px ≥768px ≥992px ≥1200px ≥1400px
• contenedor 100% 540px 720px 960px 1140px 1320px
• tamaños de imagen 576px 768px 992px 1200px 1400px

Pero la pantalla de depuración de Chrome del HTML cargado muestra algunas diferencias entre el código fuente del elemento img que se muestra arriba y lo que obtiene el navegador que se muestra aquí.

Cuando el navegador escanea la lista de fuentes y selecciona la que mejor le parezca, asignará ese valor de srcset a la variable this.currentSrc como se muestra en esta captura de depuración.

Tenga en cuenta que esta imagen es la que el navegador eligió de la lista ofrecida, es la que el navegador considera mejor. Dado que la imagen tiene una dimensión fija para cubrir un rango de tamaños de ventana gráfica, es probable que la imagen no se ajuste perfectamente y algunos ajustes podrían ser beneficiosos. La demostración de ejemplo utiliza JavaScript para escalar la imagen elegida por el navegador a las dimensiones de la ventana gráfica y estos valores, es decir, las dimensiones de la imagen escaladas a las dimensiones de la ventana gráfica, se guardan como se muestra aquí. Hay algunos otros usos que obtenemos de JavaScript

En esta computadora de escritorio, el depurador de Chrome dice el cómic de demostración, 42 imágenes, consume 2,5 MB de recursos con 56 solicitudes y 2,1 MB transferidos, y finaliza en 1,22 s. Puedes ver el cómic de demostración en Hyenas2 . Esté atento a mis repositorios de GitHub para obtener una gota del código base de la aplicación que generó el cómic. Y puedes encontrar más cómics en mi página de cómics .

Como siempre se aceptan comentarios, críticas y sugerencias.