CODEWITHSUNDEEP
cssperformancebrowserbackground-imageloading
Sören Henning
Sören Henning

Reputation: 396

Where to put css for large background images?

I'm creating a website which has a large teaser image (as background-image) on the top of each site.

Now the question is, where to put the stylesheet for the background-image, to speed up the loading time.

The first option is to use embedded stylesheet for each site:

HTML Site #1

<div id="teaserimage" style="background-image: url("/path/to/img1.jpg")"></div>

HTML Site #2

<div id="teaserimage" style="background-image: url("/path/to/img2.jpg")"></div>

HTML Site #3

<div id="teaserimage" style="background-image: url("/path/to/img3.jpg")"></div>

The other option is to use one .css file and put all the images there.

HTML Site #1

<div id="teaserimage" class="site1"></div>

HTML Site #2

<div id="teaserimage" class="site2"></div>

HTML Site #3

<div id="teaserimage" class="site3"></div>

CSS:

#teaserimage.site1 { background-image: url("/path/to/img1.jpg")" }
#teaserimage.site2 { background-image: url("/path/to/img2.jpg")" }
#teaserimage.site3 { background-image: url("/path/to/img3.jpg")" }

What would be faster? The second option would be easier to manage, but this option is maybe slower, because all images were loaded - even the ones for the other sites? In my current Firefox version only the required images where loaded, but can I assume that?

Upvotes: 0

Views: 268

Answers (2)

Tomer Almog
Tomer Almog

Reputation: 3868

  1. it is a better practice to use an external css.
  2. the images will not be loaded if the class criteria doesn't match so if the element doesn't exists on your html, the css rule will not apply and the images will not be loaded

Upvotes: 1

Sachin Godara
Sachin Godara

Reputation: 502

an inline style is only applied to the HTML element you specified it in.

Like the internal stylesheet, this creates a maintenance problem. If you want to change something, you have to find every instance you used that specific inline style.

When can I use an inline style? Like the internal stylesheet, when you have 1 or 2 specific spots that need special styling. Again, this could be done in the external stylesheet for easier maintenance. you used inline stylesheet in first option and external stylesheet in second, second is best for it because

An external stylesheet:

Reduced the size of your web page by reducing the coding contained in the web page. Makes it much easier to maintain a website and make changes. Easier to problem solve if styles are not being applied as planned. You just have to review your styles and the order they are written in from one location.

Upvotes: 1

Related Questions