Trabajar con imágenes utilizando base64 supone una de las ventajas más grandes en cuanto a velocidad de carga se refiere. De forma simple la carga de un sitio web depende en un 80% del cliente y 20% del servidor, entonces si nuestra página contiene muchas imágenes estamos dejando que estas sean procesadas por el ancho de banda que el cliente posea.
Supongamos que tenemos la siguiente imagen:
Sabiendo que es un JPG entonces podemos hacer lo siguiente:
Para demostrar diferencia que trabajar de esta forma implica, tenemos los 2 enlaces a la misma imagen, una bajo Data URI (Base64) y otra como un archivo mas en la web que carga desde un servidor:
De esta forma podemos trabajar cualquier tipo de imagen construyendo la data en la forma que anteriormente expresamos, esto podemos aplicarlo incluso en plantillas CSS. Debido a que el navegador almacena en caché nuestras plantillas por defecto podemos asumir que nuestro sitio estará optimizando su carga en gran medida, siempre y cuando nuestra plantilla utilice muchas imagenes claro esta.
La principal ventaja es que reducimos el número de peticiones HTTP a nuestro sitio. sin embargo esto también conlleva sus desventajas:
Ahora viene la parte importante de todo esto, cuando utilizarlas y cuando no:
Si vamos a mostrar nuestro sitios en dispositivos que no sean móviles: debido a que la carga depende netamente de la velocidad de procesamiento, en equipos móviles de gama baja nuestro sitio sera un dolor de cabeza para el usuario final.
Si queremos mostrar imagenes pequeñas: ya que aumenta el tamaño del archivo es conveniente utilizarlo en banners, iconos, sprites o cualquier otra imagen inferior a 175x175 o 200x200.
No mostrar una galería de imágenes de esta forma: recordemos que las peticiones HTTP son simultáneas, es prácticamente lo mismo utilizar Base64 que el archivo en sí cuando se carga una gran cantidad de imágenes.
Siempre que vamos a utilizar imágenes en CSS: siempre y cuando no sean de gran tamaño, ya que el navegador almacena en memoria nuestra plantilla, aunque esta sea mas grande debido al aumento de tamaño en la data, se compensa por la velocidad de carga en caché.
Supongamos que tenemos la siguiente imagen:
data : mime(image/jpg por ejemplo) ; base64 , CODIGO_BASE_64
Para demostrar diferencia que trabajar de esta forma implica, tenemos los 2 enlaces a la misma imagen, una bajo Data URI (Base64) y otra como un archivo mas en la web que carga desde un servidor:
De esta forma podemos trabajar cualquier tipo de imagen construyendo la data en la forma que anteriormente expresamos, esto podemos aplicarlo incluso en plantillas CSS. Debido a que el navegador almacena en caché nuestras plantillas por defecto podemos asumir que nuestro sitio estará optimizando su carga en gran medida, siempre y cuando nuestra plantilla utilice muchas imagenes claro esta.
La principal ventaja es que reducimos el número de peticiones HTTP a nuestro sitio. sin embargo esto también conlleva sus desventajas:
- Este esquema solo funciona en navegadores modernos (IE7 / IE8 no esta soportado).
- La conversión depende de la velocidad de procesamiento de nuestro equipo.
- Las imágenes ocupan un 33% mas de espacio que el archivo original en binario.
- Estamos limitados a la capacidad por parte del navegador (Opera 4.000 bytes / Firefox 100.000)
Ahora viene la parte importante de todo esto, cuando utilizarlas y cuando no:
Si vamos a mostrar nuestro sitios en dispositivos que no sean móviles: debido a que la carga depende netamente de la velocidad de procesamiento, en equipos móviles de gama baja nuestro sitio sera un dolor de cabeza para el usuario final.
Si queremos mostrar imagenes pequeñas: ya que aumenta el tamaño del archivo es conveniente utilizarlo en banners, iconos, sprites o cualquier otra imagen inferior a 175x175 o 200x200.
No mostrar una galería de imágenes de esta forma: recordemos que las peticiones HTTP son simultáneas, es prácticamente lo mismo utilizar Base64 que el archivo en sí cuando se carga una gran cantidad de imágenes.
Siempre que vamos a utilizar imágenes en CSS: siempre y cuando no sean de gran tamaño, ya que el navegador almacena en memoria nuestra plantilla, aunque esta sea mas grande debido al aumento de tamaño en la data, se compensa por la velocidad de carga en caché.
Recibe notificaciones por correo
Lamentablemente hay muchos usuarios en la red que han llegado al blog para escribir obscenidades, así que la moderación se hace necesaria. Recuerda utilizar un lenguaje correcto y espera a que sea aprobado.
Si necesitas publicar código haz click en "Conversión" para hacerlo legible.
ConversiónConversión