Y a-t-il des différences de performances ou de comportement de charge / de mise en cache lors de l'affichage des images dans IMG Tags vs divs avec des arrière-plans d'image?
J'ai un site avec de nombreuses images qui se chevauchent, dont certaines auront besoin de charger de manière dynamique avec JavaScript. Un problème est que j'ai besoin d'ancrer les images à droite de l'élément, de sorte que je puisse faire un bon effet d'essuyage à droite. À cause de cela, j'utilisais un div avec l'image de fond positionnée à droite. Je ne pouvais pas comprendre comment faire cela avec img, mais depuis que DIVS travaille pour moi, je ne savais pas si cela importerait ...
6 Réponses :
AFAIK, les navigateurs cachent des images les mêmes, qu'ils soient dans un DIV ou un IMG. Dans tous les cas, je pense que celui-ci de ces cas où des performances spécifiques sont définies comme un détail de mise en œuvre interne à chaque moteur de rendu (et éventuellement les navigateurs construits autour d'eux). En tant que tel, il est à la fois hors de notre contrôle en tant que concepteurs / développeurs et susceptible de passer du navigateur vers le navigateur et la version à la version. En d'autres termes, je ne passerais pas trop de temps à m'inquiéter à ce sujet.
La seule différence que je peux concevoir cela:
Vous ne pouvez pas réduire les images comme des arrière-plans, bien que vous puissiez pour les étiquettes IMG. Cela ouvrirait un scénario où les images d'arrière-plan sont chargées plus vite parce que cela vous oblige à avoir la taille natale correcte, à l'opposé au téléchargement de l'image entière et à la mettre en place. Cependant, l'inverse pourrait être vraie: étant donné que vous ne vous souciez pas de la qualité de l'image, vous pouvez fournir des IMG plus petits à votre page et les augmenter.
Je tiens avec tout le nettoyant rendu (et plus systématiquement - c.-à-d. / FF / CHROME / SAFARI / etc.).
Ce n'est plus vrai compte tenu de la propriété de la taille de l'arrière-plan CSS3 w3schools.com/cssref/csss3_pr_background- taille.asp
Différences techniques Oui, notamment, vous pouvez définir la largeur / la hauteur d'une étiquette IMG et étirera l'image, qui peut être utile dans certaines situations.
L'essentiel que vous devez garder à l'esprit est le contexte de l'image dans le document HTML. Si l'image est contentée, dites une image dans une galerie, j'utiliserais une balise IMG. S'il ne fait que partie de l'interface, je pourrais utiliser un div au lieu.
Dans CSS3, vous pouvez accabler des images de fond. Voir CSS3.Info/preview/background-Size pour un exemple. Cela dit, vous soulevez un excellent point sur la différence sémantique: un IMG est généralement le meilleur choix lorsque l'image est une partie matérielle du contenu de la page, tandis qu'une technique CSS est généralement préférée lorsque l'image est juste décorative ou pour le formatage.
La principale différence de performance consiste à utiliser des images d'arrière-plan vous permet d'utiliser des sprites CSS. Avoir une image contient un grand nombre d'images de votre page signifie que l'utilisateur doit uniquement faire une demande à la place d'une pour chaque image.
Une autre différence est avec des aménagements réactifs. Si vous avez un élément qui n'est affiché que sur certaines largeurs d'écran (c'est-à-dire non sur les téléphones mobiles), il chargera toujours l'image si elle est spécifiée dans le HTML (à l'aide de l'affichage: Aucun par exemple), mais la plupart de tous les navigateurs seront maintenant Ne chargez pas l'image si elle est une image de fond spécifiée dans les règles inutilisées du support multimédia-CSS. Beaucoup de dispositions réactives précoces ont été critiquées car elles utilisaient toujours la même bande passante que les sites de taille réelle.
Il est également utile avec de telles conceptions car vous pouvez facilement spécifier différentes images pour différentes tailles d'écran. "Retina" s'affiche sur des comprimés et même des ordinateurs portables maintenant ne semblera pas avoir la meilleure solution sans graphisme de résolution 2x. Alors ... même si vous ne faites pas de telles choses maintenant, c'est probablement une bonne pratique pour entrer dans, car vous pourriez vous retrouver besoin de cela bientôt!
Je pense en utilisant l'attribut de fond-image dans la DIV, la disposition de la page est chargée d'abord et d'image présentes dans les divs chargés ultérieurement après la charge du DOM. Donc, en utilisant l'image de fond, la mise en page HTML est chargée plus rapidement sur le navigateur Web.