CSS-SPRITE - Pon tus iconos para redes sociales a la máxima velocidad

Antes de utilizar la técnica de css-sprite:

Después de utilizar la técnica de css-sprite:

1.2) Es importante buscar los iconos del tamaño que realmente vamos a utilizar. Como hemos visto en otras entradas de maquetación, el ancho y alto de cualquier objeto que deseemos poner en nuestro blog se mide píxeles (esos pequeños puntos que conforman la imagen que se ve en pantalla). Para este tipo de presentación, las botoneras oscilan en alturas y anchuras de 28x28 hasta 64x64 o lo que nosotros prefiramos. 

• Para ganar en rendimiento es esencial que no "obligues" al navegador a redimensionar el tamaño de los iconos que utilices. Es decir, si te bajas iconos con unas dimensiones de 512x512 píxeles y luego cuando los "dibujas" en HTML pones "size="32", estás obligando al navegador a que "pierda tiempo" en reducir y escalar a la proporción adecuada los 512x512 de la imagen del icono original a los 32 que le pides al navegador que haga.

• Si no quieres "trabajar mucho", busca directamente en Google "iconos redes sociales png 28x28" o el número que desees.

• Si has encontrado unos que te encantan pero no están en el tamaño que deseas, no hay ningún problema, bájate Image Resizer y cambia el tamaño de la imagen:

•  Una vez descargada e instalada la apliación, selecciona la imagen del icono que te has descargado y haz "click derecho". En el menú contextual de Windows dispondrás de una opción en la que pone "Resize pictures", haz click para redimensionar el icono al tamaño deseado.

• Te saldrá un cuadro de diálogo para que pongas el tamaño en píxeles que vas a utilizar (28x28 ó 32x32 ó 64x64...).

• Si eres de los más atrevidos podrás hacerte tus propios iconos o editar los que te bajaste. Basta con utilizar Photoshop o aplicaciones online como http://www.xiconeditor.com/. Cuando lo tengas lo guardas como .png y te sirve exactamente igual que cualquier icono que descargues de Internet.

¿Qué vamos a hacer, qué son los sprites en CSS?

Vamos a crear una imagen "grande" donde irán todos los botones que te hayas descargado. Es decir, en lugar de utilizar una imagen para cada botón, agruparemos todos en una única.

Esa imagen única se solicitará al servidor UNA sola vez, con el consiguiente aumento de rendimiento. Por medio de las hojas de estilo, extraeremos "porciones" de la imagen, una porción por cada imagen de icono social que hayas recuperado.

Esas porciones tienen unas coordenadas en la imagen grande que sirve para indicar dónde se encuentra cada una. Tomaremos cada porción como si fuera "distinta imagen" para dar la impresión al usuario de que estamos utilzando disntintas imágenes.

Conseguiremos disminuir la latencia y la cantidad de peticiones al sevidor porque sólo vamos a trabajar con una imagen y además lo más optimizada posible.

2.1) Conéctate a http://es.spritegen.website-performance.org/ 

2.2) Haz un archivo .zip con todas las imágenes que te has descargado para tus botones. Pon sólo las imágenes de los botones que vayas a utilizar.

2.3) Pulsa "Seleccionar archivo" y sube tu .zip a la herramienta generadora de sprite css. Si tu botonera va a ir en horizontal cambia el desplegable "Alineación del sprite" de "Vertical" a "Horizontal".

2.4) Pulsa el botón del final "Crear imagen y css".

2.5) Te aparecerá la pantalla con todos los datos del sprite y con la imagen montada de todos los botones para descargar.


2.6) En el código "Reglas CSS" está cada porción de la imagen grande con todos los botones generada, que representa a cada botón. La herramienta asociará a cada nombre de imagen que tenías en el .zip la palabra "-sprite" y generará una clase con las reglas de estilo que determinan las coordenadas en la imagen grande donde se encuentra cada imagen pequeña de cada botón.

Por ejemplo, en mi .zip yo subí una imagen que se llamaba "descarga" y otra que se llamaba "GooglePlus512SquareGlossRedCustom", etc... La herramienta ha creado una regla con nombre de clase "sprite-NOMBRE_IMAGEN" con las coordenadas que dicha imagen ocupa en la imagen única creada.



Así pues vemos que de imagen grande "csg-51d9ccc792cc0.png" con todo los botones se divide en:

.sprite-GooglePlus512SquareGlossRedCustom{ background-position: 0 0; width: 28px; height: 28px; } 
.sprite-descarga{ background-position: -56px 0; width: 28px; height: 28px; } 
.sprite-facebook_1Custom{ background-position: -112px 0; width: 28px; height: 28px; } 
.sprite-rss_1Custom{ background-position: -168px 0; width: 28px; height: 28px; } 
.sprite-twitter_1Custom{ background-position: -224px 0; width: 28px; height: 28px; } 

Cada background-position: indica las coordenadas de la imagen donde se encuentra cada botón de cada imagen que subimos en el .zip. Así pues la imagen que tenía de GooglePlus, la herramienta le ha asignado el nombre .sprite-GooglePlus512SquareGlossRedCustom pues se llamaba GooglePlus512SquareGlossRedCustom.png  dentro del .zip subido. Las coordenadas background-position: 0 0 indican que la imagen de Google+ dentro de la imagen con todos los botones se encuentra en la posición 0 0.

2.7) No olvides descargarte la imagen pulsando "Descagar imagen del srpite" y subirla al servidor que prefieras. Sigue estos pasos para hacerlo:

3) Ahora crea en tu hoja de estilos las clases que contendrán la imagen única grande con todos los botones y las coordenadas de dónde se encuentra cada imagen

3.1) Dentro de Blogger, en el menú de la izquierda, dirígete a la opción "Plantilla" y selecciona el botón "Personalizar". He marcado con reborde rojo el botón para personalizar plantilla.

Personalización de Plantilla

3.2) En la página de personalización de plantilla, en el menú superior izquierdo selecciona la opción "Avanzado". La he marcado en naranja en la pantalla inferior.

Pulsamos en Avanzado para editar css

3.3) Al pulsar en avanzado nos aparece la página de personalización avanzada de plantilla. Si bajas el "scroll" del menú que ha salido tras pulsar "Avanzado" te aparecerá una última opción llamada "Añadir .css". Pulsa sobre dicha opción. En la pantalla inferior está marcada en naranja.

Sobreescritura de css

4) Te pongo el ejemplo con mis imágenes:

Me creo el contenedor de la imagen al que llamo "a" con la URL donde he almacenado la imagen que me creó la herramienta generadora de srpites css.

#contenedor a{
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrZprK1cDt_l_1c7eL20H4FwRqeUlL5z0bRwfpDp5F6r57XgbWYTl63zjEh4rvlYTXXHGnoVS1yD0rWC6R7qNBubDVUDJdB2cEHtNRss39GRzYzkmlUV7HAAJV9LEvM0JUlAKvCW-_ng/s1600/csg-51d9ccc792cc0+(1).png') no-repeat top left; position: absolute}

Justo debajo, al contenedor creado con el código anterior, le meto los datos que la herramienta me dió para cada imagen de cada botón dentro de la imagen grande.

#contenedor a.sprite-GooglePlus512SquareGlossRedCustom{ background-position: 0 0; width: 28px; height: 28px; margin: 10; padding: 0;}
#contenedor a.sprite-descarga {background-position: -56px 0; width: 28px; height: 28px; margin-left:26px; border:none; } 
#contenedor a.sprite-facebook_1Custom{ background-position: -112px 0; width: 28px; height: 28px; margin-left:50px; border:none;} 
#contenedor a.sprite-rss_1Custom{ background-position: -168px 0; width: 28px; height: 28px; margin-left:81px; border:none;} 
#contenedor a.sprite-twitter_1Custom{ background-position: -224px 0; width: 28px; height: 28px; margin-left:108px; border:none;} 

#contenedor a. Del contenedor, a cada imagen le pongo los valores que me dió la herramienta.
margin: 10: El primer margin 10 marca la distancia en píxeles desde el cuerpo de la entrada del blog al primer icono.
margin-left:50px: Cada "margin-left" de cada "sprite" indica cuánto a la izquierda debe dibujarse la siguiente "porción" o "sprite" con respecto a la anterior.

Pulsa "Aplicar al Blog" para que la css quede
sobreescrita con tu propio contenido.

4) Ahora queda meter las imágenes que hemos compartido en Drive de los iconos que nos descargamos en los pasos anteriores, dentro del código fuente que te voy a mostrar y dentro de un "Gadget" Blogger de los de tipo "HTML/Javascript":

• Dentro de Blogger, en el menú de la izquierda haz "click" sobre la opción "Diseño"

• A continuación pulsa "Añadir un Gadget" de la zona donde desees y selecciona el Gadget "HTML/Javascript"

• Dentro de la pantalla de configuración del Gadget HTML/Javascript copia y pega el código que te pongo a continuación y luego te explico:

• El código:

<div id="contenedor">
<a class="sprite-GooglePlus512SquareGlossRedCustom" width="28" height="28" href="https://plus.google.com/u/0/107366254177115656174" ></a>,<a class="sprite-descarga" width="28" height="28" href="https://plus.google.com/hangouts/_?gid=454823066861"></a>,<a class="sprite-facebook_1Custom" width="28" height="28" href="">,<a class="sprite-rss_1Custom" width="28" height="28" href="http://feeds.feedburner.com/diariosdelanube"></a>,
<a class="sprite-twitter_1Custom" width="28" height="28" href="https://twitter.com/Diariosdelanube"></a></a></div>

•  Recuerda copiar y pegar el código fuente en la pantalla de configuración del gadget HMTL/Javascript sin que haya retornos de carro (enter) o espacios en blanco añadidos.

• Este código es sencillo y mucho más rápido que cualquier "script" de cualquier añadido que nos bajemos de Internet para dibujarnos los iconos de acceso a las redes sociales:

Referenciando a la hoja de estilo, le pedimos al navegador que dibuje la "porción" correspondiente de la imagen grande:

• <a class="sprite-GooglePlus512SquareGlossRedCustom" width="28" height="28" href="https://plus.google.com/u/0/107366254177115656174" ></a>:Con la clase "a" que creamos en el .css, en el contenedor, decimos que quiero acceder al sprite de GooglePlus512SquareGlossRedCustom. Establezco el width y el height (aunque esto es opcional) y en el  href="https://plus.google.com/u/0/107366254177115656174" > informo de que cuando el usuario pulse sobre ese "sprite", se lance la llamada a Google+".
• Esto mismo se repite con cada imagen que he utilizado dentro de la imagen grande (con cada sprite), pongo en su "href" la llamada a la aplicación de red social que corresponda.