Comprimir imagen
Reducir el peso de las imágenes.
Imagen
Imagen a Base64
Convertir una imagen en un data URI.
Qué hace. Esta herramienta convierte una imagen en un data URI que pegas directamente en HTML o CSS. Te ahorras una petición de red a cambio de aproximadamente un tercio más de volumen.
Funciona en tu navegadorNo se sube nadaSin registroFunciona sin conexión
Cómo usar Imagen a Base64
- Elige tu imagen.
- Observa el tamaño del resultado.
- Copia como data URI, como etiqueta img o como fondo CSS.
Cuándo compensa
El balance es sencillo: una petición menos, un tercio más de bytes.
Compensa con imágenes pequeñas siempre necesarias: un icono, un logotipo pequeño, un patrón de fondo. Por debajo de unos cinco kilobytes casi siempre sale a cuenta.
No compensa con imágenes grandes. Una foto de varios cientos de kilobytes engorda tu HTML o tu CSS en la misma medida, y esos archivos se cargan siempre —también para visitantes que nunca verán la imagen.
Inconveniente importante: una imagen incrustada no se guarda en caché por separado. Si está en tu CSS, se reenvía con cada cambio de ese archivo. Un archivo aparte sí permanece en caché.
En correo la situación es distinta: muchos programas bloquean las imágenes externas, pero muchos bloquean también los data URI. Incrustar no es ahí una solución fiable.
En la práctica
Optimiza la imagen antes de convertirla. Base64 sobre un PNG sin comprimir es doblemente desaprovechado.
Para iconos sencillos, un SVG suele ser mejor que un PNG en Base64: más ligero, nítido a cualquier tamaño e insertable directamente sin codificación.
Respeta la estructura: un data URI empieza por el tipo de medio y la indicación base64, seguidos de una coma y los datos. Copia el conjunto, no solo el final.
En CSS va entre comillas dentro de la función url. En HTML va directamente en el atributo src.
Todo ocurre en tu navegador.
Preguntas frecuentes
¿Cuándo uso un data URI?
Con imágenes pequeñas por debajo de unos cinco kilobytes que siempre hacen falta.
¿Cuánto engorda?
Alrededor de un tercio.
¿Se guarda en caché?
Por separado no: va con el archivo donde está el código.
¿Funciona en correo?
Poco fiable: muchos programas bloquean los data URI.
¿No es mejor un SVG?
Para iconos sencillos suele serlo: más ligero y nítido a cualquier tamaño.
¿Se sube mi imagen?
No.