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