Siempre es interesante analizar las páginas web de los grandes en la RED como yo lo hice con Youtube, y me di cuenta de algo importante, que usan los interesantes CSS Sprites!.

Los Sprites con un conjunto de imagenes contenidas en una sola, con la finalidad de ahorrar el tiempo de carga de una web haciendo que exista solo una consulta de carga para cargar una imagen y no generar varias consultas cargando varias imagenes, en el caso de Youtube el Sprite es este:

Como ven carga todas las imagenes en un solo PNG y asi hace menos consultas al servidor y hace que la página cargue más rápido.

Ahora bien los “CSS Sprites” son las llamadas en CSS a cada imagen, y esto se lo hace con puro BACKGROUNDS, más especificamente se los hace con Background-Position, y generalmente se veran valores negativos o positivos según este ubicada la imagen en las coordenadas X y Y.

Ej., en Youtube para mostrar el Logo lo hace de la siguiente forma:

HTML

<div id="masthead-container">
      <div dir="ltr" class="" id="masthead">
          <a title="Página principal de YouTube" href="/">
              <img alt="Página principal de YouTube" src="//s.ytimg.com/yt/img/pixel-vfl3z5WfW.gif" class="master-sprite" id="logo">
          </a>
      </div>
</div>

CSS:

#logo {
    background-position: 0 -641px;
    display: block;
    float: left;
    height: 40px;
    margin: 0 10px 0 0;
    width: 110px;
}
www-co...mpq.css (línea 1)
.master-sprite, img.master-sprite, .master-sprite img {
    background-attachment: scroll;
    background-color: transparent;
    background-image: url("//s.ytimg.com/yt/img/master-vflosdRMg.png");
    background-repeat: repeat-x;
    border: 0 none;
    cursor: pointer;
    padding: 0;
    vertical-align: middle;
}

Como ven usa el “background-position: 0 -641px;” para acomodar la imagen Sprite que posteriormente la llama.

Realmente es un metodo muy bueno, que hasta yo mismo lo estoy usando en el nuevo Theme para este sitio que ya lo pondre Online, hacerlo no es tan complicao una ves que esta ubicado con la posicion de las imagenes, ahora también en Internet existen herramientas online para crear estos “CSS Spriter” y hacernos la vida mas sencilla como esta:

Spritebox, que tiene una interface bastante sencilla y unas buenas herramientas para lograr coordenajdas justas y faciles.

Ya pronto verán el Nuevo diseño del Theme con esta técnica.