Image loading inline or external

HTML & CSS
1

hi all

is there any difference in loading time of

  1. An image whose path is specified in external css file whether its on top lines of external css or its in bottom lines of external css file.

  2. An image whose path is specified directly in inline html or inside <head> tag

vineet

2

No difference at all. But we should use external CSS looking towards the aspect of SEO

3

For most modern browsers (if not all) an image specified in the CSS is only loaded when it is called for on the page. None of the images in the stylesheet are actually loaded until they are actually needed on the page concerned.

Otherwise a browser would have to load all the images in the stylesheet which for a 1000+ page site would keep you waiting a few hours to view the first page.:slight_smile:

That’s the reason that when you swap images using hover there is a delay because the new hover image has to be loaded first. Sprites are useful for hover effects because all states of the image are loaded with the initial image. However if your sprite has never been seen on the page then it must also be loaded once the page requires it to be displayed.

So as others have said it will not make any difference where you put the image in the css. The image will start loading as soon as the browser starts drawing the page for that element that needs the image so it will depend on the order the html is rendered which I guess would be sequentially.