Dimensions maximales de l'image dans un navigateur/spécifications CSS?

Question

Je souhaite afficher une page contenant environ 6000 miniatures d'image (40x40 chacune). Pour éviter de devoir effectuer 6 000 requêtes HTTP, j'explore les sprites CSS, c'est-à-dire en concaténant toutes ces vignettes en une longue bande et en utilisant CSS pour recadrer les images requises. Malheureusement, j'ai découvert que les fichiers JPEG ne peuvent pas être plus grands que 65500 pixels dans une dimension. Méfiez-vous des limites supplémentaires dans la pile web, je me demande: l'un des suivants est incapable de faire face à une image avec des dimensions de 40x240000?

• Internet Explorer
• Opera
• WebKit
• Toute spécification CSS
• Toute spécification HTML
• La spécification PNG

Edit: le but est simplement d'afficher une collection entière d'images à la fois, exigeant que l'utilisateur au maximum doive faire défiler. Je veux que les "mini-vignettes" se déversent dans une mise en page CSS existante, donc je ne peux pas utiliser une grande image rectangulaire. Je ne veux pas que l'utilisateur clique sur plusieurs pages pour tout voir. Le nombre total de pixels n'est pas si élevé - seulement deux fois ce qui pourrait tenir sur un écran 2560x1600. La taille totale des fichiers de toutes les mini-vignettes n'est que de quelques mégaoctets. En supposant que chaque image est manipulée non compressée dans la mémoire du navigateur, en prenant 8 octets de stockage par pixel (RGBA plus facteur de surcharge de 100%), nous parlons de l'utilisation de la RAM dans les centaines de mégaoctets; pas déraisonnable pour une application spécialisée en l'an 2010. La seule chose déraisonnable est le volume de requêtes HTTP qui seraient générées si toutes les mini-vignettes étaient envoyées individuellement.

Answer 1

Eh bien, liste Safari/iOS ces limites:

• la taille maximale pour les fichiers GIF décodée, PNG, et les images TIFF sont de 3 mégapixels. C'est-à-dire, assurez-vous que width * height ≤ 3 * 1024 * 1024. Notez que la taille décodée est beaucoup plus grande que la taille codée d'une image.

• La taille maximale d'image décodée pour JPEG est de 32 mégapixels en utilisant le sous-échantillonnage. Les images JPEG peuvent atteindre 32 mégapixels en raison du sous-échantillonnage, ce qui permet de décoder les images JPEG à une taille se situant au seizième du nombre de pixels. Les images JPEG de plus de 2 mégapixels sont sous-échantillonnées, c'est-à-dire décodées à une taille réduite. Le sous-échantillonnage JPEG permet à l'utilisateur de voir les images des derniers appareils photo numériques.

• Les fichiers de ressources individuels doivent être inférieurs à 10 Mo. Cette limite s'applique aux médias HTML, CSS, JavaScript ou non.

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

Answer 2

Basé sur votre mise à jour, je voudrais encore vraiment recommandons de ne pas utiliser cette approche. Ne pensez-vous pas qu'il y a une raison pour que la recherche d'image de Google ne fonctionne pas comme ça? En tant que tel, je recommande simplement le chargement des images comme nécessaire via Ajax. (c'est-à-dire: lorsque l'utilisateur défile en dessous de l'ensemble d'images actuellement visible.) Bien que cela utilise plus de connexions, cela signifie que vous pouvez avoir des vignettes de taille raisonnable et une approche générale est beaucoup plus gérable. image miniature -generated "feuilles" à l'arrière-plan quand une nouvelle image est ajoutée, etc.