Images Base64 en HTML
Exemple concret avec une image de transceiver IC-7300, affichée en fichier WebP classique puis intégrée directement en Base64.
Le principe
Une image Base64 est une image transformée en texte. Au lieu d’appeler un fichier externe comme ic7300.webp, on place directement les données de l’image dans le code HTML.
Image WebP classique
Ici, l’image est chargée comme un fichier normal. C’est la méthode recommandée pour un site web classique.
Code HTML utilisé :
<img src="ic7300.webp" alt="Transceiver IC-7300">
La même image intégrée en Base64
Ici, l’image est intégrée directement dans le HTML. Aucun fichier image externe n’est nécessaire.
Début du code HTML réel :
<img src="data:image/webp;base64,UklGR..." alt="Transceiver IC-7300">
La chaîne complète est très longue. Dans cette page, elle est réellement présente dans le code de l’image affichée à gauche.
Comparaison des deux méthodes
| Méthode | Exemple | Avantage | Inconvénient |
|---|---|---|---|
| Image WebP classique | <img src="ic7300.webp"> |
Plus propre, cache navigateur efficace | Il faut garder le fichier image avec la page |
| Image Base64 | <img src="data:image/webp;base64,..."> |
Tout est dans un seul fichier HTML | HTML plus lourd, moins pratique à modifier |
Convertir une image en WebP
Sous Linux, on peut convertir une image PNG ou JPEG en WebP avec l’outil cwebp.
sudo apt install webp cwebp ic7300.png -q 80 -o ic7300.webp
Le format WebP est souvent plus léger qu’un PNG ou qu’un JPEG, tout en gardant une bonne qualité visuelle.
Convertir une image WebP en Base64
base64 -w 0 ic7300.webp > ic7300.b64
Pour obtenir directement une chaîne utilisable dans une balise HTML :
echo -n "data:image/webp;base64," > ic7300-data.txt base64 -w 0 ic7300.webp >> ic7300-data.txt
Quand utiliser Base64 ?
| Bon usage | À éviter |
|---|---|
| Petites icônes | Grandes photos |
| Logo léger dans un fichier HTML autonome | Galeries d’images |
| Email HTML ou mini démonstration | Images nombreuses dans un article WordPress |
Formats d’images utilisables en Base64
Une image encodée en Base64 peut être intégrée directement dans une page HTML avec la syntaxe data:image/format;base64,…. Le format utilisé dépend du type d’image : photo, logo, icône, animation ou image vectorielle.
Bitmap Windows
Type MIME : image/bmp
Compatible
Fonctionne en Base64, mais le format est très lourd. Peu recommandé pour le Web.
Petites animations
Type MIME : image/gif
Compatible
Possible en Base64, y compris pour les animations, mais peut vite devenir lourd.
Icônes et favicons
Type MIME : image/x-icon
Compatible
Utilisé surtout pour les petites icônes de site ou les favicons.
Photos classiques
Type MIME : image/jpeg
Très compatible
Idéal pour les photos, mais moins efficace que WebP en compression.
Logos et transparence
Type MIME : image/png
Compatible et sans perte
Très pratique pour logos, captures d’écran et images avec fond transparent.
Images vectorielles
Type MIME : image/svg+xml
Très adapté aux icônes
Souvent préférable pour les pictogrammes, schémas simples et logos vectoriels.
Format moderne recommandé
Type MIME : image/webp
Très bon compromis
Excellent pour réduire la taille des images tout en gardant une bonne qualité.
Compression très moderne
Type MIME : image/avif
Compatible navigateurs récents
Très performant, mais à vérifier si l’on vise une compatibilité maximale.
Image haute qualité
Type MIME : image/tiff
Peu recommandé
Possible techniquement, mais rarement utilisé dans une page web moderne.
Photos mobiles
Type MIME : image/heic
Compatibilité limitée
Format courant sur iPhone, mais peu fiable pour une intégration web universelle.
