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

Question

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

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

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

谢谢

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

Answer 1

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

附带说明：

浏览器经常在很短的时间内多次渲染同一个页面，特别是在读取图像元数据之后。

Answer 2

首先通过 HTTP 请求检索图像，例如

GET /images/myimage.png

然后应用缩放/变换。因此，如果您想要不同平台的不同图像，那么您应该这样请求。

Answer 3

浏览器（显然）在加载图像之前无法缩放（或做任何事情）。