Qu'est-ce qu'une image à l'échelle et comment en servir une dans une page Web?
Quand je lance une page de test dans google PageSpeed.
J'ai trouvé quelques avertissements, comme par exemple servir de l'échelle des images..
http://man-vimal.net78.net/introduction/?intro/action=main
THe results were as such :
The following images are resized in HTML or CSS. Serving scaled images could save 449.3KiB (99% reduction).
http://man-vimal.net78.net/.../twitter-logo.png is resized in HTML or CSS from 367x367 to 20x20. Serving a scaled image could save 140.9KiB (99% reduction).
http://man-vimal.net78.net/introduction/views/images/fb.png is resized in HTML or CSS from 1,692x1,692 to 20x20. Serving a scaled image could save 115.9KiB (99% reduction).
http://man-vimal.net78.net/.../linkedin.jpg is resized in HTML or CSS from 1,024x768 to 20x20. Serving a scaled image could save 99.6KiB (99% reduction).
http://man-vimal.net78.net/.../panorama.jpg is resized in HTML or CSS from 604x453 to 100x100. Serving a scaled image could save 81KiB (96% reduction).
http://man-vimal.net78.net/.../googleplus.jpg is resized in HTML or CSS from 450x320 to 20x20. Serving a scaled image could save 12KiB (99% reduction).Qu'est ce qu'une image à l'échelle et comment je peux résoudre ce problème ??
source d'informationauteur Vimal Basdeo
Vous devez vous connecter pour publier un commentaire.
Une image à l'échelle est une image qui a été ajustée pour correspondre à la taille qui est affiché.
C'est vous dire que la source de l'image est 367x367 mais vous êtes en affichage à 20x20.
Il est inefficace, parce que le navigateur doit télécharger l'image plus grande et ensuite redimensionner. Le 367x367 image est 140kb plus grand qu'un 20x20 image.
Pour résoudre ce problème, redimensionner l'image (photoshop, aperçu, etc. ) c'est de 20x20 et servir à la place de l'image que vous êtes en train de purger.
vos images sont trop grandes. il suffit de les redimensionner. vous pouvez même utiliser de la peinture à faire. une image à l'échelle est essentiellement une image redimensionnée.
La situation typique est celle, disons que vous avez une image avec une largeur de 400px, mais il ne convient pas à votre disposition, si vous allez à votre feuille de style et d'écriture:
img {width: 300px;
}
Ici, vous avez redimensionné l'image avec CSS. Mais vous êtes toujours au service de l'image à 400px de la taille et de l'échelle de l'image vers le bas.
L'implication ici est que, plutôt que d'utiliser le 400px de l'image, vous devez utiliser l'image de la taille de la façon dont vous avez besoin parce que la taille du fichier sera plus petit, et donc le chargement de la page plus rapidement.
Par exemple, si un utilisateur d'un site web télécharge une image de taille 400px x 400px et vous utiliser cette image comme la miniature dire 40px x 40px à l'aide de html/css.
Le navigateur web a qu'à télécharger l'image plus grande et de calcul de la plus petite taille. La meilleure façon de résoudre ce problème est de faire un distinct copie de l'image, dire "lorsque l'utilisateur télécharge l'image" et ensuite de l'utiliser directement.
De sorte que le navigateur n'est pas inefficace à l'échelle de l'image.
J'espère que cette aide.
Une Image à l'Échelle est une image dont la taille correspond exactement à la taille définie dans le CSS ou le HTML.
Si votre image d'origine appelé twitter-logo.png est de disons 300 x 250 dimension, mais la dimension définie dans le code HTML de déclaration est:
puis le navigateur sera d'abord télécharger l'image originale (qui a une dimension de 300 x 250) et ensuite la redimensionner pour correspondre aux dimensions définies dans le code HTML de déclaration. c'est à dire 600 x 500
Ce redimensionnement des images dans le HTML ou le CSS ralentit l'ensemble du rendu de la page considérablement et devrait être évitée.
De redimensionner les images (et de les optimiser sans perte), vous pouvez utiliser un logiciel gratuit appelé L'ÉMEUTE (disponible uniquement pour Windows).