Ahora estas en: Inicio > Blog Tamaño óptimo de imagen mosaico de fondo en CSS » El Blog DWQ

Tamaño óptimo de imagen mosaico de fondo en CSS 9 febrero 2011

En el diseño de páginas web es común utilizar imágenes de fondo que se repiten, a esto se le conoce como “enlosar” y se refiere a la utilización de un “mosaico” (imagen de fondo CSS) que se repite en la dirección X y/o Y para llenar una página o elemento (en inglés lo denominan “tiling”), esa imagen es como una loseta o mosaico y puede tener varios tamaños, generalmente se tratar de que sea lo más pequeña posible para reducir al mínimo el tiempo de carga de la página. Esto no es nuevo a los diseñadores, pero… ¿cuál es el tamaño mínimo que se debe emplear para estas imágenes?

Acabo de leer un artículo publicado recientemente que podría ser una respuesta (con ciertas reservas) a esta pregunta comentando lo siguiente.

“La descarga más pequeña que los navegadores pueden hacer en bytes es de 1K, por lo que el mejor tamaño para el archivo de imagen del enlosado que se puede hacer para tener menos de 1K en tamaño es lo más cerca posible de 1K sin pasarse. Esto puede reducir significativamente la cantidad de mosaicos que los navegadores deben reproducir, lo que mejora el rendimiento de carga de la página.

Pongamos por caso una imagen de 1×1px frente a una equivalente de 10×10px. El tamaño de ambas imágenes se encuentra en 1K, por lo que el tiempo de descarga es el mismo, pero la imagen más pequeña requiere de hasta 100 veces más mosaicos que la imagen más grande, lo que lleva más tiempo para reproducción.”

No queda muy claro de dónde saca la información del tamaño de 1K, pero se puede realizar el siguiente experimento:

Mosaico mínimo y máximo

En éste ejemplo tenemos que el tamaño mínimo de mosaico es de 5 x 5 px a 175 bytes y el tamaño máximo de mosaico antes de sobrepasar el 1K es de 1280 x 640 px a 952 bytes, es decir, 32800 mosaicos de diferencia ¿Influirá realmente en el tiempo de carga de la página?

una página de prueba con el mosaico de 5 x 5 px a 175 bytes en:
Resultados de la carga de página con un mosaico de 5 x 5 px.

Observando que nos da un tiempo total de carga de la página de: 0.8 segundos

Ahora creamos otra página de prueba con el mosaico de 1280 x 640 px a 952 bytes en:
Resultados de la carga de página con un Mosaico 1280 x 640px.

Observando que nos da un tiempo total de carga de la página de: 0.6 segundos

Por lo menos con esta pequeña prueba podríamos concluir que el artículo es muy acertado en cuanto a que reproducir mayor número de mosaicos implica un aumento en el tiempo de carga.

Este argumento también se aplica a imágenes que no son de mosaicos, pero los que fácilmente se pueden combinar en un solo archivo utilizando la técnica de CSS Sprite.

Referencias

Publicado en: CSS por David Gómez Becerril / Etiquetas: ,

Escribe tus comentarios

« »