我有一个网页，我在几个部分使用图片作为背景。它是一个大的(大约1200 × 1200)。但是，我放置它的每个地方都有几个大小，例如，页脚的大小约为1000x1000，网页中间的一个部分的尺寸为200x300，页眉尺寸约为1100x1100。
所以，我的问题是:什么对性能更好?我应该创建几个图片与他们相应的尺寸更接近他们相应的地方，只是有一个让辛苦的工作给浏览器?一张大图总是更好。
如果有很多小图像，浏览器必须发出那么多请求。这会产生大量的网络开销。所以你可以用一张大图来包含所有的图片&你可以使用Image Sprites显示它的一部分。正如@Sheepy建议的那样，您可以使用Tinypng.com优化图像。
如果你制作了几个图像，它会导致页面加载速度的巨大延迟，所以最好的选择是让浏览器来做，因为它只会重新工作以前加载的图像。
但是请记住，它只适用于与主图像成比例的图像。注意，如果你将1200x1200的正方形图像调整为200x300的矩形，它看起来会很奇怪。
另一件事是你用什么样的图片。如果它只是一种颜色的渐变或背景，没关系——让浏览器来做。但如果它是一张东西的图片，比如一棵树或一个人，调整它的大小会给你一个奇怪的结果。
当图像很小且有很多图像时，如产品图像，最好预先缩放图像并提供适当的分辨率。原因很简单:当你只需要小缩略图时，在产品列表中下载和渲染许多完整尺寸的产品图像很慢。
但是你的图像是相对大而近的-一个1200,1100和1000平方的图像，加上一个小的。在这种情况下，我认为最好使用一个大的图像，让浏览器重用缓存，也许支持单独的200x300。
虽然解压图像的速度有时是一个因素，但它通常与传输时间和页面错误相比相形见绌。
但它也有帮助。大部分渲染时间都花在解压图像上。扩展速度相对较快。共享映像可以重用相同的未压缩数据("原始映像")。细节是相当复杂的，像往常一样你无法控制，但如果你尝试一下也无妨。即使它不能节省渲染时间，至少你减少了填满内存缓存的机会。
请记住，不同的浏览器可能会以不同的方式缩放图像，你几乎无法控制它。如果结果不可接受，你没有太多选择，但至少你试过了。
无论您最终使用一个或多个图像，尝试使用mozjpeg来优化它/它们。与Photoshop或其他常用工具相比，您可以在相同的质量下获得更小的尺寸(反之亦然)。