Vignettes d'image en définissant la largeur en HTML ou CSS. Pourquoi pas?

Question

Je suis en train de traiter des centaines d'images en utilisant une bibliothèque de manipulation d'images pour créer des vignettes. Les miniatures prennent de la place et nécessitent un code supplémentaire à manipuler. Supposons que vous n'ayez pas besoin de recadrer les vignettes et que vous souhaitiez conserver le ratio.

Y at-il des inconvénients à simplement redimensionner les images en HTML ou CSS? Je n'aurais pas posé la question il y a plusieurs années mais les sites Web se chargent aujourd'hui à des vitesses superbes. Est-il encore déconseillé de redimensionner les images en HTML? Les images redimensionnées semblent se charger aussi rapidement que les vignettes. Je sais que les images redimensionnées en HTML conservent la taille d'origine, mais qui s'en soucie tant que le spectateur voit des vignettes? Personne ne télécharge les vignettes. Pourquoi ne redimensionnons-nous pas les images en HTML?

Answer 1

Parce que les images redimensionnées par le navigateur prennent plus de temps à charger, plus de puissance de calcul que nécessaire pour rendre, et ne regardent même pas les mêmes navigateurs à travers parce que différents tramage les méthodes sont utilisées. Vous allez surcharger votre serveur plus rapidement et utiliser beaucoup plus de bande passante.

Prenez le soin supplémentaire qu'il faut pour faire un bon resizer d'image côté serveur. Vos visiteurs, en particulier ceux avec des connexions plus lentes et des plafonds de bande passante, l'apprécieront vraiment.

Aussi, je recommande de fournir la largeur et la hauteur de l'image dans l'étiquette, même pour les images miniatures. Le navigateur utilisera cette information pour mettre en page la page une fois, au lieu de devoir recalculer la mise en page chaque fois qu'une autre image est récupérée.

Answer 2

Les images redimensionnées signifiant, vous redimensionnez l'image d'origine à la taille de la vignette et le télécharger, de sorte que l'image principale est dit 1 MB et la vignette est d'environ 200 KB.

Ce n'est pas une bonne idée d'utiliser width avec le tag <img /> car cela prend énormément d'espace, puisque vous avez dit que vous donneriez plusieurs images. Donc, il est préférable de le contrôler avec CSS:

img {width: 150px;}