Siguiendo con el asunto de optimizar la página y con el objetivo de reducir el número de llamadas, he insertado algunas imágenes directamente en el código CSS.

Ciertamente esto aumentará el tamaño de nuestro CSS, pero si se trata de imágenes que aparece en todas las páginas, esto no debería preocuparnos, siempre y cuando tengamos la precaución de optimizarlas.

Con ello, a continuación, puedes leer como conseguir insertar tus imágenes en código css.

Imágenes en CSS. Como hacerlo.

Antes de nada, el primer paso, es realizar una optimización de la imagen, y la mejor forma de hacerlo es utilizar las herramientas Gimp nos pone a su disposición, tal y como expliqué en el artículo “Optimizando imágenes para la Web con GIMP. Siguiendo los pasos indicados en el mencionado artículo, y dependiendo de la calidad que quieras para la imagen, puedes obtener resultados realmente sorprendentes. Por ejemplo para el logo que aparece en la web, y pasado de 17,1kB a 3,7 kB, y esto ya lo dice todo.

Una vez ya tenemos codificada nuestra imagen, el siguiente paso consiste en obtener la imagen cifrada en base 64. Aunque existen servicios en internet que te permiten realizar esta operación, si dispones de Ubuntu, al igual que sucede en la mayoría de distribuciones, dispones de una herramienta base64 que te permitirá realizar esta operación.

El problema es que esta herramienta te devuelve el resultado en varias líneas, y a nosotros nos interesa una sola línea. Por esta razón, he implementado un sencillo script que nos devuelve exactamente lo que necesitamos en un sencillo archivo con extensión .b64, con lo que solo tendremos que abrirlo y copiarlo donde lo necesitemos.

El código del script es el siguiente,

1
2
3
4
5
6
7
8

#!/bin/bash
filename=$(basename "$1")
extension="${filename##*.}"
filename="${filename%.*}"
outputfile="$filename.b64"
inicial=$(base64 $1)
output="$(echo -e "${inicial}" | tr -d '[[:space:]]')"
echo $output > $outputfile

Pero si además queremos copiarlo directamente el portapapeles del sistema, solo tenemos que instalar una sencilla aplicación que se encuentra en los repositorios oficiales de Ubuntu

sudo apt-get install xclip

Una vez instalada la aplicación, nuestro script pasará a ser el siguiente,

1
2
3
4
5
6
7
8
9

#!/bin/bash
filename=$(basename "$1")
extension="${filename##*.}"
filename="${filename%.*}"
outputfile="$filename.b64"
inicial=$(base64 $1)
output="$(echo -e "${inicial}" | tr -d '[[:space:]]')"
echo $output > $outputfile
cat $outputfile | xclip -selection clipboard

Una vez tenemos nuestro script, le tenemos que dar permisos de ejecución, por ejemplo, si le hemos llamado tob64.sh, ejecutaremos la siguiente orden en un emulador de terminal,

sudo chmod +x tob64.sh

Uso y disfrute

Una vez tememos nuestro script, general el código base 64 de una imagen será tan sencillo como ejecutar la siguiente orden,

tob64.sh miimagen.png

Una vez tenemos la imagen en base 64, la podemos insertar en nuestro archivo css, con el siguiente formato,

background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFgAAAAfCAMAAABUFvrSAAAAY1BMVEUAAAAAAQAOEAwaHBkiHx4oKScvMS5AQT5PUU5gYV5vcG56fHmAgX+MioqRlZKcl5aglpyfoZ6wq6mrsaevsa6tt7K+uLezvbi/wb65w77Gx8TMzsvS09De4N3k5OHu8O3+//ywtQyvAAAAAXRSTlMAQObYZgAAAAFiS0dEAIgFHUgAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQffCxwKKhOk4dVMAAACXUlEQVRIx7WWi5KrIAyGi0VQSu2xx25Rseb9n3IT8IKo3d12mmmHMchn/EOChwP7iB2Qe7/f67ppmnYyvDA1um+32//XDMmO67B2MkLXb5IJ7LjWapnQSyRSD2hPntCnlKbTU8zY9BO4duEWx1mgYzGSZ26By6VSEhFFSNjxI9hzM4o118bonOLOGts6NcaQy4RlHaB1GUsCwp5/ABM30T14w5tZik9zGRxCTlmOM4zRNEtngPM/muYR+RE8cEUHk/UCY7ahGCe8HsGQsUlP5y852tfC78CoL3J7gCW5mMWgwILndnNo5G+4zBXn59A/gI8saWFhfcKOU8h0nyRvzpwgINm0XkL/D5lw4SL0E7i1mjENkZXoQ7IZwQqcEl4LNYMV9ClPUWbOH4HfgyVLUAiTSan9UODihEmvhZPiCRgqYRy4W4ETekHjdrCs3JDTayeTyE+lgK+yAbhyvpYCEwUgGO8MLwVuj4qXTotA5CF5PuAoeRfOtU75JU4egQ2t0X7pILdZgHFbwc52A9C03VQfb7dfgcMCUasCaa5XG/kXUvQt1ygFDbEUr5T0kLwha1Py1CJ5SMBmI3Il4ia043dgfBZM262SbgDut1vQ4P7aNl1FFz8UyCuN3pd097ykXwSXe03I1Isz5G9gpluLJSWCNtT5tqnfOqbxr5aNvtfY6MWbXAceYl4cTbYtojt9fTD/X0/AFpjIZXSYxlwGww/W/nFyDSY1bDEe/4Xd0mFsmxsTvoVsgpmowg+WSq5F2xHCT+1GTK34bPwHljnLrWzsRTxqvwv+wFfhR7jfurGUS80HWtIAAAAASUVORK5CYII=");

Lo que tenemos en nuestro portapapeles es lo que aparece después de base64…

Conclusiones

Después de llegar a este punto, me he quedado con las ganas de hacer un complemento para Nautilus con el que directamente cifrar la imagen a base 64 y copiar al portapapeles, sin necesidad de recurrir al emulador de terminal; pero creo que esto lo dejaré para otro artículo posterior.