Base64
Image Data URL
⚠️ Large image may freez the browser
Codificar PNG a Base64 para CSS
Convierte las imágenes PNG a formatos Base64 o DataURL. Incorpora directamente en CSS o JavaScript sin archivos externos. Los archivos más grandes pueden afectar el rendimiento; se recomiendan tamaños más pequeños. Codificación Base64 simplifica la integración con los activos web, reduciendo la dependencia de los recursos externos. Formato DataURL simplifica la estructura del código para la entrega de contenido dinámico.
Image → Base64 / Data URL
Click or Drag & Drop an Image
Convertir imágenes a código Base64
1
Cargar imagen PNG
Sube tu imagen PNG haciendo clic o arrastrándola al área de carga.
2
Elige el formato de codificación
Seleccione la pestaña 'Base64' o 'DataURL' para elegir su formato de codificación deseado.
3
Ver Datos Base64
La representación Base64 o DataURL de tu imagen aparecerá en el área de texto debajo de las pestañas.
4
Copia Texto Codificado
Haz clic en el botón 'Copiar' para copiar el texto codificado a tu portapapeles para su uso en tu CSS o JavaScript.
Incluir imágenes PNG directamente en tu CSS
Incluir una pequeña imagen directamente en tu CSS sin administrar archivos separados se puede lograr convirtiendo PNGs a formatos Base64 o DataURL. La herramienta encode-png-to-base64-for-css simplifica tu flujo de trabajo de desarrollo web y reduce las solicitudes HTTP. Esto resulta en código más limpio, más eficiente y tiempos de carga de página más rápidos.
Reduce el tamaño del archivo y las solicitudes HTTP
Esta herramienta reduce el número de archivos que necesita cargar tu sitio web convirtiendo las imágenes PNG en formatos Base64 o DataURL. Incorporar imágenes directamente en tu CSS o JavaScript reduce las solicitudes HTTP, lo que puede mejorar la velocidad de carga de la página. Este enfoque optimiza el rendimiento del sitio web minimizando las dependencias de archivos externos.
Preguntas Frecuentes
¿Qué es una URL de datos Base64 y por qué la usaría?
Una DataURL basada en Base64 es una forma de representar una imagen como una cadena de caracteres. Permite incrustar imágenes directamente en tu código CSS o JavaScript, evitando la necesidad de cargarlas desde archivos externos. Esto puede ser útil para iconos o imágenes pequeñas.
¿Cómo utilizo la Base64 o DataURL generada?
Simplemente copie el código proporcionado después de convertir su imagen y péguelo en su CSS o JavaScript. Por ejemplo, en CSS, podría usarlo así: background-image: url('data:image/png;base64,...');
¿Qué formatos de imagen admite esta herramienta?
Esta herramienta está específicamente diseñada para imágenes PNG. Otros formatos podrían no convertirse correctamente.
¿Por qué no se recomiendan las imágenes grandes?
Las imágenes grandes crean cadenas Base64 muy largas, lo que puede ralentizar tu computadora y aumentar los tiempos de carga de la página. Es mejor usar esta herramienta para imágenes más pequeñas.
¿Existe un límite al tamaño de la imagen que puedo subir?
Aunque no hay un límite estricto de tamaño de archivo, el rendimiento disminuirá con imágenes más grandes. Se recomienda usar archivos PNG más pequeños para obtener mejores resultados.