Convertir JPG en Base64 - Gratuit, instantané, dans le navigateur

Les fichiers JPG sont des photographies, et les photographies sont lourdes. Ce seul fait change le calcul par rapport à l’encodage d’une icône : une photo de 200 Ko devient environ 267 Ko de texte que le navigateur doit télécharger intégralement, garder en mémoire et décoder avant de pouvoir afficher quoi que ce soit. Pour la plupart des sites, c’est un mauvais marché. Il existe pourtant trois situations où c’est exactement le bon.

Comment convertir JPG en Base64

1. 1 Déposez votre fichier .jpg ou .jpeg dans la zone prévue.
2. 2 Regardez la ligne de taille affichée par l’outil : c’est le chiffre qui décide si l’intégration est raisonnable.
3. 3 Copiez la data URI pour HTML et CSS, ou la chaîne brute si vous la mettez dans du JSON.

Pour une page web ordinaire, c’est généralement une erreur

Une balise image ordinaire laisse le navigateur récupérer la photo en parallèle, la mettre en cache des mois, l’ignorer complètement si elle est sous la ligne de flottaison, et charger une version plus petite sur téléphone. L’intégration jette ces quatre avantages d’un coup. La photo arrive désormais dans le HTML ou le CSS, bloque le premier affichage, n’est plus cachable séparément, se télécharge même chez les visiteurs qui ne défilent jamais jusqu’à elle, et reste identique sur un écran 4K et sur un téléphone d’entrée de gamme. Plus la photo est lourde, plus chacun de ces coûts pèse.

Trois cas où c’est justifié

Les modèles d’e-mails d’abord : beaucoup de clients bloquent les images externes par défaut, si bien qu’une photo intégrée est la seule à s’afficher de façon fiable. Ensuite, les minuscules substituts — une image volontairement floue de quelques centaines d’octets, intégrée pour que quelque chose soit visible pendant le chargement de la vraie photo. Enfin, faire transiter une image par un système qui n’accepte que du texte : une API JSON, une charge de webhook, une colonne de base de données, une file de messages. Dans ces trois cas, l’alternative n’est pas une image plus rapide, c’est pas d’image du tout.

Réduisez la photo avant de l’encoder

Le Base64 n’a pas d’avis sur ce qu’on lui donne : il agrandit une photo de vacances de 3 Mo aussi fidèlement qu’une vignette. Faites donc le travail dans le bon ordre : recadrez à la taille réellement affichée, baissez la qualité JPG jusqu’à ce que la différence cesse d’être visible, et encodez seulement ensuite. Une photo destinée à être affichée sur 400 pixels de large n’a rien à faire encodée en 4000. Si le résultat pèse encore des centaines de kilooctets, c’est l’outil qui vous dit de pointer vers le fichier.