Una técnica que aprendido cuando he hecho php ftp light, ha sido la de inscrustar las imagenes en el HTML para tener el script y las imagenes en un sólo fichero.

Para eso tenemos primero tenemos que codificar el contenido de la imagen a base64, por ejemplo:

echo base64_encode( file_get_contents( ‘imagen.png’ ) );

Luego para mostrar la imagen codificada tenemos las siguientes maneras:

CSS:

background-image:url(data:image/png;base64,–contenido_imagen_codificado_base64)

IMG:

<img src=”data:image/png;base64,–contenido_imagen_codificado_base64“>

Hace ya un tiempo comenté una técnica para acelerar la carga de una web uniendo todas las imagenes (iconos) del sitio en una sola imagen.

Esta técnica se usa en muchos sitios como por ejemplo:

• Facebook
• Flickr
• Youtube
• Linkedin
• Tuenti
• 11870
• Google

1. Remplazar estilos base:
   empezando por elementos de fuera hacía dentro del body
   * {
   font-family:verdana;
   font-size:11px;
   }

   BODY {
   background:#E2EBF5;
   margin:0;
   }

   IMG {
   vertical-align:middle;
   }

2. Atajos:
   .floatR {
   float:right;
   }

   .floatL {
   float:left;
   }

   .clear {
   clear:both;
   }

3. Clases del layout ( del diseño ):
   • contenedor global
   • header
   • navegación
   • contenido
   • footer
4. Por último el resto de clases:
   y si puede ser mejor agrupadas por bloques
   • /* formularios */
   • /* pestañas */

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: