El uso del   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. elemento de imagen  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   ,   y   . 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. AVIF WEBP JPG  Esta pantalla muestra el código del elemento de   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í.  imagen <imagen>  Dentro del elemento de imagen hay una lista de elementos de   , cada uno de los cuales refleja una posible elección de una imagen para que el navegador seleccione. El elemento fuente es un elemento   , 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   , un nombre de archivo de imagen. origen vacío srcset  En nuestro ejemplo, cada elemento fuente también tiene dos atributos adicionales. Un atributo está etiquetado como   y su contenido representa una consulta de medios para las dimensiones de la ventana gráfica más adecuadas para la imagen especificada de   . El segundo atributo está etiquetado como   y su contenido representa el   de la imagen   . Si un navegador no es compatible con un tipo MIME en particular, se ignorará ese elemento de   . Por ejemplo, en este momento, el navegador   no es compatible con el tipo MIME AVIF y ese navegador simplemente ignora las opciones de archivos AVIF. medios srcset tipo tipo MIME srcset origen Microsoft Edge  La última entrada en el contenido del elemento de imagen es un elemento   designado nominalmente como un elemento alternativo si ninguna de las imágenes de origen enumeradas es aceptable. Además del puntero del atributo   al archivo de imagen, este elemento img tiene un atributo   para texto alternativo para la imagen y un atributo   que permite al usuario navegar fácilmente entre las imágenes usando la tecla   . img src alt tabindex 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   como se muestra en esta captura de depuración.  this.currentSrc  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   . Esté atento a   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   . Hyenas2 mis repositorios de GitHub mi página de cómics  Como siempre se aceptan comentarios, críticas y sugerencias.

2022 - HackerNoon Contributor of the Year - Authentication

Nominated for 2022 - HackerNoon Contributor of the Year - Authentication

Developer

Este audio es producido en el idioma original de la historia!

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

About Author

COMENTARIOS

ETIQUETAS

ESTE ARTÍCULO FUE PRESENTADO EN

Related Stories

¿Quieres ganar un concurso de redacción de HackerNoon? Esto es lo que recomiendan los ganadores del concurso #crypto-api

Una guía del arquitecto para crear una arquitectura de referencia para un lago de datos de IA/ML

Cómo mejorar su flujo de trabajo 10 veces: 17 aplicaciones esenciales

Creación de productos criptográficos centrados en el usuario: la importancia de los comentarios de los clientes

¿Quieres ganar un concurso de redacción de HackerNoon? Esto es lo que recomiendan los ganadores del concurso #crypto-api

Una guía del arquitecto para crear una arquitectura de referencia para un lago de datos de IA/ML

Cómo mejorar su flujo de trabajo 10 veces: 17 aplicaciones esenciales

Creación de productos criptográficos centrados en el usuario: la importancia de los comentarios de los clientes

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps