En cuanto a la optimización de la tecnología CSS Sprites, ¿cuánto podemos hacer y cuánto podemos reducir la cantidad de solicitudes? Esto no se puede hacer unilateralmente, todo depende de la cooperación entre las imágenes XHTML, CSS y CSS Sprites. Hasta ahora, no existe un método de optimización absoluta. Es por eso que a menudo mido la relación entre las imágenes CSS Sprites y XHTML en proyectos, como: "Un fondo implementa una cuadrícula adaptable de nueve cuadrículas". optimización de la imagen.
Optimización de imágenes
Para GIF no animados, se recomienda utilizar PNG8 porque también puede lograr el mismo efecto y ahorrar entre un 10% y un 30% del tamaño del archivo.
En comparación con Fireworks, Photoshop exporta imágenes PNG de la misma calidad, pero el tamaño es ligeramente mayor. Aunque Fireworks ha realizado las optimizaciones de compresión correspondientes, no ha logrado la mejor compresión.
El software de diseño que conozco no logra la mejor compresión para procesar imágenes PNG y el tamaño de la imagen todavía tiene una cierta cantidad de espacio de compresión. Puede intentar utilizar la "Herramienta de optimización de imágenes" que se presenta a continuación para lograr una optimización de la compresión sin distorsiones.
En términos de volumen y tamaño de la imagen, se recomienda que el tamaño se mantenga dentro de 100K (que está más en línea con los mejores requisitos de TAMAÑO de las condiciones nacionales) y el tamaño es 800px (el mejor tamaño). (Aprendido de una fuente de personal autorizada, no hay forma de verificar los detalles)
Técnica de corte de imágenes de CSS Sprites
El orden de las imágenes de CSS Sprites y las imágenes combinadas se agregan de arriba a abajo y de izquierda a derecha. La posición de fondo generalmente se coloca mediante una combinación de números, lo que puede reducir los problemas innecesarios causados por el mantenimiento.
No se recomienda mantener un cierto espacio en las imágenes de CSS Sprites porque el tamaño del archivo aumenta y el tamaño del archivo aumenta.
En CSS Sprites, combinar colores cercanos o iguales puede reducir la cantidad de colores, porque el tamaño del archivo de imágenes con una pequeña cantidad de colores será relativamente pequeño.
Hay un gran espacio en las imágenes de CSS Sprites del mismo tamaño, lo que en la mayoría de los casos aumenta el tamaño hasta cierto punto, por lo que las imágenes de CSS Sprites no deberían tener espacios.
Entre las imágenes CSS Sprites del mismo tamaño, las imágenes dispuestas verticalmente tendrán tamaños de archivo más grandes que las imágenes dispuestas horizontalmente. Manifestación
En las imágenes CSS Sprites, las imágenes dispuestas horizontalmente tendrán tamaños de archivo más grandes que las imágenes dispuestas verticalmente. Manifestación
Fusión equitativa de imágenes: al aplicar imágenes CSS Sprites, combine imágenes idénticas de manera adecuada para ahorrar espacio y reducir el volumen. Manifestación
Distinguir imágenes que no necesitan fusionarse: si el usuario actual determina que solo se mostrará un estado o nivel, no es necesario fusionar imágenes de otros niveles o estados. Manifestación
Posición de corte dorada: la posición más flexible en el lado derecho o izquierdo de la imagen de CSS Sprites es la posición más adecuada para colocar el ícono delante del texto, por lo que no será interferido por otras imágenes de CSS Sprites, y existe. no es necesario reservar un determinado ancho de línea.