Avantages et inconvénients de l'utilisation d'images encodées en base64
Je pense utiliser des images encodées en base64 pour un site sur lequel je travaille pour optimiser le temps de chargement.
Quoi qu'il en soit, avant de commencer, je me demandais: quels sont les avantages et les inconvénients de faire cela?
Pour le moment, je ne vois aucun inconvénient mais j'ai aussi remarqué que ce n'est pas une technique très souvent utilisée et cela me fait me demander si je n'ai rien raté.
Après avoir recherché le sujet sur Google, je n'ai rien trouvé de clair alors j'ai décidé de demander ici.
Il n'est utile que pour de très petites images. Les fichiers encodés en Base64 sont plus volumineux que l'original. L'avantage réside dans le fait de ne pas avoir à ouvrir une autre connexion et à faire une demande HTTP au serveur pour l'image. Cet avantage est perdu très rapidement, il n'y a donc qu'un avantage pour un grand nombre d'images individuelles très petites.
la longueur réelle des données binaires encodées en Base64 conformes MIME est généralement d'environ 137% de la longueur des données d'origine, bien que pour les messages très courts, la surcharge peut être beaucoup plus élevée en raison de la surcharge des en-têtes. Très grosso modo, la taille finale des données binaires encodées en Base64 est égale à 1,37 fois la taille des données d'origine + 814 octets (pour les en-têtes).
En d'autres termes, la taille des données décodées peut être approximée avec cette formule:
bytes = (string_length(encoded_string) - 814) / 1.37
Certains des inconvénients ci-dessous sont déjà mentionnés dans cet article à Combien est-il plus rapide d'utiliser des images en ligne/base64 pour un site Web que de simplement créer un lien vers le fichier dur?
- La plupart des formes de mise en cache sont battues, ce qui pourrait faire beaucoup de mal si l'image est consultée souvent - par exemple, un logo qui s'affiche sur chaque page, qui pourrait normalement être mis en cache par le navigateur.
- Plus d'utilisation du processeur.
le temps de réponse de la page HTML augmentera également, car les images chargent asyn dans le scénario normal. même si les images se chargent tard, vous pouvez commencer à voir du texte.
Un autre avantage de CDN serait perdu si seuls les médias étaient mis en cache dans CDN
cet avantage sera perdu.