Guide de mise en œuvre

Utiliser une image Base64 en CSS

Placez une Data URL Base64 dans background-image pour créer une petite ressource de style autonome.

.icon {
  background-image: url('data:image/webp;base64,UklGR...');
  background-size: contain;
  background-repeat: no-repeat;
}

Utiliser une URL entre guillemets

Placez la Data URL complète entre guillemets dans url(). Cela évite les problèmes d’analyse et facilite la copie de la déclaration.

Choisir des images décoratives

Les arrière-plans CSS n’ont pas de texte alt. Une image porteuse de sens devrait normalement utiliser un élément img HTML.

Mesurer le compromis

L’intégration peut supprimer une requête, mais agrandit la feuille de style et empêche la mise en cache indépendante. Préférez de petites ressources propres à la page.

Choisissez l’outil ou le guide adapté à l’étape suivante.

Créer la sortie Base64Encodez une image locale et copiez le bon format.Générateur de Data URLNormalisez le préfixe et inspectez les données.Images Base64 en HTMLComparez l’autre méthode d’intégration.