画像を、観ることも、描くことも、編集することも、フォーマット変換することも大好きな、ユゲタです。
base64フォーマットって、使わなくても全く困らないんですが、使ってみると結構便利な点も多く、必要に応じて使用すると効果的なので、そのメリット・デメリットをまとめておきます。
base64の使い方
base64データは、基本的に文字列データです。
画像ファイルをbase64データに変換するのは非常に簡単で以下のようにするだけです。
base64 %ファイル名%
......
base64 triangle-down.svg
PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3Mi43MiA3Mi43MTkiPg0KPHBhdGggZD0iTTcyLjcyLDY1LjY4NkgwTDM2LjM2LDcuMDM0TDcyLjcyLDY1LjY4NnogTTUuMzg4LDYyLjY4Nmg2MS45NDNMMzYuMzYsMTIuNzI3TDUuMzg4LDYyLjY4NnoiIHN0eWxlPSJ0cmFuc2Zvcm0tb3JpZ2luOmNlbnRlcjt0cmFuc2Zvcm06cm90YXRlKDE4MGRlZyk7Ii8+DQo8L3N2Zz4=
また、画像ファイルだけでなく、色々な文字列データもbase64化して便利に利用できます。
例えば、javascriptでjsonデータやcsvデータなどをphpに送る場合など、パケット送信の際に不具合になる文字列が発生するのを防ぐ為に、base64データにすることで、そうした不具合をなくすことも可能です。
変換したbase64データはIMGタグに以下のようにして使用することができます。
// pngファイル
<img src="data:image/png;base64,...">
// jpegファイル
<img src="data:image/jpeg;base64,...">
// gifファイル
<img src="data:image/gif;base64,...">
// svgファイル
<img src="data:image/svg+xml;base64,...">
またcssファイルには以下のようにすることで画像データを内包することが可能になります。
element:before{
content : url(data:image/png;base64,...);
}
"image/***"部分はMIME（マイム）といって、画像フォーマット（拡張子）毎に変更する必要があります。
imgタグとcssは同じものが使えるので、覚えておくと便利に使えるでしょう。
javascriptでのbase64エンコード、デコードは以下のようにします。
var txt = "文字列";
// 2バイト文字はURI文字列に変換
var txt2 = encodeURIComponent(txt);
> "%E6%96%87%E5%AD%97%E5%88%97"
// エンコード 文字列 -> base64
btoa(txt2);
> "JUU2JTk2JTg3JUU1JUFEJTk3JUU1JTg4JTk3"
// デコード base64 -> 文字列
var txt3 = atob("JUU2JTk2JTg3JUU1JUFEJTk3JUU1JTg4JTk3")
> "%E6%96%87%E5%AD%97%E5%88%97"
// 元の文字列に戻す
decodeURIcomponent(txt3)
> "文字列"
PHPではもっと簡単で以下のようにエンコード・デコードすることができます。
<?php
$txt= "文字列";
$txt_enc = base64_encode($txt);
echo "encode : ".$txt_enc.PHP_EOL;
> encode : 5paH5a2X5YiX
$txt_dec = base64_decode($txt_enc);
echo "decode : ".$txt_dec.PHP_EOL;
> decode : 文字列
2バイト文字をそのまま変換できて便利なのですが、そのデータをjavascriptでデコードしても、2バイト文字での復元はできないので、相互互換を保つためにphpでもurlencode,urldecodeを使用することをおすすめします。
base64の使い所
base64は上記にも書きましたが以下のようなケースで使用することができます。
1. 画像ファイルをhtmlやcssに内包して使用
2. どんな文字列も他のシステムに安全に受け渡しが行える
3. 画像ファイルの中身をテキスト(base64データ)にして、ファイルとしても扱える
個人的な使用ポイントは、svgデータをbase64に変換して、cssデータとして使うのが外部に画像ファイルを持たなくて簡単なアイコン表示ができるようになるので、便利に使えています。
メリット
パケットのリクエスト数の軽減（ファイル数）
インターネット通信において、通常のパケット通信は１ファイルにつき、１リクエストが発生します。
何かしらのライブラリやフレームワークを使うと、膨大なリクエスト数が発生してしまいますが、独自で構築するシステムで、そうした数を減らして、リスエストに関連するパケット総数を減らす事が可能になります。
またhttp2.0になれば関係なくなりますが、http1.1の状態では、ブラウザがリクエストパケットの同時ダウンロードを2ファイルに制限するというそもそもの仕様が邪魔をして、リクエスト渋滞が発生します。
多くのインターネットサイトは、この状態でサイト表示スピードが遅くなってしまっているのをGoogleなどは、基本的に使用する画像は１ファイル化して、リクエストを最小限に抑えている技術を使用したりもしています。
個人のホームページを発信するレベルではあまり気にしなくてもいいかもしれませんが、月間PVが膨大なWEBサービスを構築する際などは、こうした細かな通信容量を抑えることで、システムの安全運転も可能になります。
難読化
jsonコードなどもbase64化することで、簡易な難読化を行うことは可能です。
少なくともプログラム知識が無いとデコードできませんからね。
// エンコード処理 -----
// 元データ
var json = {
a : 1,
b : 2,
c : 3,
str : "２バイト文字列"
};
// 文字列化
var str = JSON.stringify(json);
console.log(str);
> {"a":1,"b":2,"c":3,"str":"２バイト文字列"}
// urlエンコード
var uri = encodeURIComponent(str);
console.log(uri);
> %7B%22a%22%3A1%2C%22b%22%3A2%2C%22c%22%3A3%2C%22str%22%3A%22%EF%BC%92%E3%83%90%E3%82%A4%E3%83%88%E6%96%87%E5%AD%97%E5%88%97%22%7D
// base64化
var base64 = btoa(uri);
console.log(base64);
> JTdCJTIyYSUyMiUzQTElMkMlMjJiJTIyJTNBMiUyQyUyMmMlMjIlM0EzJTJDJTIyc3RyJTIyJTNBJTIyJUVGJUJDJTkyJUUzJTgzJTkwJUUzJTgyJUE0JUUzJTgzJTg4JUU2JTk2JTg3JUU1JUFEJTk3JUU1JTg4JTk3JTIyJTdE
// デコード処理 -----
// base64 -> urlエンコードデータ
var uri2 = atob(base64);
// urlエンコードデータ -> 文字列JSONデータ
var json2 = decodeURIComponent(uri2);
// 文字列JSONをパース
var data = JSON.parse(json2);
復元（デコード）できる
文字列をセキュリティ対策として、エンコード、デコードすることは、情報社会となったインターネット界隈では、必須事項です。
もちろん、鍵コードなどを用いた暗号化も有効ですが、特別なプログラムを必要とせず、ほぼデフォルトで使用できるbase64は、安易ですが、悪くないデータ・フォーマットと考え得られますね。
どうしてもセキュリティレベルを高めたい時に、変換したbase64データを暗号化するという手法も悪くないですからね。
データベースを覗かれた時に、base64化されたデータばかりの場合、人間が見ると一流プログラマーでも、少しめんどくさい感じは起きますからね。
デメリット
一方で
文字データとしてはかなり膨大になる
サンプルは比較的短い文字列を変換したんですが、メガ単位の画像データ等を変換した場合、とんでもない文字数の文字列が発生します。
もはや手作業でコピペするなどというのは暴挙に近い感覚ですね。
個人的には、svgファイルをシェイプアップして変換しようするのが便利に使えるポイントですね。
データが大きくなる
バイナリデータをbase64エンコードすると、文字列データになりますが、以下のように容量が変化します。
350kbのjpegファイル
base64データに変換したファイル容量
467kb
結構増えますね・・・
でも、base64文字列で保存されたjpegファイルは普通にimgタグで読み込む事も可能ですよ。
メリット、デメリットを踏まえて、便利に使って、効率的なサイト構築を理解しておきましょう。
