ToolHub
View All Posts

Como convertir Base64 a imagem e viceversa

A codificação Base64 é uma técnica fundamental para representar datos binarios de imagem como texto. Ya seja que estés incrustando imagens diretamente em HTML, transmitiéndolas através de APIs o almacenando datos de imagem em bases de datos, compreender como convertir entre Base64 e formatos de imagem é uma habilidade esencial para desenvolvedores web.

Que é a codificação Base64?

Base64 é um esquema de codificação de binario a texto que converte datos binarios em cadenas ASCII usando um conjunto de 64 caracteres: A-Z, a-z, 0-9, + e /. O carácter = se usa para preenchimento. Cada três bytes de datos binarios se representam como quatro caracteres Base64, lo que significa que os datos codificados em Base64 são aproximadamente um 33% mais grandes que os datos binarios originales.

Esta codificação se desarrolló originalmente para sistemas de correio electrónico que solo podían transmitir texto. Hoje em dia, Base64 se usa ampliamente em desenvolvimento web para incrustar imagens pequenas diretamente em HTML, CSS e cargas JSON, eliminando a necessidade de requisições HTTP separadas.

Por que convertir imagens a Base64?

Convertir imagens a cadenas Base64 tem várias razones práticas:

Como convertir imagens a Base64

Usando JavaScript no navegador

O navegador proporciona a API FileReader e a API Canvas para convertir imagens a Base64. O método FileReader lê o arquivo de imagem como uma Data URL, enquanto que o método Canvas te permite redimensionar o modificar a imagem antes de codificarla.

Com Canvas, dibujas a imagem em um elemento Canvas e logo chamas a toDataURL() para obter a cadena Base64. Este método também te permite mudar o formato de salida e a qualidade passando parámetros como 'image/jpeg' e um valor de qualidade entre 0 e 1.

Usando ferramentas online

A forma mais rápida de convertir uma imagem a Base64 é usar uma ferramenta de conversão online. Solo sube a imagem e a ferramenta genera instantáneamente a cadena Base64. Isto é particularmente útil quando necessitas uma conversão rápida sem escrever código. Podes testar nosso conversor gratuito de imagem a Base64.

Usando a linha de comandos

Em Linux e macOS, podes usar o comando base64 para codificar imagens diretamente desde a terminal. Isto é útil para scripting e flujos de trabalho de automatização onde necessitas processar múltiples imagens a a vez.

Como convertir Base64 de vuelta a imagem

No navegador

usando o esquema Data URI. O formato é data:[MIME-type];base64,[data]. Por exemplo, uma imagem PNG usa data:image/png;base64,iVBORw0KGgo...

Para guardar a imagem como arquivo, podes criar um link de descarga convertendo os datos Base64 em um objeto Blob e generando uma URL de objeto. Este método se ejecuta completamente no navegador sem necessidade de processamento do lado do servidor.

Usando ferramentas online

Os conversores online de Base64 a imagem te permitem pegar uma cadena Base64 e previsualizar e descargar instantáneamente a imagem resultante. É a forma mais simples quando recebes cadenas Base64 em correios electrónicos, respuestas de API o arquivos de configuração e necessitas ver a imagem real.

Compreendendo os Data URI

Data URI é a forma estándar de incrustar imagens codificadas em Base64 em páginas web. A sintaxe completa inclui o tipo MIME, a declaração de codificação e os próprios datos Base64.

Os formatos comuns de Data URI para imagens incluem:

Quando usar imagens Base64 (e quando no)

As imagens Base64 no siempre são a escolha correta. Aquí tens uma guia de quando usarlas e quando evitarlas:

Escenarios de uso adequados

Quando evitar Base64

Dica de performance: Para imagens de mais de 2KB, usa siempre referencias de arquivo tradicionales em vez de Base64. O navegador pode armazenar em caché os arquivos de imagem individuais, servirlos através de CDN e cargarlos de forma asíncrona, obtendo um performance significativamente melhor.

Problemas comuns e soluciones

Necessitas convertir imagens a Base64 o decodificar cadenas Base64 de vuelta a imagens? Experimenta nossas ferramentas gratuitas.

Imagem a Base64

Perguntas frequentes

A codificação Base64 aumenta o tamanho do arquivo?

Sí, a codificação Base64 aumenta o tamanho do arquivo aproximadamente um 33%. Isto se deve a que Base64 representa cada 3 bytes de datos binarios como 4 caracteres ASCII. Esta sobrecarga é o precio de poder incrustar datos binarios em formatos basados em texto.

Afecta a codificação Base64 de imagens ao performance?

O uso excesivo de imagens Base64 pode perjudicar o performance. Aumentan o tamanho do HTML, no podem ser armazenadas em caché por o navegador de forma independiente e bloqueiam o renderizado da página. No entanto, para iconos pequenos de menos de 2KB, o Base64 online pode reducir as requisições HTTP e mejorar os tiempos de carga.

Se pode convertir qualquer formato de imagem a Base64?

Sí, qualquer arquivo binario, incluyendo todos os formatos de imagem (JPEG, PNG, GIF, WebP, SVG, BMP), pode convertirse a Base64. A cadena Base64 resultante contém um prefijo Data URI que indica o tipo MIME original.

Qual é a diferença entre Base64 e Data URI?

Base64 é o algoritmo de codificação que converte datos binarios em texto ASCII. Data URI é um esquema para incrustar datos codificados em Base64 diretamente em URLs, com o prefijo do tipo MIME e a informação de codificação. O formato de Data URI é: data:[mediatype][;base64],data.