浏览器如何渲染图像？

虽然这听起来很简单，但我一直在想这个问题。浏览器如何渲染图像？

浏览器如何渲染图像？对于我的意思的例子，可以说我有一个3000像素×1500像素的1MB图像。然后我决定把这个图像放入一个宽度为100％的容器中;这意味着它会按比例缩小。浏览器会加载整个1MB，然后继续缩小图像以适应容器，还是将它缩小，然后继续加载它？

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

感谢

编辑：既然人都在说，它会先加载1MB的图片，你会如何建议我成为一个大的图像给用户？按比例缩小移动版并拥有移动版/桌面版？

2013-10-04 Purify

所以它会尝试首先加载1MB。讨厌。 – Purify

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

2013-10-04 16:08:24

简单的原因是'image'存储在服务器端。说同样的话：“我可以在我的相机上编辑我的电脑上的图像，然后将该图像下载到电脑上？” – Cristy

@Cristy： - 非常好的一点！ –

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

GET /images/myimage.png

然后应用缩放/转换。所以如果你想为不同的平台提供不同的图像，那么你应该这样请求。

2013-10-04 16:09:27

CSS在图像完全加载后应用。所以总之，它会首先加载1MB图像，然后应用尺寸。此外，图像存储在服务器端。我发现它描述这是一个非常有用的图像： -

enter image description here

在一个侧面说明：

浏览器通常会多次呈现在同一页面中的时间很短的时间，看完之后特别图像元数据。

2013-10-04 16:11:42

回答