Insérer une image en base64 dans la page HTML

Google Sheets vous permet de personnaliser comme bon vous semble la barre latérale ainsi que les boîtes de dialogue, avec notamment la possibilité d'ajouter une image, un logo, etc.

Pour insérer une image, l'URL d'image est donc en principe requise.

Mais pour éviter de devoir héberger quelque part vos images, une solution consiste à les insérer directement dans un format texte (en base64) pour un résultat visuellement identique.

Convertir l'image

La première étape consiste à convertir l'image en base64.

Vous pouvez le faire très simplement en utilisant le convertisseur d'image en base64 gratuit du site.

Insérer l'image

Insérez ensuite l'image avec les balises img (à copier à partir de la page du convertisseur) dans le code HTML entre les balises body.

Voici par exemple une image :

Cette même image en base64 avec les balises img :

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAAPFBMVEX///8QX3X1+fnY6+oGWG/G3t8ATWYxo5P8/f0jnYzo8vKdy8mx2dUydYhYtKduvrNEq52Gwb54pbFWjp6S6lfVAAAD+0lEQVRYw62Y2YKDIAxFEQQSQAX9/3+dBPcW12leplPt4cINESPE/wPETwNASPghjCLE8AuVIwxAdYhRAvxEnx+EjGgtpjsSTwclZW3wxvTCE9CiujXpEySIDq2q6gSyRbT+2hcQSp0g6XL0EDR90NipG7kD0I43wlHqLRfoLnlJBBHQoi0jYSaC1tMn5c+JAM5yHCAhNQ44mjr/Famq9SmRbkE7I/UeCaAbtpe/CoEvgeiNGc6AvNJ2DsQ9kuZXV5XRQtLKidTx1EXTO7hwxNojJMk39aBcNQgXEVkkyL1PXwL9lveJpN8PgZwdEkCiK6eskefsVyC2evs7GCmyDfRJdzJ/qU92wTkSNhuJ54Oe/+uNv3TkExnG/BOO0gmkbhSDAtcbrhWNhmtHvpDAlcFiK8lt0+SsSZ0EuO9IAUkVoaU86eskYbFfDapAnffIBVJ5Vibd7A4lTl9Rcsu7jnwgYxgpuiEk1xyQjakrEx448sGMgW0IjaJHQMv7uTdVVVfuC5hL+h0iRp/nFzBS0tAPm9pUvXvmyKdKL/MSRS3IIW8GVajD9klgJF+Vl65tuTh+b8A7juyJeSPzjuYC+103bzqyJeZnvIydKmQ2eR/t04hSJi/cmz1yIDHJuimXr6eOzKGU064M7PAFj6pEagEOHpzvAktPvFeOzBrLAtNrgaXj4VtHcuaUBbY/FvjaEVs6vv7DEYu+KDC9F1hI6v84Ujxenz04L6Mo8L0jJYF0DHjtCJWGEvC9I9PR679legMsCfyHI2WB4R8CC3WLjjLvBRbrlvPtWyQevdaqRGfvXwkcz2MydBbxVwLHJz5N/SEyHr+Cwvj6px9NHf3Jewm/FD2depTHM5ZN0/MBnpnK35N5LJB4g6lNPTFJpr4l0x0A+UXL0GG2WpjsULhKzsO+Bc0y82pCbplwlZzHbQvm1RlZ73WeOVQqC9POo/XL6qq6oFMdJuehQN0PDSHMgs0yV2Y5OY8Fjiq1X7HVpHZlFhzC4w7DcjSGAnZhfjiE7UVXZT1wf2IX5s4h1NdtGu+DcgVsPc19WzmP6tb+OUDDxzZ5raQoqDUjc5w6XvULlyYDZmyXgnYLVo7YemaGDqO8FNjtuyoTdl2DEdtwDZHcZbsS6HEMu+fSGnTbNRBSBe+1vHQE6LaUuq5t2xhnjWvkpZ3WgF/db/Rw126MlM4ppbQO0yA0Styodfc6wjDGUbnMo+QxQtDqSfsWQGt603LlWT1vBOcuGe86srMZKPo+Jcp4zcPQONNIcJ+npj3MYbZB39MIPZsDTybcmAXESlkmiWSJd93YC+xNlee6MHKba53j6Bw8cETNOw7WVuEcb9v9OUukXLPoIekPRXxs+n14NQQAAAAASUVORK5CYII=" alt="logo">

L'image insérée dans la page HTML :

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAAPFBMVEX///8QX3X1+fnY6+oGWG/G3t8ATWYxo5P8/f0jnYzo8vKdy8mx2dUydYhYtKduvrNEq52Gwb54pbFWjp6S6lfVAAAD+0lEQVRYw62Y2YKDIAxFEQQSQAX9/3+dBPcW12leplPt4cINESPE/wPETwNASPghjCLE8AuVIwxAdYhRAvxEnx+EjGgtpjsSTwclZW3wxvTCE9CiujXpEySIDq2q6gSyRbT+2hcQSp0g6XL0EDR90NipG7kD0I43wlHqLRfoLnlJBBHQoi0jYSaC1tMn5c+JAM5yHCAhNQ44mjr/Famq9SmRbkE7I/UeCaAbtpe/CoEvgeiNGc6AvNJ2DsQ9kuZXV5XRQtLKidTx1EXTO7hwxNojJMk39aBcNQgXEVkkyL1PXwL9lveJpN8PgZwdEkCiK6eskefsVyC2evs7GCmyDfRJdzJ/qU92wTkSNhuJ54Oe/+uNv3TkExnG/BOO0gmkbhSDAtcbrhWNhmtHvpDAlcFiK8lt0+SsSZ0EuO9IAUkVoaU86eskYbFfDapAnffIBVJ5Vibd7A4lTl9Rcsu7jnwgYxgpuiEk1xyQjakrEx448sGMgW0IjaJHQMv7uTdVVVfuC5hL+h0iRp/nFzBS0tAPm9pUvXvmyKdKL/MSRS3IIW8GVajD9klgJF+Vl65tuTh+b8A7juyJeSPzjuYC+103bzqyJeZnvIydKmQ2eR/t04hSJi/cmz1yIDHJuimXr6eOzKGU064M7PAFj6pEagEOHpzvAktPvFeOzBrLAtNrgaXj4VtHcuaUBbY/FvjaEVs6vv7DEYu+KDC9F1hI6v84Ujxenz04L6Mo8L0jJYF0DHjtCJWGEvC9I9PR679legMsCfyHI2WB4R8CC3WLjjLvBRbrlvPtWyQevdaqRGfvXwkcz2MydBbxVwLHJz5N/SEyHr+Cwvj6px9NHf3Jewm/FD2depTHM5ZN0/MBnpnK35N5LJB4g6lNPTFJpr4l0x0A+UXL0GG2WpjsULhKzsO+Bc0y82pCbplwlZzHbQvm1RlZ73WeOVQqC9POo/XL6qq6oFMdJuehQN0PDSHMgs0yV2Y5OY8Fjiq1X7HVpHZlFhzC4w7DcjSGAnZhfjiE7UVXZT1wf2IX5s4h1NdtGu+DcgVsPc19WzmP6tb+OUDDxzZ5raQoqDUjc5w6XvULlyYDZmyXgnYLVo7YemaGDqO8FNjtuyoTdl2DEdtwDZHcZbsS6HEMu+fSGnTbNRBSBe+1vHQE6LaUuq5t2xhnjWvkpZ3WgF/db/Rw126MlM4ppbQO0yA0Styodfc6wjDGUbnMo+QxQtDqSfsWQGt603LlWT1vBOcuGe86srMZKPo+Jcp4zcPQONNIcJ+npj3MYbZB39MIPZsDTybcmAXESlkmiWSJd93YC+xNlee6MHKba53j6Bw8cETNOw7WVuEcb9v9OUukXLPoIekPRXxs+n14NQQAAAAASUVORK5CYII=" alt="logo">
  </body>
</html>

Et le résultat (dans une petite boîte de dialogue) :

Plus votre image est grande et lourde, plus sa version en base64 sera longue, n'hésitez donc pas à redimensionner (si nécessaire) l'image puis à la compresser avant de la convertir en base64.