Tamaño óptimo de las imágenes de fondo en mosaico CSS

A menudo se afirma que al embaldosar el fondo de una página web con imagen de fondo, ese rendimiento es mejor con una imagen de mayores dimensiones debido a que debe ser mosaico con menos frecuencia. Durante un tiempo les he estado haciendo 8x8 px o múltiplos de 8.Tamaño óptimo de las imágenes de fondo en mosaico CSS

Pero, ¿alguien tiene enlaces a datos que prueben que este es el caso en una variedad de navegadores, teniendo en cuenta los tiempos de procesamiento o carga de la CPU en varios puntos de representación de la página?

Fuente

2011-02-08 Andy Hume

Esto variará enormemente entre los navegadores. Tal vez agregue cuáles le interesan más –

Los más interesados en IE 8/9, y las últimas versiones de Firefox/Safari/Chome/Opera. –

No creo que haya un "tamaño óptimo", pero la opinión general es que las dimensiones más grandes son mejores que las pequeñas: vea this question y this one too.

Fuente

2011-02-08 12:08:17 Kyle

Claro, soy consciente de que es la opinión general. Y estoy seguro de que es verdad también. Lo que busco específicamente son datos y ejemplos que lo prueben. –

me imagino que importa muy poco en estos navegadores modernos que enumeró en su comentario:

IE 8/9, y las últimas versiones de Firefox /Safari/Chome/Opera

sin embargo, he oído a un error en IE8 cuando se trata de una imagen de exactamente el tamaño 1px * 1px:

Internet Explorer 8 no realiza la repetición de un píxel 1x1 imagen fondo semitransparente correctamente cuando cualquier otro elemento en la página está utilizando el "-ms-filtro" drective para la transparencia alfa:

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

Ver: http://nemesisdesign.net/blog/coding/ie8-1x1px-semi-transparent-background-bug/
y la demo: http://static.nemesisdesign.net/demos/ie9-1x1px-semi-transparent-background/

Por lo tanto, parece como 8x8 un tamaño lo suficientemente bueno para su uso. Me sorprendería que alguien en Internets se haya preocupado lo suficiente por esto para compararlo rigurosamente.

encontré esto, que trata sobre el tema:
http://blogs.adobe.com/dreamweaver/2011/02/optimal-css-tiled-background-image-size.html

Asegúrese de leer también los comentarios.

Para resumir, voy a citar a mí mismo desde hace meses:

me imagino que importa muy poco en [la] navegadores modernos [es decir, 8/9 y versiones más recientes de Firefox/Safari/Chome/Opera] enumeró en su comentario.

Fuente

2011-02-08 12:18:20 thirtydot

"La descarga más pequeña que los navegadores pueden hacer es 1K bytes". Parece una manera completamente incorrecta de explicar eso.¿Quiere decir, intente mantenerlo por debajo de 1 KB para evitar que se envíen varios paquetes? ESTO tiene sentido, pero la forma en que lo ha escrito suena como si el navegador siempre descargara 1k para cualquier tamaño de respuesta. Eso no puede ser cierto, seguramente? –

Esa frase en particular está mal redactada: lo que se quiere decir es que si descargas una imagen de 200 bytes, aún tardará una cantidad de tiempo casi idéntica a una imagen de 1 KB, porque aún tardará un paquete en enviarse. Proporcioné una versión más agradable de esa redacción, expresando la intención detrás de ella (ver el enlace MTU). – thirtydot

Un pensamiento interesante, pero esa no es la forma en que funciona. Los paquetes no se rellenan con el tamaño de MTU ni nada ... es la unidad de transferencia * máxima *, no mínima. No es como almacenar archivos en un disco duro, ocupando un mínimo de 4096 bytes, sin importar cuán pequeño sea. Más corto aún es mejor, en lo que respecta al tiempo de transmisión, aunque el costo marginal de un segundo paquete es mucho mayor que el costo marginal de un byte adicional en el primer paquete. Sin embargo, al OP no le interesaba la transferencia de datos, solo la velocidad de procesamiento (aparentemente). –

En algunos clientes de correo electrónico, la imagen no se repetirá a menos que la imagen de fondo sea al menos 25X25, por lo que me he decidido por mi tamaño predeterminado.

Fuente

2011-03-29 01:26:59 peer1sucksbigones

Tamaño óptimo de las imágenes de fondo en mosaico CSS

Respuesta

Cuestiones relacionadas