css - 在哪里放置大型背景图片的CSS？

我正在创建一个网站，每个网站的顶部都有一个较大的预告片图像（作为背景图像）。

现在的问题是，在哪里放置背景图像的样式表，以加快加载时间。

第一种选择是对每个站点使用嵌入式样式表：

HTML网站＃1

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

HTML网站＃2

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

HTML网站＃3

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

另一种选择是使用一个.css文件并将所有图像放在此处。

HTML网站＃1

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

HTML网站＃2

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

HTML网站＃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")" }

什么会更快？第二个选项将更易于管理，但此选项可能会更慢，因为所有图像都已加载-甚至其他站点的图像也已加载？在我当前的Firefox版本中，仅加载了所需的图像，但是我可以假定吗？

最佳答案

最好使用外部CSS。
如果类条件不匹配，则不会加载图像，因此，如果html中不存在该元素，则css规则将不适用，图像也将不会加载