Quand faut-il inliner une image en base64 ?

Quand l'image est minuscule (moins de ~2 Ko), utilisée une seule fois, et que la requête HTTP supplémentaire représenterait une part mesurable du poids de la page. Cas courants : une icône SVG intégrée à un module CSS, un motif de fond ponctuel dans un modèle d'e-mail, un logo inline pour une page de documentation statique.

Quand NE PAS inliner ?

Les grandes images. Tout ce qui dépasse ~10 Ko vaut mieux servi en fichier séparé car (a) le navigateur peut le mettre en cache entre les pages, (b) le base64 ajoute ~33 % de surcoût, et (c) le contenu inline ne peut pas être chargé en lazy. Les images hero marketing et photos produit ne sont presque jamais de bons candidats au base64.

Quel est le surcoût de taille ?

Environ 4/3 (33 % de plus). 3 octets binaires deviennent 4 caractères base64. Un PNG de 12 Ko fait donc ~16 Ko une fois encodé. Le gzip en récupère une partie sur le réseau, mais pas tout.

Image en Base64

Convertit une image en Data URI (base64) avec extraits CSS et HTML prêts à coller - ou colle un Data URI pour prévisualiser.

Déposez une image ici ou cliquez pour en choisir une

PNG, JPG, WebP, AVIF, GIF, SVG, BMP

Deux directions sur un onglet. Encodage : déposez une image, obtenez le `data:image/...;base64,...` plus des extraits CSS et HTML prêts. Décodage : collez un Data URI, prévisualisez, téléchargez l'image. Rien ne sort de votre navigateur.

Comment l'utiliser

Choisissez le sens
Encoder (image → base64) ou décoder (base64 → image) via la bascule d'onglet.
Déposez ou collez
Encoder : glissez un PNG / JPG / WebP / SVG. Décoder : collez une chaîne Data URI `data:image/...`.
Copiez l'extrait voulu
Trois extraits prêts : Data URI brut, CSS `background-image: url(...)`, HTML `<img src='...'>`.

Qu'est-ce que c'est ?

Le base64 est un encodage texte des données binaires - chaque groupe de 3 octets devient 4 caractères ASCII tirés de `A-Za-z0-9+/`. Préfixé par `data:image/png;base64,` (ou un autre type MIME), le résultat est un Data URI : une référence autonome à une image que les navigateurs, moteurs CSS et parseurs HTML résolvent en inline. Le compromis est un surcoût de taille de ~33 % en échange d'une requête HTTP évitée.

Quand l'utiliser

Intégrer de petites icônes SVG dans un module CSS, inclure un motif de fond ponctuel dans un e-mail HTML, inliner un logo dans un PDF généré au build, embarquer des fixtures de test, ou générer une image OG dynamiquement et la servir en Data URI. Partout où il faudrait sinon une requête HTTP de plus pour une ressource minuscule.

Erreurs courantes

Inliner une photo hero marketing et plomber le temps d'analyse du HTML. Oublier d'URL-encoder les caractères `+`, `/` et `=` quand on place le Data URI dans une autre URL. Coller un Data URI sans le préfixe `data:image/png;base64,` (les navigateurs le rejettent). Et inliner une grande ressource que le navigateur aurait pu mettre en cache entre les pages.

FAQ

Quand faut-il inliner une image en base64 ?: Quand l'image est minuscule (moins de ~2 Ko), utilisée une seule fois, et que la requête HTTP supplémentaire représenterait une part mesurable du poids de la page. Cas courants : une icône SVG intégrée à un module CSS, un motif de fond ponctuel dans un modèle d'e-mail, un logo inline pour une page de documentation statique.
Quand NE PAS inliner ?: Les grandes images. Tout ce qui dépasse ~10 Ko vaut mieux servi en fichier séparé car (a) le navigateur peut le mettre en cache entre les pages, (b) le base64 ajoute ~33 % de surcoût, et (c) le contenu inline ne peut pas être chargé en lazy. Les images hero marketing et photos produit ne sont presque jamais de bons candidats au base64.
Quel est le surcoût de taille ?: Environ 4/3 (33 % de plus). 3 octets binaires deviennent 4 caractères base64. Un PNG de 12 Ko fait donc ~16 Ko une fois encodé. Le gzip en récupère une partie sur le réseau, mais pas tout.