Comment améliorer la vitesse de chargement des pages à l'aide d'images réactives
Comment Ameliorer La Vitesse De Chargement Des Pages A L Aide D Images Reactives
Lors du déploiement d'un site Web, les développeurs utilisent généralement la même image pour toutes les tailles d'écran, ce qui n'est pas une bonne pratique car on ne peut pas compter sur le navigateur pour le redimensionnement. Dans une telle situation, les images réactives entrent en vigueur, garantissant que l'image est téléchargée à la taille et à la qualité appropriées pour l'appareil correspondant, améliorant ainsi la vitesse de chargement des pages.
Comment améliorer la vitesse de chargement des pages à l'aide d'images réactives ?
Pour améliorer la vitesse de chargement des pages via des images réactives, envisagez les méthodologies suivantes :
Exemple 1 : Améliorez la vitesse de chargement des pages via des images réactives à l'aide de l'attribut « srcset »
L'approche la plus pratique pour appliquer des images réactives peut être d'utiliser le ' srcset ' attribut accumulé dans le ' ' étiqueter. Cet attribut permet au programmeur de spécifier différentes tailles d'image et le navigateur opte automatiquement pour l'image la plus adaptée à la taille de l'écran de l'utilisateur. Voici la démonstration :
DOCTYPEhtml > < HTML > < tête > < méta jeu de caractères = 'utf-8' > < méta nom = 'portée d'affichage' contenu = 'largeur=largeur de l'appareil, échelle initiale=1' > < titre > titre > tête > < corps > < img src = 'F:\ARTICLES TECHNIQUES DE TRAVAIL\imgre.png' tout = 'Image réactive' srcset = 'F:\JOB ARTICLES TECHNIQUES\imgre.png 400w, F:\JOB ARTICLES TECHNIQUES\imgre.png 800w, F:\JOB ARTICLES TECHNIQUES\imgre.png 1200w' /> corps > HTML >
Dans ce code :
Le ' srcset 'L'attribut est inclus et comprend le chemin de l'image et des largeurs différentes à chaque fois.
C'est telle que l'image ' F:\ARTICLES TECHNIQUES DE TRAVAIL\imgre.png 400w ' représente un chemin d'image ayant une largeur de ' 400 'pixels.
Sur la base de ces informations, le navigateur analyse l'image la plus appropriée à télécharger en fonction de la taille de l'écran de l'utilisateur, de sorte que les écrans plus petits affichent des images plus petites, économisant ainsi la bande passante.
Sortir
Exemple 2 : Améliorez la vitesse de chargement des pages via des images réactives en spécifiant différentes densités de pixels
Dans cet exemple, le chemin de l'image sera spécifié ainsi que différentes densités de pixels pour les affichages haute résolution. Ceci peut être réalisé via le « srcset ', illustré ci-dessous :
DOCTYPEhtml > < HTML > < tête > < méta jeu de caractères = 'utf-8' > < méta nom = 'portée d'affichage' contenu = 'largeur=largeur de l'appareil, échelle initiale=1' > < titre > titre > tête > < corps > < img src = 'F:\ARTICLES TECHNIQUES DE TRAVAIL\imgre.png' tout = 'Image réactive' srcset = 'F:\JOB ARTICLES TECHNIQUES\imgre.png 1x, F:\JOB ARTICLES TECHNIQUES\imgre.png 1.5x, F:\JOB ARTICLES TECHNIQUES\imgre.png 2x' /> corps > HTML >
Dans cet extrait de code, spécifiez le chemin de l'image trois fois avec différentes densités de pixels. C'est tel que le navigateur opte pour l'image la plus appropriée/adaptée pour garantir une qualité optimale sur les différents écrans.
Note: Le ' 1 fois ' Le pixel est la valeur par défaut, c'est donc un choix pour l'utilisateur de s'associer ou non au chemin de l'image.
Sortir
Exemple 3 : Améliorez la vitesse de chargement des pages via des images réactives à l'aide de l'attribut « sizes »
Dans certaines situations, il peut y avoir une limitation selon laquelle la taille réelle de l'image à l'écran varie par rapport à la largeur de l'écran. Pour résoudre ce problème, le « tailles ' L'attribut peut être utilisé pour inclure la taille de l'image par rapport aux requêtes multimédias ou une taille fixe. Ci-dessous la démonstration du code :
DOCTYPEhtml > < HTML > < tête > < méta jeu de caractères = 'utf-8' > < méta nom = 'portée d'affichage' contenu = 'largeur=largeur de l'appareil, échelle initiale=1' > < titre > titre > tête > < corps > < img src = 'F:\ARTICLES TECHNIQUES DE TRAVAIL\imgre.png' tout = 'Image réactive' srcset = 'F:\JOB ARTICLES TECHNIQUES\imgre.png 50w, F:\JOB ARTICLES TECHNIQUES\imgre.png 800w, F:\JOB ARTICLES TECHNIQUES\imgre.png 1200w' tailles = '(largeur maximale : 800 px) 100 vw, 800 px ' /> corps > HTML >
Dans ce bloc de code, le « tailles L'attribut ' intègre les requêtes multimédias et les tailles. Il est tel qu’il guide le navigateur pour opter pour la taille de l’image par rapport à la largeur de l’écran de l’utilisateur. Cela garantit que la ou les images ne dépassent pas la largeur maximale cible.
Sortir
Considérations importantes lors de l'utilisation de l'attribut « sizes »
Il existe certaines limites à l’utilisation du « tailles ' attribut également répertorié ci-dessous :
Lors de l'utilisation de plusieurs requêtes multimédias dans le ' tailles ', assurez-vous que la première vraie requête multimédia est sélectionnée. Assurez-vous également que les requêtes multimédias sont classées du plus spécifique au moins spécifique.
L'attribut « sizes » ne prend pas en charge les tailles en pourcentage, car le navigateur ne connaît pas la largeur d'un élément spécifié en pourcentage tant qu'il ne connaît pas la largeur de l'élément parent.
Exemple 4 : Améliorez la vitesse de chargement de la page via des images réactives à l'aide de l'élément « »
Le ' L'élément 'permet au programmeur d'afficher et de déployer plusieurs images sur différentes tailles d'écran. Ceci est utile dans les cas où le contenu varie en fonction de l'appareil. Ci-dessous la démonstration du code :
DOCTYPEhtml > < HTML > < tête > < méta jeu de caractères = 'utf-8' > < méta nom = 'portée d'affichage' contenu = 'largeur=largeur de l'appareil, échelle initiale=1' > < titre > titre > tête > < corps > < image > < source médias = '(largeur maximale : 100 px)' srcset = 'F:\ARTICLES TECHNIQUES DE TRAVAIL\imgbanner.png' /> < img src = 'F:\ARTICLES TECHNIQUES DE TRAVAIL\imgre.png' tout = 'Image réactive' /> image > corps > HTML >
D'après ces lignes de code :
Spécifie le ' ' élément qui accumule le ' ' éléments pour différentes images et laissez le navigateur choisir celui qui convient en fonction de la taille de l'écran de l'utilisateur.
De plus, si aucun des « ' Les éléments sont adaptés à la taille de l'écran, l'image spécifiée dans le ' ' La balise sert de solution de repli.
Cela ajoute par conséquent une image alternative dans un cas imprévu, maintenant ainsi la vitesse de chargement de page améliorée.
Sortir
Conclusion
La vitesse de chargement des pages peut être améliorée via des images réactives en utilisant le « srcset ', spécifiant différentes densités de pixels, en utilisant l'attribut ' tailles ', ou via l'attribut ' ' élément. Le ' 'L'approche élément peut être envisagée si aucune des autres approches ne fonctionne, car elle ajoute une image alternative dans un cas imprévu sans options supplémentaires pour la même image.
