Usar Imágenes Embebidas

En estos sucesivos Tips para Optimización de Sitios Web hacemos hincapié en reducir las peticiones al servidor para alivianar la carga del mismo y las transferencias.

Otra buena práctica es Usar Imágenes Embebidas. La idea es sencilla, se "codifica" la imágen que vayamos a utilizar y en lugar de hacer referencia a ella mediante una ruta (relativa o absoluta) en el atributo "src" del tag "img", directamente enviemos la imágen "embebida" en el código, en formato de texto plano gracias a la Base 64.

Lo que deberiamos hacer es convertir una imágen a este formato, para eso podemos valernos de diversas herramientas, como por ejemplo Base 64 Online. Cargamos una imágen que tengamos en nuestra PC, le damos a "Convert the source data" y listo!.

Una vez que tengamos la imágen codificada sólo tenemos que reemplazar en el atributo "src" del tag "img" la ruta a la imagen por el texto generado; teniendo en cuenta que antes de colocar el código generado debemos poner el tipo MIME y la base, de esta manera: data:image/jpg;base64,.

Yo convertí una imágen y me devolvió el siguiente código (aunque no lo crean el texto siguiente es una imágen):

iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABHNCSVQICAgIfAhkiAAAAAlwSFlz
AAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAT7SURB
VFiFtZddbBRVFMd/Z2b2o93d7i6FbtuUbin9kFbZLjVtpV0tdAWkBEgpUSKxgmLRaDCASsAommiM
BhMS3nzywSefNDXwpC+EBPBBoiQm0oAVI5ZqIbbdbffj+jCz7bb0gy70JP/cmXPPnPM/5557Zwal
FLkCKAfOA605+3iA4B5d1/tbWlqUx+OJAY/m4kcjR7HZbKej0WhlRUUFkUjE6fV6vxIR22L95ERA
RLaHw+F9JSUlGTLU1dWt1TTtgyUnICKeoqKiLxoaGhCB3r1QVQEFBQWUlZW9LSKhJSWgadrxaDRa
pOs6m9vh8RAcegl8BRAMBnW32316yQiIyKqmpqYjgUCANVXQudHU+71wpBdshhAMBp8SkR1LQsDv
938eiURsTgc8twNEAGXOPVIFuzrB5XJRWFh46n4b8r4JiEiktbV1p2EYtK+H/HwYi8GJT+G7702b
7k7w+2DFihWrNU1746EREBGtuLj4TGNjI74CaFln6s9fgsEh+OYcTEyA0wEv7ga73Y7P53tPRAof
CgGgp6OjY62u62xsA0M3lTdumuNYHP68ZV5v3gCV5eD3+726ri+4LRckICLuioqKT0KhECUBqK+e
mvtneOr67yFz1AVe7QFN0/B4PL0isuaBCADHtm3bVgSwoQWz6Sz8e2fKaPD2lL45BM1hcLvdhmEY
p3ImICIr6+vrj9bW1lIVhNIiIG0iPgax+AwCKSBpjod6QNeFvLy8Z0QkmhMBTdPe6erqcojAE+Gs
7NOgUtNt0+kpcqSguhy2toPD4UDX9ZOLJiAixc3NzQfKy8upXAk+N4gVQNKQ7zC7PiOBZSApc04s
Eq90m2eF3W5vFZH2RRFwOBxvdXd32wEaaq3MrAqodBqV+A+SgwwMDNDf30++XEeN3yI9PoxKjEBy
glXFik3rQdd1ROTEbHGMObIv7OzsfC0QCFBYEMPnvE1y+DKpsV9QyWFUahRQ3PgVLlwwn/HZIDVy
jyde3m7w9VlBRKIi0qyUurhgBbxe79G2tjZnX18f7jsfEb/+IYmhs6TH/kBNjEBKQQpC1pbMd0JN
GWYTToMiVJmgLTRBOp0GePceitbXTXb2XsMwfk8mk95IA3z72WwUTRm6C5Fe6NkKx16Y2+7Cz9B5
ePI2rJT6KXMz2xK8nkwmvQCHn7UymUOWu+HKl2A35rdbXwfN9XDxKgAngN2ZuWlLICIu4E2AcDW0
r2WWsk7Hzb8gHlvY7vBkSLqyT8eZPXAQWA6wK7Kw030fQ+MBqNoDl6/Ob9vRAH7PZMzj9xAQEQOY
XKlN66x9PQfG43D2kmk7GodzF+e3NxREw5OJ7hGRlTMr0AmUAgSLoKZ4/oycGrz/PJQsgycfg/1P
L1yxLY2TsXRgP2TtAhHps0iwdwOc6eWhy+BdqD0IVsgBYJUopRCRUkuhZ4xL/dBUA03VsKYMXA5w
OSHPbh7DLgfkOcCmmw7jCXMpYhMwOg5jFm7fhR/74dJvcOUGjCemcdqS+cvZybQX7f3D0FEiuT0L
nMz0gAJiuZQ1mZos6WIlBYxn90AA2AzUAKsxfzw9gBPIs0Yn4ADm++JNAhNA3ELMwihwE+gHrgE/
KKWuZXrAZjnPnxHIOQscFiE34ALsQMIKMAKMAeNZBLKR0Y9Z9rFp7wIRAXNrGpgNabOubVagDGxZ
yGSdtIgkrApkj8kspFRW0P8BcVptcl859dUAAAAASUVORK5CYII=

Nos quedaría algo asi:

Mi imágen base 64

Como podemos observar es sencillo y en lugar de hacer una petición al servidor la imágen viaja en modo texto.

Saludos y que lo disfruten!

Bookmark and Share

0 comentarios:

Publicar un comentario