Imágenes embebidas en el código HTML, CSS o JSON

Sun, 06 Mar 2011 18:34:00 +0100

Mediante esquema data:URI se pueden incluir imágenes codificadas en base64 en el CSS de una página o en el src de una etiqueta img como si fueran fuentes externas. También se pueden introducir otro tipo de datos, como por ejemplo, código HTML.

<img src="data:image/png;base64,iVBORw0KGgo[...]QmCC" title="image" alt="image" />

También se puede utilizar en un JSON:

{
"image":{
"data_uri":"data:image/png;base64,iVBORw0KGgo[...]QmCC"
}
}

Las ventajas de utilizar este método son que no se necesitan abrir conexiones adicionales para decargar los datos, ya que toda la información está incluida en el propio archivo, con lo que dejan recursos disponibles, algo que puede ser especialmente útil en redes inalámbricas muy saturadas o lentas, como algunas redes de telefonía móvil, y se crean menos entradas en la caché del navegador. Además, al estar incluidos en el código se pueden cachear.

urlencode y urldecode

Sun, 06 Mar 2011 17:45:00 +0100

Los siguientes caracteres son los únicos que se pueden utilizar en una URL:

[a-zA-Z0-9-._~]

El resto, se deben codificar usando el prefijo % seguido del valor ASCII hexadecimal del carácter. Por ejemplo:

( = %28
) = %29
/ = %2F
+ = %2B
...

Para codificar la URL podemos utilizar la función uri_escape del módulo URI de Perl.

alias urlenc='furlenc() { perl -MURI::Escape -e "print uri_escape(\"$1\").\"\n\";"; }; furlenc'

$ urlenc http://www.google.com
http%3A%2F%2Fwww.google.com

Para la decodificación de la URL, podemos hacer uso de sed:

Urlenc on Karpoke - Just Another Blog

Imágenes embebidas en el código HTML, CSS o JSON

urlencode y urldecode