CSS - 图片加载

Question

我遇到了一个小问题，我的页眉图片非常大，在网络连接不好的情况下加载需要一定时间。我发现有些网站从“低质量” —> “正常质量（原始）”加载更大的图像文件，而不是从“没有图像” —> “已加载图像”，这似乎是我在我的页眉上遇到的问题。

background-image:url("images/header");

有没有一种方法可以使图像在 CSS 中从低质量加载到高质量，而不是从无图像到有图像？

如果我的问题表达得不好，真的很抱歉。英语不是我的母语 :)

- Kristjan

---

你能链接到页眉图片吗？只是好奇是否还有其他优化方法来调整它的大小。 - Andrew

http://www.upload.ee/image/2532054/header.png - Kristjan

渐进式图像渲染渐进式图像渲染是一种在图像加载过程中逐步显示图像的技术。与传统的一次性完全加载整个图像相比，这种技术可以更快地呈现出部分图像，并在加载的同时逐步提高图像质量。这种方法可以让用户更快地看到一个大型图像的预览，而不需要等待整个图像完全加载。 - lanan

+1 给 @Shvetusya。如果您想仅使用 CSS，则这是最佳选项。 - Spooky

我在Photoshop中使用“交错”选项保存了PNG文件，但它并没有像那样加载... 我有什么没理解的吗？演示：http://kdfx.eu/designs/piupiuhq/ - Kristjan

Answer 1

使用lowsrc属性：

<img alt="Image Name" src="highquality.jpg" lowsrc="lowquality.jpg">

- Mr. Alien

---

使用CSS我需要完成这个，我有背景图片..但如果没有其他选项，我会尝试这个。 - Kristjan

我认为CSS中没有这样的选项，相反，您可以将标题div包装在另一个div中，并使其背景图像源为低质量，但这样会不必要地加载两个图像。 - Mr. Alien