Generador de CSS Background Image Base64

Generador de CSS Background Image Base64

Convierte imagenes en declaraciones CSS background-image listas para usar con data URIs Base64 incrustados. Suelta una imagen en el campo de arriba, selecciona el formato de salida CSS Background y pega el resultado directamente en tu hoja de estilo.

Como Usarlo

1. Suelta un archivo de imagen (PNG, JPG, SVG, WebP, GIF) en el área de carga
2. Selecciona “CSS Background” como formato de salida
3. Copia la declaración CSS generada
4. Pegala en tu hoja de estilo

La salida se ve así:

background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSU...);

Cuando Usar Fondos CSS con Base64

Patrones repetidos pequenos

Los patrones de fondo (puntos, líneas, efectos de textura) son usualmente imagenes muy pequenas (4x4 a 16x16 píxeles) que se colocan en mosaico con background-repeat. Son ideales para incrustación Base64 porque el archivo es menor de 1 KB y el string Base64 es insignificante.

.pattern {
  background-image: url(data:image/png;base64,iVBOR...);
  background-repeat: repeat;
  background-size: 8px 8px;
}

Iconos solo CSS

Los pseudoelementos (::before, ::after) pueden mostrar imagenes con background-image o content: url(...). Los data URIs Base64 te permiten usar imagenes rasterizadas en estos contextos sin cambios en el HTML.

Distribuciones de un solo archivo

Al generar PDFs, plantillas de correo electronico o HTML sin conexión, incrustar todas las imagenes como Base64 crea un archivo autonumo. Sin imagenes rotas por referencias faltantes.

CSS crítico

Incrustar un fondo de héroe pequeno en el CSS crítico asegura que se cargue con la primera pintura antes de que se obtengan las hojas de estilo externas y las imagenes. Esto elimina el flash de fondo sin estilo que ocurre cuando la imagen de fondo es un archivo separado.

Propiedades CSS de Fondo y Base64

El data URI funciona con todas las propiedades relacionadas con el fondo en CSS:

.element {
  background-image: url(data:image/png;base64,...);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  /* Funciona con gradientes y múltiplos fondos */
  background:
    url(data:image/png;base64,...) center/cover no-repeat,
    linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

Alternativas a Base64 para Fondos CSS

Para SVG, el URL encoding suele ser más pequeno que Base64 porque SVG ya es texto. En lugar de data:image/svg+xml;base64,..., usa data:image/svg+xml,%3Csvg.... Esto evita el incremento del 33% de Base64.