浏览器如何渲染图像？

Question

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

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

我之所以问这个问题，是因为这几乎就是我的情况，如果是前者(先加载1mb )，那么我想我将不得不在移动设备上提供一个单独的镜像？

谢谢

编辑:既然人们说它将首先加载1mb的图像，你建议我如何为用户提供大图像？缩小它的移动规模，并有一个移动/桌面版本？

Answer 1

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

​

​

旁注：

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

Answer 2

浏览器(显然)无法在加载图像之前对其进行缩放(或执行任何操作)。

Answer 3

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

GET /images/myimage.png

然后应用缩放/变换。因此，如果你想在不同的平台上使用不同的镜像，那么你应该这样请求。