我想显示一个包含大约6000个小图像缩略图的页面（每个40x40）。为了避免产生6000个HTTP请求，我正在探索CSS精灵，即将所有这些缩略图连接成一个长条带并使用CSS来裁剪所需的图像。不幸的是，我发现JPEG文件在任何一个维度上都不能超过65500像素。警惕Web堆栈中的进一步限制，我想知道：以下任何一种都无法应对尺寸为40x240000的图像吗？
编辑：这样做的目的只是一次显示整个图像集，要求用户最多必须滚动。我希望“微缩略图”流入现有的CSS布局，所以我不能只使用大的矩形图像。我不希望用户必须点击多个页面才能看到所有内容。像素总数不是很大 - 只有2560x1600显示器的两倍。所有微缩略图的总文件大小只有几兆字节。假设每个图像都在浏览器的内存中未经压缩处理，每个像素占用8个字节的存储空间（RGBA加上100％的开销软糖因子），我们正在谈论数百兆字节的RAM使用率;对于2010年的专业应用程序而言并非不合理。唯一不合理的是，如果所有微缩略图都是单独发送的，那么会产生大量的HTTP请求。
答案 0 :(得分：18)
好吧，Safari / iOS列出了这些限制：
解码的GIF，PNG和TIFF图像的最大尺寸为3百万像素。 也就是说，确保宽度*高度≤3* 1024 * 1024.请注意，解码后的尺寸远远大于图像的编码尺寸。
使用子采样，JPEG的最大解码图像尺寸为3200万像素。 由于子采样，JPEG图像可以达到3200万像素，这使得JPEG图像可以解码为像素数量的十六分之一。大于2百万像素的JPEG图像被二次采样 - 即，解码为缩小的尺寸。 JPEG子采样允许用户从最新的数码相机中查看图像。
单个资源文件必须小于10 MB。 此限制适用于HTML，CSS，JavaScript或非流媒体媒体。
答案 1 :(得分：3)
根据您的更新，我仍然确实建议不使用此方法。难道你不认为谷歌的图像搜索不能像这样工作吗？
因此，我建议只需根据需要通过Ajax加载图像。 （即：当用户在当前可见的图像集下方滚动时。）虽然这将使用更多的连接，但这意味着您可以拥有合理尺寸的缩略图，并且作为一般方法比必须重新生成前更易于管理添加新图像时后端生成的缩略图图像“工作表”等