Base64 es un sistema de codificación que convierte datos binarios (como imágenes) en una cadena de texto ASCII. Esto permite incrustar imágenes directamente en archivos HTML, hojas de estilo CSS o código JavaScript, eliminando la necesidad de hacer peticiones HTTP adicionales para cargar archivos de imagen externos.
¿Cuándo usar imágenes en Base64?
La codificación Base64 no es una solución universal. Es más adecuada para casos específicos donde el beneficio de eliminar una petición HTTP supera el costo del tamaño adicional:
- Iconos y elementos pequeños: Imágenes de menos de 2-5KB que se muestran en todas las páginas.
- Emails HTML: Los clientes de correo bloquean imágenes externas por defecto. Las imágenes en Base64 se muestran sin necesidad de cargar recursos externos.
- Aplicaciones offline: Apps que necesitan funcionar sin conexión pueden incluir todos los recursos visuales en el código.
- Data URIs en CSS: Fondos e iconos pequeños incrustados directamente en las hojas de estilo.
Formato de un Data URI con Base64
Para usar una imagen Base64 en HTML o CSS, necesitas el formato de Data URI completo:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA...
El formato se compone de tres partes: el prefijo data:, el tipo MIME de la imagen (image/png, image/jpeg, image/webp), y la cadena Base64 precedida por ;base64,.
Cómo usarlo en HTML y CSS
En HTML, puedes usar el Data URI directamente en el atributo src de una etiqueta <img>. En CSS, funciona como valor de la propiedad background-image. También puedes usarlo en JavaScript asignándolo a la propiedad src de un objeto Image.
El costo del tamaño: cuándo NO usar Base64
La codificación Base64 incrementa el tamaño del archivo en aproximadamente un 33%. Una imagen de 10KB se convierte en ~13.3KB de texto Base64. Para imágenes grandes, esto es contraproducente: una foto de 200KB se convierte en ~267KB de texto que además no se puede cachear de forma independiente por el navegador.
Como regla general, solo convierte a Base64 imágenes menores de 5KB. Para imágenes más grandes, es mejor servirlas como archivos separados que el navegador pueda cachear. Si necesitas optimizar el tamaño de tus imágenes antes de convertirlas, usa nuestro Compresor de Imágenes.
Convierte Imágenes a Base64
Arrastra cualquier imagen y obtén la cadena Base64 lista para copiar y pegar en tu código HTML, CSS o JavaScript.
Abrir Convertidor a Base64Frequently Asked Questions
¿Base64 aumenta el tamaño de la imagen?
Sí. La codificación Base64 incrementa el tamaño en aproximadamente un 33%. Una imagen de 10KB se convierte en ~13.3KB de texto. Por eso solo se recomienda para imágenes pequeñas (menos de 5KB) donde eliminar una petición HTTP compensa el tamaño extra.
¿Funciona con todos los formatos de imagen?
Sí. Puedes codificar en Base64 cualquier formato de imagen: PNG, JPEG, WebP, GIF, SVG y más. Solo necesitas especificar el tipo MIME correcto en el Data URI para que el navegador interprete la imagen correctamente.
¿Las imágenes Base64 se cachean en el navegador?
No de forma independiente. Las imágenes Base64 incrustadas en HTML o CSS se cachean como parte del documento que las contiene. Si el CSS se cachea, las imágenes Base64 dentro de él también. Pero no se pueden cachear individualmente como archivos de imagen separados.