web-dev-qa-db-fra.com

Les images se chargent-elles plus rapidement en HTML ou CSS?

Si je charge une image en utilisant ce html sur ma barre latérale

<img src="http://fc06.deviantart.net/fs70/f/2012/099/d/f/stackoverflow_16x16_icon_by_muntoo_stock-d4vl2v4.png" height="200px" width="200px" alt="image" />

Est-ce que cela se chargerait plus rapidement/plus lentement que si je mettais plutôt sur la barre latérale où mon style.css (qui est appelé dans l'en-tête) a

.image {
  width: 200px;
  height: 200px;
  background-image: url('http://fc06.deviantart.net/fs70/f/2012/099/d/f/stackoverflow_16x16_icon_by_muntoo_stock-d4vl2v4.png');
}
<div class="image"></div>
cssoptimizationhtmlpagespeed
27
GreatestSwordsman

Cela peut facilement être vérifié en utilisant Firebug (sous Net), Chrome Developer Tools (sous Network), Fiddler ou tout autre sniffer HTTP que vous préférez.

Si vous mettez l'image en CSS en tant qu'image d'arrière-plan, l'image ne sera téléchargée que lorsque cette classe est réellement utilisée et visible. Si vous le mettez dans un img il sera téléchargé immédiatement et bloquera le rendu même s'il est invisible.

En fin de compte, ils sont tous deux aussi rapides si vous comptez la vitesse à laquelle l'image se charge en soi. La question réelle est de savoir si les performances perçues sont meilleures que l’ordre l'image téléchargée peut être différente selon l'endroit où vous placez votre élément.

Je m'inquiéterais cependant davantage des autres aspects. Avoir l'image comme image de fond signifie:

  • L'image n'est pas un contenu
  • Il n'est pas imprimable
  • Vous pouvez utiliser un Sprite pour réduire le nombre de requêtes HTTP (améliorant ainsi les performances)
  • C'est plus lent à animer background-image que img
30
pixelfreak

Si vous les placez dans le fichier CSS, ils ne commenceront à télécharger qu'une fois le fichier CSS lui-même téléchargé. Cela pourrait ralentir légèrement l'approche CSS. A part ça, ça devrait être pareil.

5
sagi

Le navigateur commencera à télécharger l'image dès qu'il lira l'URL de l'image en HTML en mettant l'URL de l'image dans le fichier css, il finira par être téléchargé lorsque cette classe ou la règle CSS sera appliquée.Cependant, je vous encourage fortement à utiliser Sprites CSS = pour inclure des images dans vos pages Web.

astuces pour optimiser les images dans les pages Web

Règles de performance Yahoo pour les développeurs Web

2
DSharper

J'ai fait un petit test en utilisant l'addon YSlow de mozilla.

Sans réinitialisation css, jquery/javascript et autres choses, j'ai obtenu les résultats

tilisation J'avais cette structure à l'intérieur

        <div id="wrap">
        <img src="images/5.png" alt="" />
    </div><!--/wrap-->

et le YSlow m'avait dit que la page était chargée en 0,149 s

en utilisant l'arrière-plan: url ()

Ensuite, j'ai mis mon image en arrière-plan sur div appelé "wrap" et le résultat a été un peu plus rapide, le temps de chargement moyen étant d'environ 0,125 s.

Lors de ce test, j'ai utilisé une image png de 10,5 Ko (200 pixels x 200 pixels).

Par ailleurs, vous devez penser quand utiliser ou quand utiliser dans une balise (comme span/div, etc.). Pour avoir une structure professionnelle et agréable, vous devez utiliser la balise uniquement pour les images de contenu. La façon simple de voir est de désactiver le CSS. Si vous avez le contenu nécessaire (comme les galeries, les logos, les avatars, etc.) sans CSS, cela signifie que vous avez utilisé la bonne façon. Il est inutile de charger des choses comme des images avec des coins arrondis et d'autres éléments de conception à l'aide de la balise, peu importe si cela va être un peu plus rapide. Pensez qu'une personne qui a une connexion lente utilisera peut-être une version sans CSS, donc pour lui, il est inutile de charger votre avec un petit coin de boîte. Il veut seulement voir du contenu, pas des choses stupides quand sa bande passante est lente et limitée.

1
stefanz

Un argument pour que les images css soient plus rapides est que les applications Web qui utilisent de nombreuses petites images peuvent les combiner en une seule grande image en mosaïque et utiliser css pour découper le fichier image source selon les limites de la sous-image contenue. La réduction du nombre d'aller-retour sur le serveur pour récupérer des images supplémentaires peut augmenter considérablement les temps de chargement de ces applications. En fait, Google utilise cette idée dans bon nombre de ses propres applications telles que gmail, bien que la gestion manuelle puisse être difficile.

1
Two-Bits