Servir les images qui sont de taille appropriée pour enregistrer les données cellulaires et améliorer le temps de chargement

1. Comment servir des images qui sont de taille appropriée pour enregistrer les données cellulaires et améliorer le temps de chargement?
2. Quelle est la taille de l'image rendue?

Comment servir des images qui sont de taille appropriée pour enregistrer les données cellulaires et améliorer le temps de chargement?

Idéalement, votre page ne devrait jamais servir d'images plus grandes que la version rendue sur l'écran de l'utilisateur. Tout ce qui est plus grand que cela se traduit par des octets gaspillés et ralentit le temps de chargement de la page. La stratégie principale pour servir des images de taille appropriée est appelée "images réactives".

Quelle est la taille de l'image rendue?

Si cette image est affichée sur un smartphone dont la largeur de la fenêtre est de 360 ​​pixels, alors sa taille finale ne sera pas de 400x400 pixels, mais 360x360 pixels au plus - en raison de la largeur maximale par le CSS. Cette taille très finale de 360x360 ou plus petite est appelée taille rendue de l'image.