16

I want to display a page containing about 6000 tiny image thumbnails (40x40 each). To avoid having to make 6000 HTTP requests, I am exploring CSS sprites, i.e. concatenating all these thumbnails into one long strip and using CSS to crop the required images out. Unfortunately, I have discovered that JPEG files cannot be larger than 65500 pixels in any one dimension. Wary of further limits in the web stack, I am wondering: are any of the following unable to cope with an image with dimensions of 40x240000?

  • Internet Explorer
  • Opera
  • WebKit
  • Any CSS spec
  • Any HTML spec
  • The PNG spec

Edit: the purpose of this is simply to display an entire image collection at once, requiring that the user at most has to scroll. I want the "micro-thumbnails" to flow into an existing CSS layout, so I can't just use a big rectangular image. I don't want the user to have to click through multiple pages to see everything. The total number of pixels is not that great - only twice what would fit on a 2560x1600 display. The total file size of all the micro-thumbnails is only a couple of megabytes. Assuming every image is manipulated uncompressed in the browser's memory, taking 8 bytes of storage per pixel (RGBA plus 100% overhead fudge factor), we are talking RAM usage in the low hundreds of megabytes; not unreasonable for a specialized application in the year 2010. The only unreasonable thing is the volume of HTTP requests that would be generated if all micro-thumbnails were sent individually.

jl6
  • 6,110
  • 7
  • 35
  • 65
  • Here's a question: why the hell would you want to do that? – Jere Dec 05 '10 at 13:29
  • This is deeply inadvisable - is there *really* no sound rationale for breaking this up into multiple pages? – John Parker Dec 05 '10 at 14:31
  • 1
    Not that I am advising this I can't imagine why you would want 6000 images on a page as individual sprites. But you wouldn't have an image 40x240000 you would have an image 3120x3120 which is a 78x78 image square giving you enough space for 6084 images. Explain what you are trying to do in your question. It's not an image map is it? – PeteT Dec 05 '10 at 14:46
  • 3
    +1 for "interesting" factor, but ... wow :-) –  Dec 06 '10 at 11:16
  • I will definitely go for the grid of images approach instead of the strip of images approach if I can't make the strip work - but if I can, it would simplify things greatly. – jl6 Dec 06 '10 at 14:45
  • I wish someone would actually answer this question. Whether it is a good idea or not, I also need to know how long I can make an image and expect it to work as a background image cross-browser. – chowey Jan 21 '14 at 03:12
  • Does this answer your question? [What's the largest image size that the iOS browser display without downsampling?](https://stackoverflow.com/questions/5935785/whats-the-largest-image-size-that-the-ios-browser-display-without-downsampling) – tevemadar Jan 30 '23 at 10:33

2 Answers2

19

Well, Safari/iOS lists these limits:

  • The maximum size for decoded GIF, PNG, and TIFF images is 3 megapixels. That is, ensure that width * height ≤ 3 * 1024 * 1024. Note that the decoded size is far larger than the encoded size of an image.

  • The maximum decoded image size for JPEG is 32 megapixels using subsampling. JPEG images can be up to 32 megapixels due to subsampling, which allows JPEG images to decode to a size that has one sixteenth the number of pixels. JPEG images larger than 2 megapixels are subsampled—that is, decoded to a reduced size. JPEG subsampling allows the user to view images from the latest digital cameras.

  • Individual resource files must be less than 10 MB. This limit applies to HTML, CSS, JavaScript, or nonstreamed media.

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

Steve-o
  • 12,678
  • 2
  • 41
  • 60
3

Based on your update, I'd still really recommend not using this approach. Don't you think there's a reason that Google's image search doesn't work like this?

As such, I'd recommend simply loading images as required via Ajax. (i.e.: When the user scrolls below the currently visible set of images.) Whilst this will use more connections, it'll mean that you can have sensibly sized thumbnails and as a general approach is much more manageable than having to re-generate pre-generated thumbnail image "sheets" on the back-end when a new image is added, etc.

John Parker
  • 54,048
  • 11
  • 129
  • 129
  • 2
    Middaparka is suggesting the best approach for loading 6000 images in only one page, the method is called Lazy Image Loading, check Google for tons of resources and easy to use and very customizable jQuery plugins http://google.com/search?q=lazy+image+loading – Xavi Esteve Dec 15 '10 at 20:52