Sitio con muchos gráficos Sprite/PNG, ¡Dios mío!

Question

Necesito crear un sitio que tenga muchos gráficos (fondos de papel rasgado con sombras transparentes sobre gráficos texturizados, etc.). Una forma en la que estaba pensando en ahorrar en el tamaño del archivo era colocar todos los elementos de mi fondo en un PNG.El problema es que este archivo ahora tiene 180k.Si lo divido en varios GIF y un par de PNG, estaría más cerca de 70k.

¿Realmente importa?¿Qué es "demasiado grande" hoy en día para el tamaño de un archivo?¿Alguien se dará cuenta si el archivo es de 180 o 70k?

Answer 1

Si los usuarios tienen acceso rápido a su sitio (como, en una intranet), 180k no es un problema. Si, por el contrario, el sitio es utilizado por el genérico persona mayor con una conexión lenta Con humor, que probablemente va a ser un problema. Si los usuarios utilizar GPRS, pero tienen una paciencia infinita, es probable que no va a ser un problema. Si el sitio ofrece un millón de dólares a quien tenga la paciencia para esperar a que el tiempo de carga, la velocidad de transferencia no son un problema. Y así sucesivamente.

Lo que quiero decir, que realmente depende de sus necesidades y limitaciones. Para ello es necesario que sepas (y, posteriormente, nos dicen, para que seamos más útiles) muchas cosas antes de que pueda conseguirlo cerrar a derecha.

Para evitar esos molestos para downvotes muy válidos-respuestas-pero-simplemente-Indiferente-favor-alguien, aquí está mi respuesta:

180k dividido por una velocidad de módem ADSL estándar de transferencia = 180KB / 100 kB / s = 1.8s = soportable.

Answer 2

¿Hay una razón no para utilizar las imágenes más pequeñas? Parece que ya se ha roto para arriba, ¿por qué no vas con el método más pequeño, más rápido?

Desde un punto de vista puramente relativista, 70k tendrá sólo el 38% del tiempo de descarga que lo haría 180k (aproximadamente). Si usted está esperando un alto tráfico o desea tiempos de carga rápidos, cada poco ayuda.

Answer 3

Hay que comparar el tiempo que se necesita para solicitar todas las imágenes separadas y el tiempo que se tarda en descargar el uno grande. El problema es con las peticiones HTTP.

Le sugiero que hacer algunas pruebas con extensión Firefox de Google, Pagespeed para ver si hay una gran diferencia entre la gran png o los juegos independientes.

Uno de los beneficios que se me ocurre, además de un menor número de peticiones HTTP es que su sitio se carga a la vez en lugar de gradualmente a medida que se descargan todos los gráficos. sin embargo, la línea de fondo, como dijo Henrik es que depende de sus necesidades.

Answer 4

Estoy seguro de que está consciente de que la división en varias imágenes significa conexiones adicionales al servidor para recuperarlos, con un desfase asociado en cada uno, y el tamaño adicional de las cabeceras de petición y respuesta.

Dado que los navegadores limitan el número de conexiones activas para cada servidor (versión del navegador dependiente) esto puede acabar teniendo más tiempo que la recuperación de una sola imagen. La solución habitual para levantar el límite es usar una por separado "imágenes" del servidor, o un alias de DNS que se asigna a la misma máquina.

Y a menos que requiera la animación, siempre recomiendo PNG sobre GIF.

Answer 5

Asegúrese de que el sitio se ve muy bien con las imágenes desactivadas primero (por lo que las etiquetas alt, anchura y altura, establecer colores correctos utilizados) y luego se separaron las imágenes basadas en grupos. Grupo de todos los botones en una sola imagen, si es posible (el uso de hojas de sprites CSS), y todas las fronteras en otro. Mantener grandes imágenes en archivos separados (por lo que el fondo del sitio, cabeceras).

Los más imágenes tenga, más el navegador puede paralelizar las peticiones. Sin embargo, si se separaron demasiado, entonces diferentes imágenes se cargarán en diferentes momentos, por lo que las partes del pop sitio en Es un poco de una solución de compromiso, pero esa es la alegría de la programación:.)

El mejor su sitio se ve antes de que las imágenes son visibles, al menos, el usuario cuenta la velocidad de descarga de las imágenes.