浏览器/CSS 规范中的最大图像尺寸？

Question

我想显示一个包含大约 6000 个小图像缩略图（每个 40x40）的页面。为了避免发出 6000 个 HTTP 请求，我正在探索 CSS sprite，即将所有这些缩略图连接成一个长条，并使用 CSS 裁剪出所需的图像。不幸的是，我发现 JPEG 文件在任何一个维度上都不能大于 65500 像素。警惕网络堆栈的进一步限制，我想知道：以下任何一项都无法处理尺寸为 40x240000 的图像？

• Internet Explorer
• 歌剧
• WebKit
• 任何 CSS 规范
• 任何 HTML 规范
• PNG 规范

编辑：这样做的目的只是一次显示整个图像集，要求用户最多滚动。我希望“微型缩略图”流入现有的 CSS 布局，所以我不能只使用大的矩形图像。我不希望用户必须单击多个页面才能查看所有内容。像素的总数并不多——只有 2560x1600 显示器的两倍。所有微型缩略图的总文件大小只有几兆字节。假设每张图片都是在浏览器内存中未经压缩地处理的，每个像素占用 8 字节的存储空间（RGBA 加上 100% 的开销因素），我们所说的 RAM 使用量只有数百兆字节；对于 2010 年的专业应用来说并非不合理。唯一不合理的是如果单独发送所有微缩略图会产生的 HTTP 请求量。

Answer 1

嗯，Safari/iOS 列出了这些限制：

• 解码的 GIF、PNG 和 TIFF 图像的最大尺寸为 3 兆像素。 即保证宽*高≤3*1024*1024。注意解码后的尺寸远大于编码后的尺寸。

• 使用二次采样的 JPEG 最大解码图像大小为 32 兆像素。 由于二次采样，JPEG 图像最高可达 32 兆像素，这允许 JPEG 图像解码为像素数十六分之一的大小。对大于 2 兆像素的 JPEG 图像进行二次采样，即解码为缩小的尺寸。 JPEG 二次采样允许用户查看来自最新数码相机的图像。

• 单个资源文件必须小于 10 MB。 此限制适用于 HTML、CSS、JavaScript 或非流媒体。

http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/CreatingContentforSafarioniPhone/CreatingContentforSafarioniPhone.html

Answer 2

根据您的更新，我仍然真的建议不要使用这种方法。你不认为谷歌的图片搜索不能这样工作是有原因的吗？

因此，我建议通过 Ajax 根据需要简单地加载图像。 （即：当用户滚动到当前可见的图像集下方时。）虽然这将使用更多连接，但这意味着您可以拥有合理大小的缩略图，并且作为一般方法比重新生成预生成更易于管理- 添加新图像时在后端生成缩略图“表格”等。