Cómo convertir una imagen a un URI de datos Base64

Puedes incrustar una imagen directamente en HTML o CSS como una cadena Base64, sin necesidad de un archivo independiente. Es un truco útil para activos pequeños, con una clara definición de lo que se debe y no se debe hacer.

Qué es un URI de datos

Convertir una imagen a Base64 la convierte en una cadena de texto larga que se coloca directamente en el código como data:image/png;base64,iVBORw0.... El navegador lo decodifica nuevamente en la imagen, sin necesidad de realizar una solicitud separada al servidor.

Cuándo usarlo (y no)

Bueno para: pequeños íconos, logotipos o imágenes incrustados en CSS/correo electrónico donde es importante guardar una solicitud HTTP. Malo para: imágenes grandes: Base64 aumenta el tamaño en aproximadamente un 33 % y no se puede almacenar en caché por separado, por lo que ralentiza las páginas grandes. Regla general: solo imágenes en línea de menos de unos pocos KB.

Convertir al instante

Nuestro conversor de imagen a Base64 gratuito convierte cualquier imagen en un URI de datos listo para pegar. Para comprender la codificación en sí, consulte nuestra explicación de Base64.

Conclusión

Base64 le permite insertar imágenes pequeñas para cortar solicitudes, pero la penalización de tamaño de ~33 % lo hace incorrecto para archivos grandes. Úselo solo para recursos pequeños y mantenga las imágenes grandes como archivos separados que se pueden almacenar en caché.