Cet article me donne l'occasion de discuter de deux de mes choses préférées: les images responsives. y précharge. En tant que personne très impliquée dans le développement des deux fonctionnalités, je suis tellement excitée de les voir travailler ensemble!
Présentation de l'imagerie réactive
Suponga que está navegando por la web en una pantalla de 300 píxeles de ancho y la página solicita una imagen de 1500 píxeles de ancho. Esa página simplemente desperdició muchos de sus datos celulares porque su pantalla no puede hacer nada con toda esa resolución adicional. Idealmente, el le navigateurUn navegador (además: browser) es una herramienta informática que te permite ver documentos y datos y navegar por la red. Los navegadores pueden mostrar distintos tipos de recursos de información; principalmente documentos HTML, a pesar de todo, además son posibles otros tipos de archivos y contenido multimedia, como PDF, JPEG, MPEG, GIF o el lenguaje de meta marcado. A través el uso de complementos especiales y la configuración respectivo, los Suite debería obtener una versión de la imagen que sea solo una petit más ancho que el tamaño de su pantalla, digamos 325 píxeles. Esto asegura una imagen de alta resolución sin desperdiciar datos. Y, lo que es mejor, la imagen se cargará más rápido. Las imágenes receptivas permiten a los navigateursConcepto de Navegadores¿Qué son los Navegadores?Los Navegadores son herramientas informáticas que utilizamos para, normalmente, navegar por Internet y visitar cualquier página web, al mismo tiempo de para hacer otras tareas como ver documentos, observar vídeos o reproducir contenido multimedia de cualquier tipo. Son un tipo de software sencillamente usual y bastante utilizado hoy en día.Insistimos en que es algo que se utiliza con mucha frecuencia, puesto que moverse por Internet Suite buscar diferentes recursos de imágenes en diferentes dispositivos. Si no utiliza una CDN de imagen, debe guardar varias dimensiones para cada imagen y especificarlas en el srcset attributAtributo es una definición que se usa en varios campos de IT. Generalmente, un atributo se usa para describir un fichero o un campo de datos con más detalle. En la programación orientada a objetos, los atributos son una propiedad o característica que se puede asignar a un objeto (elemento). A través el uso de atributos se pueden asignar valores específicos a ciertos items. Áreas de aplicación Las tres áreas Suite. los w value indique au navigateur la largeur de chaque version. En fonction de l'appareil, le navigateur peut choisir celui qui convient:
<img src="small.jpg" srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w" alt="…">
Aperçu de la précharge
La precarga le permite informar al navegador sobre los recursos críticos que desea cargar lo antes posible, antes de que se detecten en HTMLHTML (Hypertext Markup Language) se usa para estructurar el contenido de texto de un documento web. No sólo se marca el contenido, sino además la meta-información que describe este contenido. Las páginas HTML se almacenan normalmente en el directorio raíz del servidor. Cómo se creó En la era digital, a los usuarios les resulta difícil hallar su camino en las webs y hacer un seguimiento de las estructuras de las Suite. Esto es especialmente útil para recursos que no se pueden descubrir fácilmente, como fuentes incluidas en hojas de estilo, imágenes de fondo o recursos cargados desde un script.
<relier rel="précharge" as="image" href="important.png">
Images réactives + préchargement = téléchargements d'images plus rapides
Les images responsives et le préchargement étaient disponibles depuis quelques années, mais en même temps quelque chose manquait: il n'y avait aucun moyen de précharger les images responsives. À partir de Chrome 73, le navigateur peut précharger la bonne variante des images responsives spécifiées dans srcset avant de découvrir le img hashtag!
Dependiendo de la estructura de su sitio, ¡eso podría significar una visualización de imágenes significativamente más rápida! Realizamos pruebas en un sitio que utiliza JavascriptJavaScript es un lenguaje de programación que funciona en el lado del cliente y con el que las webs pueden ser más funcionales. Incorporación en código HTML El código JavaScript puede ser incrustado en las páginas HTML, para que adquieran funcionalidad. Existen varias opciones. Puede estar entre las etiquetas <SCRIPT> y </SCRIPT>, puede estar contenido en un archivo externo, puede ser un parámetro de las etiquetas HTML, y puede estar Suite para cargar imágenes adaptables de forma diferida. La precarga dio como resultado que las imágenes se cargaran 1,2 segundos más rápido.
imagesrcset y taille d'image
Pour précharger les images responsives, de nouveaux attributs ont été récemment ajoutés à la élément: imagesrcset y taille d'image. Ils sont utilisés avec et correspond au srcset y les tailles syntaxe utilisée dans <img> élément.
Par exemple, si vous souhaitez précharger une image responsive spécifiée avec:
<img src="wolf.jpg" srcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w" les tailles="50vw" alt="A rad wolf">
Vous pouvez le faire en ajoutant ce qui suit à votre HTML :
<relier rel="précharge" as="image" href="wolf.jpg" imagesrcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w" taille d'image="50vw">
Cela démarre une demande en utilisant la même logique de sélection de ressources que srcset y les tailles s'appliquera.
Cas d'utilisation
Précharge d'image réactive injectée dynamiquement
Disons que vous chargez dynamiquement des images héroïques dans le cadre d'un diaporama et que vous savez quelle image s'affichera en premier. Dans ce cas, vous voudrez probablement éviter d'attendre le script avant de charger l'image en question, car cela retarderait le moment où les utilisateurs peuvent la voir.
Vous pouvez inspecter ce problème sur un site Web avec une galerie d'images chargée dynamiquement:
- Ouvert cet exemple de site Web dans un nouvel onglet.
- presse
Ctrl + Maj + J(ou alorsCommande + Option + Jsur Mac) pour ouvrir DevTools. - Clique sur le Rapporter langue.
- Dans le Constriction liste déroulante, sélectionnez 3G rapide.
- Éteins le Desactivar el cacheUn caché es un tipo de memoria auxiliar de la que se puede recuperar a alta velocidad con una capacidad de almacenamiento relativamente pequeña. Se encuentra entre la unidad central de procesamiento (CPU) y la memoria principal. Ayuda a evitar el acceso al disco duro o los recálculos complejos almacenando temporalmente ciertos datos y haciéndolos disponibles rápidamente cuando sea necesario. El caché almacena una copia de la petición actual y Suite boîte.
- Recharge la page.
Utilisant précharge Cela aide ici car l'image commence à se charger tôt et est probablement déjà là lorsque le navigateur a besoin de l'afficher.
Pour voir la différence que fait le préchargement, vous pouvez inspecter la même galerie d'images chargée dynamiquement mais avec la première image préchargée en suivant les étapes du premier exemple.
Une autre façon d'éviter le problème serait d'utiliser un carrousel basé sur la marque et d'avoir le préchargeur de navigateur collecter les ressources nécessaires. Cependant, cette approche n'est pas toujours pratique. (Par exemple, si vous réutilisez un composant existant, qui n'est pas basé sur la marque.)
Préchargement des images d'arrière-plan avec un jeu d'images
Si tiene diferentes imágenes de fondo para diferentes densidades de pantalla, puede especificarlas en su CSSConcepto de CSS¿Qué es el CSS?CSS es un lenguaje de programación que se usa para definir el estilo y el aspecto de un documento que se ha escrito mediante de un lenguaje de etiquetas, como HTML. Conocido además como hojas de estilo en cascada, es el que se emplea para dar colores, indicar tipos de letra o inclusive resaltar aspectos como el espacio entre items para dotar de estilo a Suite avec lui série d'images syntaxe. Le navigateur peut alors choisir celui à afficher en fonction du DPR.
background-image: série d'images( "cat.png" 1x, "cat-2x.png" 2x);
La syntaxe ci-dessus ignore le fait que les préfixes de fournisseur sont requis pour cette fonctionnalité dans les navigateurs basés sur Chromium et WebKit. Si vous prévoyez d'utiliser cette fonctionnalité, vous devriez envisager d'utiliser Autoprefixer pour y remédier automatiquement.
Le problème avec les images d'arrière-plan CSS est que le navigateur ne les découvre qu'après avoir téléchargé et traité tout le CSS de la page. , qui peut être beaucoup de CSS ...
Vous pouvez inspecter ce problème sur un exemple de site Web avec image de fond réactive.
Le préchargement d'images réactif offre un moyen simple et sans piratage de charger ces images plus rapidement.
<relier rel=précharge href=cat.png as=image imagesrcset="cat.png 1x, cat-2x.png 2x">
Vous pouvez inspecter le comportement de l'exemple ci-dessus avec Image d'arrière-plan personnalisable préchargée.
Préchargement d'images réactif en action
Le préchargement de vos images responsives peut les accélérer en théorie, mais que faites-vous en pratique?
Pour répondre, j'ai créé deux copies d'un Boutique de démonstration PWA: celui qui ne précharge pas les imagesy celui qui précharge certains d'entre eux. Étant donné que le site charge paresseusement des images avec JavaScript, il bénéficiera probablement du préchargement de celles qui seront dans la fenêtre initiale.
Cela m'a donné les résultats suivants pour pas de précharge et pour précharge d'image. En regardant les nombres bruts, nous voyons que Start Render est resté le même, l'indice de vitesse s'est légèrement amélioré (273 ms, car les images arrivent plus rapidement, mais elles n'occupent pas une grande partie de la zone de pixels), mais la métrique réelle qui capture la différence est la Dernier héros peint métrique, qui s'est améliorée de 1,2 seconde. 🎉🎉
Bien sûr, rien ne capture la différence visuelle comme une comparaison de pellicule:
Précharge et
Si vous connaissez les images réceptives, vous vous demandez peut-être
El Web PerformanceEn el caso de las webs, el término Performance o rendimiento, se refiere a la velocidad de carga o a la potencia de cálculo de un servidor, es decir, a la velocidad a la que se transmiten los datos del servidor al cliente. Razones para una buena performance Una web que se carga lentamente, puede animar a los clientes potenciales a abandonar la página. Para asegurar una interacción fluida, se tiene Suite Working Group está hablando de agregar un equivalente de precarga para srcset y les tailles, mais pas le
Pourquoi ce cas d'utilisation est-il "négligé"?
Bien qu'il y ait un intérêt à résoudre ce cas d'utilisation également, il existe encore un certain nombre de problèmes techniques à résoudre ce qui signifie qu'une solution ici aurait une complexité considérable. En plus de cela, il semble que pour la plupart, le cas d'utilisation puisse être traité aujourd'hui, même si de manière piratée (voir ci-dessous).
Compte tenu de cela, Web Performance WG a décidé d'envoyer srcset d'abord et voir si la demande d'équivalent photo le soutien se fait sentir.
Si vous êtes en condition de pré-charge
Compte tenu du scénario suivant:
<photo>
<source src="small_cat.jpg" moitié="(max-width: 400px)">
<source src="medium_cat.jpg" moitié="(max-width: 800px)">
<img src="huge_cat.jpg">
</photo>
Les moitié attributs de la
Étant donné que le préchargement réceptif n'a pas de notion d '"ordre" ou de "première correspondance", les points d'arrêt doivent être traduits en quelque chose comme:
<relier rel="précharge" href="small_cat.jpg" as="image" moitié="(max-width: 400px)">
<relier rel="précharge" href="medium_cat.jpg" as="image" moitié="(min-width: 400.1px) and (max-width: 800px)">
<relier rel="précharge" href="large_cat.jpg" as="image" moitié="(min-width: 800.1px)">
résumé
Le préchargement d'images réactif nous offre de nouvelles possibilités intéressantes pour précharger des images réactives d'une manière qui n'était auparavant possible que par le biais de hacks. C'est un nouvel ajout important à la boîte à outils du développeur soucieux de la vitesse et nous permet de nous assurer que les images importantes que nous voulons montrer à nos utilisateurs le plus tôt possible seront là quand nous en aurons besoin.
