css - 浏览器如何渲染图像？

Question

虽然这听起来很简单，但我一直在思考这个问题。

浏览器究竟是如何渲染图像的？对于我的意思的一个例子，假设我有一个 1MB 的图像，它是 3000px x 1500px。然后我决定将此图像放入一个容器中，该容器设置为 width:100%;这意味着它将响应地缩小。浏览器会加载整个 1MB，然后继续缩小图像以适合容器，还是会缩小图像然后继续加载？

我问是因为这几乎是我的情况，如果是前者(首先加载 1mb)那么我想我必须在移动设备上提供单独的图像？

谢谢

编辑:既然人们说它会首先加载 1mb 的图像，那么您建议我如何向用户提供大图像？为移动设备缩小规模并拥有移动/桌面版本？

Answer 1

图像完全加载后应用 CSS。所以简而言之，它将首先加载 1MB 图像，然后应用尺寸。图像也存储在服务器端。我发现了一张非常有用的图片，它描述了这一点:-

旁注:

浏览器通常会在很短的时间内多次呈现同一页面，尤其是在读取图像元数据之后。