Maximale Bildgröße in einer Browser/CSS-Spezifikation?

Question

Ich möchte eine Seite anzeigen, die etwa 6000 kleine Miniaturbilder enthält (jeweils 40x40). Um 6000 HTTP-Anfragen zu vermeiden, erkunde ich CSS-Sprites, d. H. Verknüpfe alle diese Miniaturen zu einem langen Streifen und verwende CSS, um die benötigten Bilder auszuschneiden. Leider habe ich festgestellt, dass JPEG-Dateien in einer Dimension nicht größer als 65500 Pixel sein können. Vor weiteren Einschränkungen im Web-Stack warne ich mich: Kann einer der folgenden Bereiche ein Bild mit den Abmessungen 40x240000 nicht bewältigen?

• Internet Explorer
• Opera
• WebKit
• Jede CSS-Spezifikation
• Jede HTML-Spezifikation
• Die PNG-Spezifikation

Edit: Der Zweck dieser ist einfach angezeigt werden eine gesamte Bildsammlung auf einmal, wobei der Benutzer höchstens scrollen muss. Ich möchte, dass die "Micro-Thumbnails" in ein bestehendes CSS-Layout einfließen, sodass ich nicht einfach ein großes rechteckiges Bild verwenden kann. Ich möchte nicht, dass der Benutzer mehrere Seiten durchklicken muss, um alles zu sehen. Die Gesamtzahl der Pixel ist nicht so toll - nur das Doppelte, was auf ein 2560x1600 Display passen würde. Die gesamte Dateigröße aller Miniaturansichten beträgt nur ein paar Megabyte. Unter der Annahme, dass jedes Bild im Speicher des Browsers unkomprimiert manipuliert wird, wobei 8 Bytes Speicher pro Pixel (RGBA plus 100% Overhead-Fudge-Faktor) verwendet werden, sprechen wir von einer RAM-Nutzung in den niedrigen Hunderten von Megabyte; nicht unangemessen für eine spezialisierte Anwendung im Jahr 2010. Die einzige unvernünftige Sache ist die Menge der HTTP-Anfragen, die generiert würden, wenn alle Mikro-Thumbnails einzeln gesendet würden.

Answer 1

Nun, Safari/iOS listet diese Grenzen:

• die maximale Größe für decodieren GIF, PNG, und TIFF-Bilder sind 3 Megapixel. Das heißt, stellen Sie sicher, dass width * height ≤ 3 * 1024 * 1024 ist. Beachten Sie, dass die decodierte Größe viel größer als die codierte Größe eines Bildes ist.

• Die maximale dekodierte Bildgröße für JPEG beträgt 32 Megapixel mit Subsampling. JPEG-Bilder können aufgrund von Subsampling bis zu 32 Megapixel haben, wodurch JPEG-Bilder auf eine Größe dekodiert werden können, die ein Sechzehntel der Anzahl von Pixeln aufweist. JPEG-Bilder, die größer als 2 Megapixel sind, werden unterabgetastet, dh auf eine reduzierte Größe dekodiert. JPEG-Subsampling ermöglicht dem Benutzer, Bilder von den neuesten Digitalkameras anzuzeigen.

• Einzelne Ressourcendateien müssen kleiner als 10 MB sein. Diese Beschränkung gilt für HTML-, CSS-, JavaScript- oder nicht-gespeicherte Medien.

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

Answer 2

Basierend auf Ihrem Update würde ich immer noch wirklich empfehlen, diesen Ansatz nicht zu verwenden. Denkst du nicht, dass Googles Bildsuche nicht so funktioniert?

Als solche würde ich empfehlen, Bilder einfach über Ajax wie erforderlich zu laden. (Dh: Wenn der Benutzer unterhalb der aktuell sichtbaren Bilder scrollt.) Während dies mehr Verbindungen benötigt, bedeutet dies, dass Sie Thumbnails in vernünftiger Größe haben können und ein allgemeiner Ansatz viel überschaubarer ist, als wenn Sie pre neu generieren müssen -Generated thumbnail image "Blätter" auf dem back-End, wenn ein neues Bild hinzugefügt wird, usw.