在哪里放置大型背景图像的css？

我正在创建一个网站，其中有一个大的挑逗图像（作为背景图像）在每个网站的顶部

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

第一个选项是为每个站点使用嵌入式样式表：

HTML站点#1

---

什么会更快？第二个选项更容易管理，但是这个选项可能会慢一些，因为所有的图像都被加载了，甚至是其他站点的图像？在我当前的Firefox版本中，只有加载了所需的图像，但我可以假定吗？

内联样式仅应用于您在其中指定的HTML元素

与内部样式表一样，这会造成维护问题。如果要更改某些内容，必须找到使用该特定内联样式的每个实例

何时可以使用内联样式？与内部样式表一样，当您有1或2个需要特殊样式的特定点时。同样，这可以在外部样式表中完成，以便于维护。您在第一个选项中使用内联样式表，在第二个选项中使用外部样式表，第二个选项最适合它，因为

外部样式表：

通过减少网页中包含的编码来减少网页的大小。 使网站的维护和更改变得更加容易。 如果未按计划应用样式，则更容易解决问题。您只需从一个位置查看样式及其书写顺序

使用外部css是更好的做法

如果类条件不匹配，则不会加载图像。因此，如果html中不存在该元素，则css规则将不适用，并且不会加载图像

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

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

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

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

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

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

#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")" }