La idea consiste en agrupar todas las imagenes que tengan un tamaño parecido, para reducir el número de llamadas HTTP.

Por ejemplo, los iconos de la siguiente imagen tienen un tamaño aproximado de 16×16 pixeles:

Código CSS:

#primer_icono{
background:url(grupo_iconos.png) no-repeat scroll 0 0;
}
#segundo_icono{
background:url(grupo_iconos.png) no-repeat scroll 0 -16px;
}
#tercer_icono{
background:url(grupo_iconos.png) no-repeat scroll 0 -32px;
}

Código HTML:

<img src=”imagen_transparente.gif” id=”primer_icono”/>
<img src=”imagen_transparente.gif” id=”segundo_icono”/>
<img src=”imagen_transparente.gif” id=”tercer_icono”/>

Resultado:

Lo podéis ver en GoTube

Descargar ejemplo:

Curiosidad:

Puede que con este ejemplo al tener pocos iconos no se noté la diferencia en el tiempo de carga, el ejemplo es para enseñar la técnica, pero si se nota con agrupaciones de muchos iconos.

La siguiente imagen se usa en GoTube:

La mayoría de veces, nos gustaría evitar que roben ciertas partes de nuestro diseño, especialmente las imagenes (ej. logotipos)

A continuación podrás ver la parte técnica, pero si prefieres ir al grano, al final de este tutorial encontrarás un ejemplo para descargar.

Demostración:

Intenta hacer “guardar imagen como” en el logotipo de viciao2k3

Imagen normal:

Código HTML:

<img src=”directorio/imagen.gif”>

Imagen protegida:

Código HTML:

<img src=”directorio/blank.gif” id=”imagen” height=”100″ width=”100″>

Nota: para que se muestre la imagen completamente es importante definir la altura y la anchura de la imagen

Código CSS:

#imagen{background:url(’directorio/imagen.gif ‘)}

¡ Nada más !

¿Como aplicarlo en wordpress?

La imagen que quieras proteger y la transparente, tienen que estar en el directorio:
/wp-content/themes/tu_theme_activo/images/

Código CSS:

#imagen{background:url(’images/imagen.gif ‘)}

Copia el código anterior en la hoja de estilos:

/wp-content/themes/tu_theme_activo/style.css

Modifica el código HTML de tu theme:

<img src=”/wp-content/themes/tu_theme_activo/images/imagen.gif”>

Por:

<img src=”/wp-content/themes/tu_theme_activo/images/blank.gif” id=”imagen” height=”100″ width=”100″>

Notas:

1. Si quieres proteger varias imagenes no repitas el mismo id.
2. Especifica la altura (height) y la anchura (width) de la imagen a proteger en la etiqueta <img
3. Si tu blog esta alojado en un sub-directorio (ej. www.viciao2k3.net/blog ), tendrás que poner:
   <img src=”/blog/wp-content/themes/tu_theme_activo/images/blank.gif” id=”imagen” height=”100″ width=”100″>

Nota: es muy importante enlazar bien la imagen, si introduces una dirección errónea la página tardará más en cargar

Como todo, tiene su parte buena y mala:

• La buena:
  Cuando intenten hacer “guardar imagen como…” se descargaran la imagen transparente
• La mala:
  Es posible que los buscadores indexen la imagen transparente

Descargar ejemplo:

Si al validar tu CSS te sale esto:
"Color de primer plano y color de fondo iguales en dos contextos"

añade a la clase que falla:

puede que sea una chapucilla, pero ahora ya no tengo advertencias

¿te gustan las fuentes pixeladas?
¿pensabas que no habia algo mas pequeño en css que font-size:xx-small ?

copia la siguiente classe en tu fichero de estilo css:
.pixelfont{font-family:small fonts; font-size: 7px; letter-spacing: 0px; line-height: 10px;text-transform: uppercase;}

texto plano:

ejemplo:
el veloz murciélago hindú comia feliz cardillo y kiwi