base64で画像をエンコードするとどのような影響がありますか？

画像（jpgまたはpng）をbase64に変換すると、それより大きくなりますか、それとも同じサイズになりますか？それはどれくらい大きいのでしょうか？

Webサイトでbase64エンコードされた画像を使用することをお勧めしますか？

約37％大きくなります。

非常に大まかに言えば、Base64でエンコードされたバイナリデータの最終的なサイズは、元のデータサイズの1.37倍です。

出典：http : //en.wikipedia.org/wiki/Base64

ここでは、base64エンコードを行う場合と行わない場合の 、David Calhounによる非常に役立つ概要を示します。

基本的な答え = gzip圧縮されたbase64エンコードファイルは、ファイルサイズが標準バイナリ（jpg / png）とほぼ同等です。Gzipで圧縮されたバイナリファイルのファイルサイズは小さくなります。

テイクアウェイ = UIアイコンなどをエンコードしてgzip圧縮することにはいくつかの利点がありますが、大きな画像に対してこれを行うのは賢明ではありません。

base64で大きくなります。

Base64ではバイトあたり6ビットを使用してデータをエンコードしますが、バイナリではバイトあたり8ビットを使用します。また、Base64を使用すると、パディングのオーバーヘッドが少し発生します。非バイナリデータのみを正しく処理できるシステムでバイナリデータをエンコードするために最初に開発されたため、すべてのビットがBase64で使用されるわけではありません。

つまり、エンコードされた画像は約25％大きくなり、パディングのオーバーヘッドが一定になります。

画像をbase64にエンコードすると、約30％大きくなります。

データURIスキームに関するウィキペディアの記事の詳細を参照してください。

Base64でエンコードされたデータURIのサイズは、同等のバイナリのURIの1/3です。（ただし、HTTPサーバーがgzipを使用して応答を圧縮する場合、このオーバーヘッドは2〜3％に削減されます）

答えは次のとおりです。

base64-imageはより大きくなりますが、base64がより良い選択であるいくつかの条件があります。

base64画像のサイズ

Base64は64の異なる文字を使用し、これは2 ^ 6です。したがって、base64は8ビット文字あたり6ビットを格納します。したがって、比率は未変換データからbase64データへの6/8です。これは正確な計算ではありませんが、大まかな見積もりです。

例：

48kbの画像は、base64に変換された画像として約64kbを必要とします。

計算：（48/6）* 8 = 64

LinuxシステムのシンプルなCLI計算機：

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

または画像を使用する：

$ cat my.png|base64|wc -c

Base64イメージとWebサイト

この質問に答えるのははるかに難しいです。一般的に言って、base64を使用すると、イメージを大きくして、意味が少なくなります。ただし、次の点を考慮してください。

• HTMLファイルまたはCSSファイルに埋め込まれた多くの画像は、同様の文字列を持つことができます。PNGの場合、「A」文字が繰り返されることがよくあります。gzip（「deflate」と呼ばれることもあります）を使用すると、サイズが大きくなる可能性もあります。ただし、画像の内容によって異なります。
• HTTP1.1のリクエストオーバーヘッド：特に多くのCookieを使用すると、リクエストごとに数キロバイトのオーバーヘッドが発生しやすくなります。base64画像を埋め込むと、帯域幅を節約できます。
• base64よりもXMLでgzipの方が効果的であるため、base64でSVG画像をエンコードしないでください。
• プログラミング：動的に生成された画像では、2つの依存する要求を調整するため、1つの要求でそれらを配信する方が簡単です。
• ディープリンク：画像のダウンロードを防止したい場合、HTMLページから画像を抽出するのは少し難しいです。

base64でエンコードされた画像を使用する場合は、スペースと帯域幅が確実に高くなります。ただし、サイトに小さな画像がたくさんある場合は、画像をbase64にエンコードしてhtmlに配置することで、ページの読み込み時間を短縮できます。このようにして、クライアントブラウザーは画像に多くの接続を行う必要はありませんが、それらはhtmlにあります。