css - 是否可以使用 1 kb .png 图像作为背景图像(重复)?

标签 css png web-optimization

我从 http://bg.siteorigin.com/ 创建了一个 png 图像.该图像的大小为 1kb,我将其用作 body 标签上的背景图像。

我想知道 --- 如果我使用另一张 500kb(1,920px * 1,080px) 的图像,则加载时间会更长,数据消耗也会增加 500kb。因此,如果我重复使用此 .png 图像 (1kb),它将消耗多少数据。

body {
   background-image:url("../path/imgName.png") ;
}

对于相同的显示尺寸(1,920px * 1,080px)有什么不同吗???

最佳答案

您的 1 KB 图片将消耗 1 KB 的数据。浏览器通常只加载资源一次,无论您在同一页面上使用它们多少次。

实践中的例子:

Example image Example image Example image Example image

尽管此页面显示了四次,但如果您查看浏览器开发人员工具的网络选项卡,您会发现它只加载了一次。

关于css - 是否可以使用 1 kb .png 图像作为背景图像(重复)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57621584/

相关文章:

javascript - 使用 slideToggle 添加/删除类

c# - .NET Image.Save 偶尔会生成带有错误 IDAT block 的 PNG

asp.net-mvc-4 - 具有绝对路径的 ASP.NET MVC Bundle

css - PNG颜色问题

常规 html 中的 ASP.NET 包?

cross-browser - 如何在后台预加载 JavaScript 和 CSS 文件,以便在用户进入主页时在浏览器缓存中准备好它们?

css - 使用 CSS 的表格布局

javascript宽度/高度不起作用和颜色

html - 在图像上排列标题

delphi - 从 Delphi 2009 图像列表中提取 PNG 图像