画像ファイルをバイナリではなくテキストで扱うbase64フォーマットって便利なのだろうか?

Pocket
LINEで送る
GREE にシェア
LinkedIn にシェア

こんにちわ。
 

画像を、観ることも、描くことも、編集することも、フォーマット変換することも大好きな下駄です。
 

base64フォーマットって、使わなくても全く困らないんですが、使ってみると結構便利な点も多く、必要に応じて使用すると効果的なので、そのメリット・デメリットをまとめておきます。

base64の使い方

base64データは、基本的に文字列データです。
 

画像ファイルをbase64データに変換するのは非常に簡単で以下のようにするだけです。
 

 

また、画像ファイルだけでなく、色々な文字列データもbase64化して便利に利用できます。
例えば、javascriptでjsonデータやcsvデータなどをphpに送る場合など、パケット送信の際に不具合になる文字列が発生するのを防ぐ為に、base64データにすることで、そうした不具合をなくすことも可能です。
 

変換したbase64データはIMGタグに以下のようにして使用することができます。
 

&bnsp;

またcssファイルには以下のようにすることで画像データを内包することが可能になります。
 

 

“image/***”部分はMIME(マイム)といって、画像フォーマット(拡張子)毎に変更する必要があります。
 

imgタグとcssは同じものが使えるので、覚えておくと便利に使えるでしょう。
 

javascriptでのbase64エンコード、デコードは以下のようにします。
 

 

PHPではもっと簡単で以下のようにエンコード・デコードすることができます。
 

 

2バイト文字をそのまま変換できて便利なのですが、そのデータをjavascriptでデコードしても、2バイト文字での復元はできないので、相互互換を保つためにphpでもurlencode,urldecodeを使用することをおすすめします。

base64の使い所

base64は上記にも書きましたが以下のようなケースで使用することができます。
 

1. 画像ファイルをhtmlやcssに内包して使用
2. どんな文字列も他のシステムに安全に受け渡しが行える
3. 画像ファイルの中身をテキスト(base64データ)にして、ファイルとしても扱える

 

個人的な使用ポイントは、svgデータをbase64に変換して、cssデータとして使うのが外部に画像ファイルを持たなくて簡単なアイコン表示ができるようになるので、便利に使えています。
 

メリット

パケットのリクエスト数の軽減(ファイル数)

インターネット通信において、通常のパケット通信は1ファイルにつき、1リクエストが発生します。
 

何かしらのライブラリやフレームワークを使うと、膨大なリクエスト数が発生してしまいますが、独自で構築するシステムで、そうした数を減らして、リスエストに関連するパケット総数を減らす事が可能になります。
 

またhttp2.0になれば関係なくなりますが、http1.1の状態では、ブラウザがリクエストパケットの同時ダウンロードを2ファイルに制限するというそもそもの仕様が邪魔をして、リクエスト渋滞が発生します。
 

多くのインターネットサイトは、この状態でサイト表示スピードが遅くなってしまっているのをGoogleなどは、基本的に使用する画像は1ファイル化して、リクエストを最小限に抑えている技術を使用したりもしています。
 

個人のホームページを発信するレベルではあまり気にしなくてもいいかもしれませんが、月間PVが膨大なWEBサービスを構築する際などは、こうした細かな通信容量を抑えることで、システムの安全運転も可能になります。

難読化

jsonコードなどもbase64化することで、簡易な難読化を行うことは可能です。
 

少なくともプログラム知識が無いとデコードできませんからね。
 

復元(デコード)できる

文字列をセキュリティ対策として、エンコード、デコードすることは、情報社会となったインターネット界隈では、必須事項です。
 

もちろん、鍵コードなどを用いた暗号化も有効ですが、特別なプログラムを必要とせず、ほぼデフォルトで使用できるbase64は、安易ですが、悪くないデータ・フォーマットと考え得られますね。
 

どうしてもセキュリティレベルを高めたい時に、変換したbase64データを暗号化するという手法も悪くないですからね。
 

データベースを覗かれた時に、base64化されたデータばかりの場合、人間が見ると一流プログラマーでも、少しめんどくさい感じは起きますからね。

デメリット

一方で

文字データとしてはかなり膨大になる

サンプルは比較的短い文字列を変換したんですが、メガ単位の画像データ等を変換した場合、とんでもない文字数の文字列が発生します。
 

もはや手作業でコピペするなどというのは暴挙に近い感覚ですね。
 

個人的には、svgファイルをシェイプアップして変換しようするのが便利に使えるポイントですね。

データが大きくなる

バイナリデータをbase64エンコードすると、文字列データになりますが、以下のように容量が変化します。
 

350kbのjpegファイル
 

 

base64データに変換したファイル容量
 

467kb
 

結構増えますね・・・
 

でも、base64文字列で保存されたjpegファイルは普通にimgタグで読み込む事も可能ですよ。
 

メリット、デメリットを踏まえて、便利に使って、効率的なサイト構築を理解しておきましょう。

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です