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