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

Question

我想展示包含大约6000个微小图像缩略图（每个为40x40）。为避免进行6000个HTTP请求，我正在探索CSS精灵，即将所有这些缩略图连接成一条长条，并使用CSS来裁剪所需的图像。不幸的是，我发现JPEG文件在任何一个维度上都不能大于65500像素。由于对Web堆栈中的进一步限制持谨慎态度，我想知道以下哪些无法处理具有40x240000尺寸的图像？

• Internet Explorer
• Opera
• WebKit
• 任何CSS规范
• 任何HTML规范
• PNG规范

编辑：目的只是同时显示整个图像集合，要求用户最多滚动一下。我希望"微缩图"能够流入现有的CSS布局中，因此我不能只使用一个大矩形图像。我不希望用户不得不点击多个页面才能看到所有内容。像素总数并不是很大-仅是适合2560x1600显示器两倍的大小。所有微缩图的总文件大小仅为几兆字节。假设每个图像在浏览器内存中以未压缩方式操作，每像素占8个字节的存储空间（RGBA加上100%的开销预留），我们说的是低几百兆字节的RAM使用情况；对于2010年的专用应用程序来说并不过分。唯一过分的是如果所有微缩图像都单独发送，将产生大量HTTP请求。

- jl6

---

这里有一个问题：你到底为什么想要那样做？ - Jere

这是非常不可取的 - 难道真的没有合理的理由将其拆分成多个页面吗？ - John Parker

并不是我在建议，但我无法想象为什么你想要将6000张图片作为单独的精灵放在一个页面上。但你不会有一张40x240000的图片，而是会有一张3120x3120的图片，这是一个78x78的图像正方形，足够容纳6084张图片。请在你的问题中解释你想要做什么。这不是一个图片映射吧？ - PeteT

感谢赞赏，但是...哇:-)（原文为表情符号，中文无法直接翻译，故保留原文） - user166390

我希望有人能真正回答这个问题。无论这是否是一个好主意，我也需要知道我可以制作多长的图像，并期望它作为跨浏览器的背景图像工作。 - chowey

Answer 1

Safari/iOS有以下限制：

• 解码后的GIF、PNG和TIFF图像的最大尺寸为3百万像素。也就是说，确保宽度×高度≤ 3×1024×1024。请注意，解码后的大小比图像的编码大小要大得多。

• JPEG图像的最大解码尺寸为3200万像素，使用子采样。JPEG图像可以达到3200万像素，因为使用了子采样，这使得JPEG图像解码到具有十六分之一像素数量的大小。大于2百万像素的JPEG图像会进行子采样 - 即解码到较小的大小。JPEG子采样允许用户查看来自最新数码相机的图像。

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

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

- Steve-o

Answer 2

根据你的更新，我仍然强烈建议不要使用这种方法。你不认为谷歌的图像搜索不采用这种方式有原因吗？

因此，我建议通过Ajax按需加载图像。（例如：当用户滚动到当前可见图片集以下时。）虽然这将使用更多连接，但意味着你可以拥有大小合理的缩略图，并且作为一般方法比在后端需要重新生成预生成的缩略图"表格"（thumbnail image "sheets"）来添加新图片等更加可管理。

- John Parker

---

Middaparka建议使用最佳方法在一个页面中加载6000张图片，该方法称为Lazy Image Loading，请查看Google获取大量资源和易于使用且可高度自定义的jQuery插件http://google.com/search?q=lazy+image+loading。 - Xavi Esteve