浏览器如何渲染图像？

Question

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

浏览器如何渲染图像？举一个我的意思的例子，假设我有1MB的图像是3000px x 1500px。然后我决定将此图像放入一个设置为宽度的容器中：100％;这意味着它会反复缩小。浏览器是否会加载整个1MB，然后继续缩小图像以适应容器，还是将其缩小然后继续加载？

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

由于

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

Answer 1

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

旁注：

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

Answer 2

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

Answer 3

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

GET /images/myimage.png

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