2011-12-02 19 views
14

Si hay un fondo unidimensional que se repite en una cierta dimensión, ¿hay alguna diferencia que se pueda mencionar en el rendimiento si la imagen es, por ejemplo,? 1px de ancho contra 10 o 20 píxeles de ancho¿Los fondos repetidos en html son más eficientes si son más grandes que 1px?

+0

Buena pregunta. Nunca he usado imágenes de 1px de ancho, y en mi experiencia, el tamaño del archivo no es mucho mayor, así que no veo por qué no debería usar imágenes de 10px. – Gerben

+0

Alguien aquí http://forums.devshed.com/css-help-116/background-repeat-efficiency-276824.html es citado diciendo: –

+4

"Este es un tema que he dado un estudio muy superficial. a considerar es el peso de tara del encabezado de respuesta del servidor y el encabezado de la imagen. Por ejemplo, un jpg 1 × 1 (generado por GIMP) de color sólido # 808080 tiene un tamaño de archivo de 334 bytes. A 200 × 5, el tamaño del archivo es 352 Para un aumento de 18 bytes ((352 + tamaño del encabezado del servidor) ÷ (334 + tamaño del encabezado del servidor) × 100 = porcentaje de aumento en el ancho de banda), la carga de mosaico del cliente se reduce en tres órdenes de magnitud. Mi propia opinión es que no se obtiene un beneficio significativo al reducir el tamaño del archivo de imagen a menos de 1 KB. YMMV ". –

Respuesta

3

Supongo que se refiere a un fondo bidimensional.

No me puedo imaginar que haya una diferencia notable en las computadoras modernas. Sin embargo, dado que el ancho de banda aún es alto, especialmente en dispositivos móviles, creo que sería mejor conservar el ancho de banda repitiendo una imagen de 1px de ancho en lugar de decir 2 o 3 px de ancho.

ACTUALIZACIÓN: acabamos de ejecutar una prueba, no científica, pero sin duda perceptualmente relevante, en la que una página representa un cuadrado verde de 10 px sobre un div cuadrado de 10,000,000 px, y otra página representa un cuadrado verde de 1 px sobre el mismo tamaño div. Todos los estilos están configurados con CSS, ambas páginas no tienen otro contenido. Los gráficos fueron cargados localmente. No hubo absolutamente ninguna diferencia de percepción en el procesamiento en Safari 5 para Mac o FireFox 8 para Mac. Aún así, es posible que haya problemas de rendimiento en ciertos modelos de teléfonos inteligentes más antiguos (crappier).

+0

¡Bienvenido a Stack Overflow Greg! ;) Bueno, por supuesto, todas las imágenes son técnicamente bidimensionales, lo que quise decir con una dimensión es que la imagen solo varía en una dimensión, y por lo tanto el ancho (o la altura) de la otra dimensión es irrelevante. – devios1

0

Probablemente no va a notar la diferencia entre una imagen de fondo de 1px de ancho contra 20px de ancho, aunque habrá una. Es solo la diferencia en el tamaño del archivo que tienes que descargar que verías. Cuanto más grande sea la imagen, mayor será el tamaño del archivo, por lo que la descarga inicial demorará un poco más. Una vez que esté en su lugar, no notará la diferencia de ninguna manera.

Cuestiones relacionadas