我正在一个当前存储大小为 100x100 的缩略图的网站上工作。一位设计师正在与我们合作，并创建了一个需要 100x100、32x32、22x22 和 16x16 缩略图的设计。
网站上的任何给定页面都可能以不同的大小多次显示相同的缩略图。
我的问题是：我们应该创建和存储每种尺寸的缩略图吗？或者将缩略图存储为 100x100 并仅使用 CSS 来实现更小的缩略图大小就足够了吗？
我的理论是，全面使用 100x100 缩略图并使用 CSS 来获得所需的尺寸会比存储每个单独的尺寸表现得更好（即：更快的页面加载）。
为什么我会这样想？
因为第一次下载 100x100 时，它将被缓存，CSS 将在使用相同图像的整个页面中“调整”它的大小。如果我们明确地存储和引用不同的图像文件，我们将需要获取 4 个文件而不是一个，并且也无法利用浏览器的缓存。
想法？
您不能总是保证最终浏览器会缓存页面。尤其是在移动设备上，内存非常有限，因此缓存很快就会被填满并失效。
如果您想要更快的页面加载时间，您将需要制作较小的图像，因为它们会下载得更快。唯一的问题是请求时间。浏览事物（例如图像库）的人将浏览并仅单击其中一些图像。如果您从所有小缩略图开始，页面加载速度会非常快，然后当他们要求增加所选缩略图的大小时，您将动态加载这些图像。
减少请求可以做的一件事是使用服务器端脚本将每种大小的所有缩略图放入各种图块集中（按大小排序......如果是静态页面，您也可以手动执行此操作）并使用CSS 来调整视图边界。这就是 JQuery 处理按钮的方式。这将使您只需要请求一个图像来加载给定集合的所有缩略图。当您的最终用户要求增加缩略图的大小时，您的页面可以动态地请求更大的尺寸。这样做的缺点是，如果您在每个页面上有很多图像，您将有一个大图像要下载，我相信对于许多浏览器，用户在完全加载之前不会看到图像。使用单独的缩略图，他们可以看到它们的进展。