存储多个缩略图与使用 css

Question

我正在开发一个当前存储大小为 100x100 的缩略图的网站。一位设计师正在与我们合作，并创建了一个需要 100x100、32x32、22x22 和 16x16 缩略图的设计。

网站上的任何给定页面都可能以不同的大小多次显示相同的缩略图。

我的问题是：我们应该创建和存储每种尺寸的缩略图吗？或者将缩略图存储为 100x100 并仅使用 CSS 来实现更小的缩略图尺寸就足够了吗？

我的理论是，全面使用 100x100 缩略图并使用 CSS 来获得所需的尺寸会比存储每个单独的尺寸表现更好（即：更快的页面加载）。

为什么我会这样想？

因为第一次下载 100x100 时，它会被缓存，并且 CSS 会在使用相同图像的整个页面中“调整”它的大小。如果我们明确地存储和引用不同的图像文件，我们将需要抓取 4 个文件而不是一个，并且也无法利用浏览器的缓存。

想法？

Answer 1

您不能总是保证最终浏览器会缓存页面。尤其是在移动设备上，内存非常有限，因此缓存很快就会被填满并失效。

如果您想要更快的页面加载时间，您会想要制作更小的图像，因为它们会下载得更快。唯一的问题是请求时间。浏览事物（例如图像库）的人将浏览并仅单击其中一些图像。如果您从所有小缩略图开始，页面加载速度会非常快，然后当他们要求增加所选缩略图的大小时，您将动态加载这些图像。

您可以做的一件事来减少请求是使用服务器端脚本将每个大小的所有缩略图放入各种图块集中（按大小排序......如果是静态页面，您也可以手动执行此操作) 并使用 CSS 调整视图边界。这就是 JQuery 处理按钮的方式。这样一来，您只需请求一个图像即可加载给定集合的所有缩略图。当您的最终用户要求增加缩略图的大小时，您的页面可以动态地请求更大的尺寸。这样做的缺点是，如果您在每个页面上有很多图像，您将有一个大图像要下载，我相信对于许多浏览器，用户在完全加载之前不会看到图像。使用单独的缩略图，他们可以看到它们的进展。