Quel est l'effet de l'encodage d'une image en base64?

Si je convertis une image (jpg ou png) en base64, sera-t-elle plus grande ou aura-t-elle la même taille? Combien plus sera-t-il?

Est-il recommandé d'utiliser des images encodées en base64 sur mon site Web?

Il sera environ 37% plus grand:

Très grossièrement, la taille finale des données binaires encodées en Base64 est égale à 1,37 fois la taille des données d'origine

Source: http://en.wikipedia.org/wiki/Base64

Voici un aperçu vraiment utile de quand encoder en base64 et quand ne pas le faire par David Calhoun.

Réponse de base = les fichiers encodés en base64 gzip seront à peu près comparables en taille au binaire standard (jpg / png). Les fichiers binaires Gzip auront une taille de fichier plus petite.

À emporter = Il y a un avantage à encoder et gzipper vos icônes d'interface utilisateur, etc., mais il n'est pas judicieux de le faire pour des images plus grandes.

Il sera plus gros en base64.

Base64 utilise 6 bits par octet pour encoder les données, tandis que le binaire utilise 8 bits par octet. En outre, il y a un petit supplément de remplissage avec Base64. Tous les bits ne sont pas utilisés avec Base64 car il a été développé en premier lieu pour encoder des données binaires sur des systèmes qui ne peuvent traiter correctement que des données non binaires.

Cela signifie que l'image encodée sera environ 25% plus grande, plus une surcharge constante pour le remplissage.

Encoder une image en base64 la rendra environ 30% plus grande.

Voir les détails dans l'article de wikipedia sur le schéma d'URI de données , où il indique:

Les URI de données encodées en base64 ont une taille 1/3 plus grande que leur équivalent binaire. (Cependant, cette surcharge est réduite à 2-3% si le serveur HTTP compresse la réponse à l'aide de gzip)

La réponse est: cela dépend.

Bien que les images base64 soient plus grandes, il existe quelques conditions où base64 est le meilleur choix.

Taille des images base64

Base64 utilise 64 caractères différents et c'est 2 ^ 6. Donc, base64 stocke 6 bits par caractère 8 bits. La proportion est donc de 6/8 des données non converties aux données en base64. Ce n'est pas un calcul exact, mais une estimation approximative.

Exemple:

Une image de 48 Ko nécessite environ 64 Ko en tant qu'image convertie en base64.

Calcul: (48/6) * 8 = 64

Calculatrice CLI simple sur les systèmes Linux:

$ cat /dev/urandom|head -c 48000|base64|wc -c
64843

Ou en utilisant une image:

$ cat my.png|base64|wc -c

Images et sites Web Base64

Cette question est beaucoup plus difficile à répondre. De manière générale, plus l'image est grande et moins sensée en utilisant base64. Mais considérez les points suivants:

• De nombreuses images incorporées dans un fichier HTML ou un fichier CSS peuvent avoir des chaînes similaires. Pour les PNG, vous trouvez souvent des caractères "A" répétés. En utilisant gzip (parfois appelé "dégonfler"), il pourrait même y avoir une victoire sur la taille. Mais cela dépend du contenu de l'image.
• Demande de surcharge de HTTP1.1: Surtout avec beaucoup de cookies, vous pouvez facilement avoir quelques kilo-octets de surcharge par requête. L'intégration d'images base64 peut économiser la bande passante.
• N'encodez pas les images SVG en base64, car gzip est plus efficace sur XML que sur base64.
• Programmation: Sur les images générées dynamiquement, il est plus facile de les livrer en une seule requête que de coordonner deux requêtes dépendantes.
• Deeplinks: Si vous souhaitez empêcher le téléchargement de l'image, il est un peu plus délicat d'extraire une image d'une page HTML.

Cela vous coûtera certainement plus d'espace et de bande passante si vous souhaitez utiliser des images encodées en base64. Cependant, si votre site contient beaucoup de petites images, vous pouvez réduire le temps de chargement de la page en encodant vos images en base64 et en les plaçant en html. De cette façon, le navigateur client n'aura pas besoin de faire beaucoup de connexions aux images, mais les aura en html.