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


94

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?


1
La seule fois où vous voudriez faire quelque chose comme ça, c'est si vous étiez limité aux ressources de texte brut et que vous ne pouviez pas utiliser un format d'image brute pour une raison quelconque.
Wug

Il y a une bonne réponse ici: stackoverflow.com/questions/1533113/…
Steed

base64 rend les liens profonds impossibles. Cela peut être un plus.
damoeb

@Wug - Sachez que c'est loin d'être une réponse tardive et que les choses ont changé, mais ce sont certainement des moments où vous pouvez augmenter les performances en envoyant bas64. Envoyer des messages via des Websockets avec des images encodées en base64 (petites) serait plus performant que de demander chaque image par elle-même.
Philip

C'est une bonne question. Je cherchais une bonne réponse pour "enregistrer des images binaires ou encodées en base64?" et j'ai trouvé plusieurs bonnes réponses comme celle-ci
moreirapontocom

Réponses:


129

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


28
Non pas 137% plus grand, 137% de la taille originale :-) 37% plus grand (selon votre source).
Eric J.

4
Je dirais que c'est à peu près 4/3 de la taille d'origine.
kiwixz

Y a-t-il une limitation de la taille de l'image pour convertir l'image en base64?
151291

2
@Blender Mais dans mon cas, lorsque je convertis un bitmap de 70 ko en chaîne, il devient 500 ko, ce n'est pas 37%. J'ai compressé une image de 5 Mo en 70 ko, puis convertis cette image compressée en une chaîne qui devient 500 ko.
KJEjava48

@ KJEjava48: Comment le convertissez-vous en chaîne?
Blender

16

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.


14

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.


7

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)


7

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.

3

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.


Ce ne sera cependant pas un problème une fois que HTTP 2 sera vraiment passé.
Philip

@Philip C'est vrai, mais j'aime le facteur de portabilité d'avoir toutes les ressources contenues dans le fichier HTML. Cela aidera à la mise en cache Web mobile dans les zones avec des réseaux inégaux.
aalaap

@aalaap Le problème avec cela est que si vous effectuez une modification sur la page, vous devez recharger tout le contenu, y compris les images. Où si vous avez les actifs séparés, vous pouvez avoir un âge plus élevé sur ceux-ci et ils seront stockés dans le cache et non rechargés sur le cache expirer sur la page elle-même.
Philip
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.