我有一个网页，其中我使用图片作为几个部分的背景。它是一个很大的（大约1200x1200）。但是，我把它放在几个尺寸的每个地方，例如，页脚的大小约为1000x1000，网页中间的一个部分的尺寸为200x300，标题大约为1100x1100。
所以，我的问题是：对性能有什么好处？我应该创建几张带有相应尺寸的图片，然后更接近他们相应的地方o只需要一个让辛苦工作的浏览器吗？
答案 0 :(得分：1)
一张大图片总是更好。
如果有许多小图片，浏览器必须提出这么多请求。这可能会产生大量的网络开销。所以你可以使用一个包含所有图像的大图像。你可以使用Image Sprites展示它的一部分。正如@Sheepy建议您可以使用Tinypng.com优化图片。
答案 1 :(得分：0)
如果制作多张图片，会导致页面加载速度大幅延迟，因此最好的选择是让浏览器执行此操作，因为它只会修改以前加载的图像。
但请记住，它仅适用于与主图像成比例的图像。请注意，如果您将1200x1200方形图像调整为200x300矩形，则看起来很奇怪。
另一件事是你使用什么样的图片。如果它只是一种颜色的渐变或背景，那没关系 - 让浏览器完成这项工作。但如果它是某种东西的图片，如树或人，那么调整它会给你一个奇怪的结果。
答案 2 :(得分：0)
当图像很小并且有许多像产品图像时，最好预先缩放图像并提供适当的分辨率。 原因很简单：当您只需要小缩略图时，在产品列表中下载和渲染许多全尺寸产品图像的速度很慢。
但是你的图像相对较大且接近 - 一张1200,1100和1000平方的图像，还有一张小图像。 在这种情况下，我认为最好使用一个大图像，让浏览器重用该缓存，可能由个人200x300支持。
虽然解压缩图像的速度有时是一个因素，但它通常会因传输时间和页面错误而相形见绌。
但它也有帮助。大多数渲染时间用于解压缩图像。缩放比较快。 共享图像可能能够重用相同的未压缩数据（“原始图像”）。 细节非常复杂，并且像往常一样无法控制，但如果你尝试的话也不会受到伤害。 即使它无法节省渲染时间，至少可以减少填充内存缓存的几率。
请注意，不同的浏览器可能会缩放图片differently， 你有few control。 如果结果不可接受，你就没有太多选择了，但至少你试过了。
无论您最终使用的是一张还是多张图片，请尝试使用mozjpeg对其进行优化。与Photoshop或其他常用工具相比，您将获得相同质量的更小尺寸（反之亦然）。