Convertir imรกgenes a Base64. Cรณmo y por quรฉ

Esto es un truco muy interesante en ciertos casos. Coge una imagen y la convierte en cรณdigo, el cual es puede poner en un html para mostrar directamente la imagen. Os enseรฑamos cuando y cรณmo hacerlo.

Cuรกndo es interesante convertir imรกgenes a Base64.

Bรกsicamente en 3 situaciones.

  • En firmas de correo que admitan html. El poner la imagen ahรญ como cรณdigo y que no tenga que buscarla de otro sitio reduce la posibilidad de spam y facilita la carga. En ciertas ocasiones es la รบnica manera porque no permiten subir imรกgenes (firma de Gmail).
  • En pรกginas web que tengamos que poner imรกgenes pero no nos deje cargarlas de sitios de terceros o subirlas porque estรฉ restringido.
  • En tu pรกgina web cuando quieres reducir la carga de imรกgenes. Cuando una web abre una imagen el cรณdigo es como este:<img src=โ€….โ€ ย title=โ€….โ€ alt=โ€……..โ€ />La web abre un proceso para cargar esa imagen desde ese src y esto gasta tiempo y procesador. Las imagenes en Base64 se cargan “incrustadas”, directamente desde cรณdigo, y no tiene que abrir otro proceso ni gastar tanto tiempo.

Cuando no es interesante.

Las imรกgenes en Base64 aumentan el cรณdigo, y no permiten etiquetas para SEO. Asรญ que no es bueno hacerlo en todas. Sรณlo en ciertas como los favicon, iconos, logos pequeรฑos, ciertos fondos en css o cualquiera que tarde mucho. Tambiรฉn si se cargan desde sitios de terceros.

No lo hagรกis en imรกgenes grandes, el cรณdigo sale larguรญsimo. Nosotros, por ejemplo, hemos puesto como ejemplo un logo grande, pero porque lo tenรญamos a mano. Nunca lo pondrรญamos tan grande en Base64.

Cรณmo se hace.

Lo mejor es usar un sitio web. Existen varios si buscas en Google, por ejemploย https://www.base64-image.de/

Ahรญ subes la imagen y te darรก el cรณdigo tanto para html como para css. Una imagen en Base64 en html se carga asรญ:

<img src="data:image/gif;base64,........" title="Tรญtulo" />

En CSS se pondrรญa algo como:

 background: #FFF no-repeat center center url("......")

En los puntos suspensivos se pone el cรณdigo que te dan las webs anteriores.

 

 

Deja un comentario

Resumen de nuestra Polรญtica de Privacidad

  • Responsable:ย SmythSys IT Consulting SLNE.
  • Finalidad:ย Gestionar y moderar los comentarios.
  • Legitimaciรณn:ย Necesitas dar tu consentimiento para publicar un comentario.
  • Destinatarios:ย Tus datos se alojan en los servidores de OVH.
  • Derechos:ย Tienes derecho a acceder, rectificar, limitar y suprimir los datos en la direcciรณn del responsable (en nuestra polรญtica de privacidad).

Time limit is exhausted. Please reload CAPTCHA.