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