Imágenes con CSS Sprites en Blogger

Como usar CSS sprites en las imágenes del blog, para combinarlos con los iconos sociales, el logotipo o cualquier otra imagen, en esta entrada trataremos este tema bastante útil ya que al combinar css sprites en las imágenes mejoramos la velocidad de carga del blog.

¿Para que sirve combinar imágenes con CSS sprites?

Bien cuando tenemos un blog, las imágenes son indispensables, son muy necesarias ya sea para la decoración del blog, un mensaje, un comunicado, redes sociales, entre muchas mas funciones, sabemos que necesitamos mucho el uso de imágenes, pero cuando un blog tiene muchas imágenes tarda mucho en cargar, y la velocidad de un sitio sea blog u otro es muy importante ya que este tiene que cargar una imagen y la otra y la otra....en fin, recuerde que si su blog es muy lento, los usuarios que lo visiten se aburrirán de esperar y se irán, ademas la velocidad es un factor muy importante en el posicionamiento en google, entre otras palabras la velocidad del blog es esencial. Es aquí cuando entra la técnica CSS sprites, la cual nos ayuda a mejorar realmente la carga del blog al combinar todas las imágenes en una sola! por ejemplo mis iconos y mi logotipo están en esta imagen de css-sprites:

¿Porque es tan importantes usar imágenes con CSS sprites en blogger?

Como ya explique en cuanto mas imágenes tenga un blog mas lento. Los factores que asen que las imágenes disminuyan la velocidad de el blog son:

1. El numero de imágenes.
2. La mayoría de imágenes que subimos a blogger no tienen un buen cache y nosotros no podemos especificar el cache (el cache no especificado de las imágenes ralentiza mucho el blog).
3. E servidor en donde se subieron las imágenes (cuando tenemos un blog las imágenes se almacenan el  los albumnes web de picasa, la mas recomendable) 
4. El tamaño de la imagen.
5. Especificar el tamaño de la imagen (cuando subimos una imagen es recomendable definir el tamaño original, y no reducirla o aumentarla) 

Entonces, si tuviéramos por ejemplo 9 imágenes en el blog, que forman los iconos sociales, el titulo etc, los problemas mas comunes serian los siguientes:

1. El blog cargara 9 imágenes cada una por separado.
2. A cada una hay que especificarles el cache (no se puede)(muchos caches, 9).
3. Especificar tamaño de la imagen.
4. Combinar imágenes con css-sprites.
5. Optimizar imágenes, (el peso de cada una).
6. Tarda mas la carga del blog.

Esto haría que la carga del blog fuera mas lenta, en cambio si combináramos CSS sprite con las imágenes del blog, estos seria los resultados:

1. Se cargara una sola imagen 
2. No es necesario especificar el cache.
3. No necesita especificar tamaño.
4. La carga del blog aumenta considerablemente! 

¿Como usar css sprites en la imágenes de mi blog?

Bien la técnica css sprites es un poco complicada de entender al principio, pero te explicare de la forma mas fácil posible, ok? comencemos! tengo 2 formas hice 2 vídeos y también de forma escrita para explicar como combinar imágenes con css sprites.

En vídeos

Vídeo: CSS sprites en imágenes de blogger

Forma escrita

recomiendo usar las 2 formas para entender mas este tema. Primero identifica las imágenes en las quieres aplicar esta técnica, una sugerencia: fíjate en las imágenes de iconos sociales, el logo del blog o pagina, imágenes que estén en el pie de pagina (en la parte de abajo del blog) en fin todas esas imágenes que consideres para unirlas, una ves que las tengamos tenemos que unirlas, hay 2 formas

1 Usando un programa (por ejemplo photoshop) o online como Pixlr para unir las imágenes a mano (Recomendado)
2 Usando un servicio que las una un generador de css sprites.

Yo prefiero usar la primera opción para acomodar mis imágenes a mi manera, solo tienes que ir acomodando las imágenes al lado de la otra y recuerda que el chiste es ocupar todo el espacio posible en esa imagen, como se muestra en la imagen de arriba. Para mas comodidad y manejo lo haremos de las 2 formas. Sigue detenidamente los pasos, el paso A es para usar la primera opción, el paso B es para usar la segunda opción, el paso C continua de forma general.

A)  Esta forma es la de la opción uno, si quieres usar la opción 2 salta este paso y ve a la opción B.
ingresa a un programa o al servicio de edición online pixlr, el objetivo es ir acomodando una imagen al lado de la otra como se ve en el vídeo. una ves que tenga la imagen lista sigue con el paso C.

B)  Primero selecciona la muestra que hay y da en Clear para borrarla, en Open escoja todas las imágenes que usaras, luego puedes ver un cuadro con opciones, aquí puedes elegir si la imagen final sera vertical o horizontal y cuanto espacio hay de una a otra, una vez que tengas lista la imagen da en Download y descarga con la opción Spritesheet.

C) Ahora que tienes tu imagen con las imágenes dentro podemos continuar, sube tu imagen a blogger, elige la opción tamaño original, da click derecho sobre la imagen y da en copiar URL de imagen (la necesitaremos) ingresa a plantilla - personalizar - avanzado y añadir css, en añadir css pega este código:

#css-sprite a{
top:70px;
left:40px;
background:url('URL de la imagen css sprite') no-repeat;position:absolute}

En la parte de color  verde pega la url de la imagen que copiamos anteriormente, y da en guardar plantilla. Con eso ya habremos introducido la imagen de css sprite.

D) Bien ahora vamos a diseño y agregamos un gadget de HTML/Javascript, en el pega este código

<div id="css-sprite">
aquí los códigos
</div>

con ese código estoy convocando  la imagen que esta en el css sprites, ahora por cada imagen que queramos mostrar tendremos que agregar un código como este en donde dice "aquí los códigos"

<a class="sprite-GooglePlus" href="https://plus.google.com/117682146618759000308"

target="_blank" title="sígueme en google+"></a>

Bien ahora déjame explicarte cada parte de ese código:

• Lo de color verde es un nombre único que debemos colocar para identificar la imagen, por ejemplo: primero quiero colocar el icono de google+ entonces el nombre que le puse fue "Googleplus".
• Lo de color azul es la url que abrirá, como es del icono de google coloque la url asía mi perfil de google plus, si no quieres que abra una url elimina desde href hasta blank".

• La parte en color violeta es el texto que mostrara al colocar el mouse o ratón sobre la imagen, en este caso coloque "sígueme en google+".

Recuerda que por cada imagen que quieras agregar deberás poner un código como ese, Ejemplo si quiero colocar el icono de facebook agrego un código como ese justo al lado del otro y cambio los valores Googleplus por facebook - la URL hacía mi pagina de facebook - y sígueme en google por sígueme en facebook y me quedaría así:

<div id="css-sprite">
<a class="sprite-GooglePlus" href="https://plus.google.com/117682146618759000308"
target="_blank" title="sigueme en google+"></a>
<a class="sprite-facebook"  href="http://www.facebook.com/BitacoraDelManzano"
target="_blank" title="sigueme en facebook"></a>
</div>

E) Una vez colocados estos códigos las imágenes no aparecerán, para que aparezcan vamos a diseño, luego en personalizar, Opciones avanzadas y añadir css, y para cada imagen al igual que el código anterior debemos agregar un código css, primero sacare el de google+ este es el css:

#css-sprite a.sprite-Googleplus{background-position:-278px -1px;width:32px;height:32px;margin-left:0px;border:0}

Una vez agregado este código deberá aparecer el icono de google+ de la imagen css sprites.

1. Lo que esta en color verde es el nombre único que le asignamos al icono de google+, este debe ser el mismo. 
2. Lo de color rojo es para correr la imagen es decir, para hallar la posición del icono de google en toda la imagen del sprite, en el vídeo se explica de forma mas clara y ven como funciona, el primer valor (-278px) es para mover la imagen asía los lados y el otro valor (-1px) es para mover el sprite de arriba a abajo.
3. Lo que esta en color azul es el ancho y la altura de la imagen, Ejemplo el icono de google mide 32x32, dependiendo de la imagen deberás especificar el tamaño.

Y así sucesivamente se van añadiendo los códigos, ahora el siguiente icono es el de facebook, el código para que aparezca es este:

#css-sprite a.sprite-facebook{background-position:-310px 0px;
width:32px;height:32px;margin-left:40px;border:0}

Como en el código anterior  esta el nombre exacto que le asignamos, como el icono de facebook esta al lado del de google en la imagen de css sprites entonces se aumenta el valor (-310px) para ubicarlo, un dato interesante es que la parte de color violeta en el código de google es cero, pero en este es de 40 ¿porque? esa es la cantidad para correr la imagen al lado de la otra me explico, si lo colocara en cero la imagen de facebook aparecería encima de la de google, entonces este valor es para separar un icono del otro.

Así sucesivamente vas agregando los códigos para que parezcan.


F) Vamos a poner una de las imágenes que esta en el css sprites de otra forma, voy a poner la imagen del logo, este seria el código:

<a class="sprite-bitacoram"  href="http://bitacoramanzano.blogspot.com/"
  title="Bitacora del Manzano"></a>

y para que aparezca, en el diseñador de plantillas coloco este css:

#css-sprite a.sprite-bitacoram{background-position:-209px 1px;
width:69px;height:80px;margin-left:-390px;margin-top:-280px;padding:0}

• Como pueden ver tiene el nombre único el cual es "bitacoram".
• Como la imagen es mas grande especifico su tamaño.
• Como es el logo estará bastante lejos de las demás imágenes por eso tiene un valor mas alto (-390px).
• A diferencia de los demás códigos, este tiene un código extra, el que esta en color rojo este es para correr la imagen de arriba a abajo.

Si quieres que una de tus imágenes suba puedes agregar ese código a los demás o mas recomendable en el paso C, el valor top: 70 y left: 40 lo pueden cambiar (esto ara que se corran todas la imágenes)

Espero te haya servido esta guía para usar imágenes con CSS sprites en blogger.