一个 PNG 图像中包含多个布局图像的 HTTP 响应

Question

我正在检查 amazon.com http 响应，我注意到了这一点 HERE 因为您可以看到页面布局中使用的图像包含在一张 PNG 图像中，

这是已知方法吗？
正如我想象的那样，页面上的 JavaScript 会根据图像中特定的 X&Y 位置将图像的每个部分放置在正确的位置，这是真的吗？
为什么他们这样做而不是请求每张图片？新请求是否比浏览器内图像处理更昂贵？（如果我上面的假设是正确的）
非常感谢进一步阅读此内容的建议

谢谢！

Answer 1

Is this a known approach ?

是的。这些被称为 CSS 精灵。他们通过仅请求单个图像然后仅显示需要的图像部分来减少图像请求的数量。

As I imagine, The JavaScript on the page will place each part of the image in the right place accoarding to a specific X&Y positions in that image, Is this really what's happening ?

是的。正确的。也许会。可能是 Javascript，但仅 CSS 的解决方案更常见。

Why are they doing this instead of requesting each image ? Is a new request more expensive than in-browser image processing ? (if my above assumption is correct)

是的。正确的。更少的请求意味着更快的页面加载，通常。

Suggestions for further reading on this thing is much appreciated

这里有教程：https://css-tricks.com/css-sprites/

这是该教程中的示例：

.flags-canada, .flags-mexico, .flags-usa {
  background-image: url('https://i0.wp.com/css-tricks.com/wp-content/uploads/2009/10/sprite.png');
  background-repeat: no-repeat;
}

.flags-canada {
  height: 128px;
  background-position: -5px -5px;
}

.flags-usa {
  height: 135px;
  background-position: -5px -143px;
}

.flags-mexico {
  height: 147px;
  background-position: -5px -288px;
}

<h3>Full image</h3>
<img src='https://i0.wp.com/css-tricks.com/wp-content/uploads/2009/10/sprite.png'>

<h3>Canada</h3>
<div class='flags-canada'></div>

<h3>USA</h3>
<div class='flags-usa'></div>

<h3>Mexico</h3>
<div class='flags-mexico'></div>

一个 PNG 图像中包含多个布局图像的 HTTP 响应

HTTP Response with Multiple Layout Images in one PNG Image

javascript

http

web

png