css sprites - logo - Dimensiones máximas de la imagen en un navegador/CSS especificación?
sprites png (2)
Quiero mostrar una página que contiene aproximadamente 6000 miniaturas de imágenes pequeñas (40x40 cada una). Para evitar tener que realizar 6000 solicitudes HTTP, estoy explorando sprites CSS, es decir, concatenando todas estas miniaturas en una tira larga y utilizando CSS para recortar las imágenes requeridas. Desafortunadamente, he descubierto que los archivos JPEG no pueden tener más de 65500 píxeles en ninguna dimensión. Ante cualquier límite en la pila web, me pregunto: ¿alguno de los siguientes no puede hacer frente a una imagen con dimensiones de 40x240000?
- explorador de Internet
- Ópera
- WebKit
- Cualquier especificación de CSS
- Cualquier especificación de HTML
- La especificación de PNG
Editar: el propósito de esto es simplemente mostrar una colección de imágenes completa a la vez, lo que requiere que el usuario como máximo tenga que desplazarse. Quiero que las "miniaturas en miniatura" fluyan a un diseño CSS existente, por lo que no puedo usar una imagen rectangular grande. No quiero que el usuario tenga que hacer clic en varias páginas para ver todo. El número total de píxeles no es tan bueno, solo el doble de lo que cabría en una pantalla de 2560x1600. El tamaño total del archivo de todas las miniaturas en miniatura es solo un par de megabytes. Suponiendo que todas las imágenes se manipulen sin comprimir en la memoria del navegador, teniendo 8 bytes de almacenamiento por píxel (RGBA más el 100% del factor de sobrecarga), estamos hablando de uso de RAM en los cientos de megabytes bajos; No es irrazonable para una aplicación especializada en el año 2010. Lo único irrazonable es el volumen de solicitudes HTTP que se generarían si todas las miniaturas de miniaturas se enviaran individualmente.
Basado en su actualización, todavía realmente recomiendo no usar este enfoque. ¿No crees que hay una razón por la que la búsqueda de imágenes de Google no funciona así?
Como tal, recomendaría simplemente cargar las imágenes según sea necesario a través de Ajax. (es decir, cuando el usuario se desplaza por debajo del conjunto de imágenes actualmente visibles). Si bien esto utilizará más conexiones, significará que puede tener miniaturas de tamaño razonable y, como enfoque general, es mucho más manejable que tener que volver a generar pre - "hojas" de imágenes en miniatura generadas en el back-end cuando se agrega una nueva imagen, etc.
Bueno, Safari / iOS enumera estos límites:
El tamaño máximo para imágenes GIF, PNG y TIFF descodificadas es de 3 megapíxeles. Es decir, asegúrese de que ancho * alto ≤ 3 * 1024 * 1024. Tenga en cuenta que el tamaño descodificado es mucho más grande que el tamaño codificado de una imagen.
El tamaño máximo de la imagen decodificada para JPEG es de 32 megapíxeles con submuestreo. Las imágenes JPEG pueden ser de hasta 32 megapíxeles debido al submuestreo, lo que permite que las imágenes JPEG se decodifiquen a un tamaño que tenga un décimo sexto del número de píxeles. Las imágenes JPEG de más de 2 megapíxeles se submuestrean, es decir, se descodifican a un tamaño reducido. El submuestreo JPEG permite al usuario ver imágenes de las últimas cámaras digitales.
Los archivos de recursos individuales deben tener menos de 10 MB. Este límite se aplica a HTML, CSS, JavaScript o medios no transmitidos.