Data URI Encoder
データURIエンコーダー
概要
このページは画像や音声ファイルを「データURI」形式に変換する機能を提供します。 これを利用するとWebページなどで、バイナリファイルを使わずテキストのみで画像や音声を表現できるようになります。
Base64でのエンコードになるため、データサイズは元の約1.33倍になりますが、 リクエストの数が減らせるという点と、管理するファイルの数を減らせるというメリットがあります。
対応フォーマットは「JPEG, PNG, GIF, BMP, MPEG, WAV, MIDI」です。そして、ファイルサイズが「5 MB」までのファイルが処理対象です。
「Result」下の「Size」は、元ファイルサイズと、BASE64エンコード後の文字列のサイズです。
補足
コメント
「データURIスキーム (Data URI scheme)」とは、外部ファイルを使わずに、URI形式でデータを表現する仕様です。
URIは「Uniform Resource Identifier」の略で統一資源識別子、URLは「Uniform Resource Locator」の略で 統一資源位置指定子のことです。URIはURLの考えを拡張した概念で、あとから規定されました。 「URIスキーム / URLスキーム」の代表的なものに、「http, https, ftp, mailto」があります。
「データURIスキーム」は本来、画像・音声以外のバイナリファイルやテキストファイルでも使用できます。 例えばJavaScriptの外部ファイルの代わりに、データURIで表現しても動作します。 しかし、実際には画像ファイルで使用されることが圧倒的に多いです。
JavaScriptやCSSを約1.33倍に膨らませてまでHTMLに記述するくらいなら、データURIを使わずに 普通にSTYLE要素やSCRIPT要素内に記述た方がいいでしょう。また、動画ファイルなら一度に多くのファイルを 読み込むということはまずありませんし、さらにBase64エンコーディングにかけるには大きすぎるでしょう。 そのような理由で、データURIスキームは実質的に「画像を表現するための仕様」のように扱われることが多いのだと思います。
しかし、短めの効果音などで利用するのも有効だと思います。このサイト内では、 「スカイツリーは俺何人分？」「今年の恵方はどっち？」の効果音でデータURIスキームを利用しています。
サイズの上限に関する話ですと、RFC2397(data URL scheme), RFC1866(HTML)に定められた仕様としては、 属性値の上限として「LITLEN 1024」があります。ですのでIMG要素のSRC属性に書く場合には、 「1KB」が上限ということになります。しかしRFCの仕様はあくまでも最低限実装しなければならない仕様であって、 それ以上対応してはいけないということではありません。
一応100KB超のデータとして189KBのMP3データをJavaScript内で使用したサンプルを作って、 2015/01/11時点での主要ブラウザの各最新版「Chrome39, IE11, Firefox34」で試したところ、すべて使えました。
ですので、上限はあまり気にせず使っても問題ないかもしれません。 とはいえ一応サポート対象と考えているブラウザで動作確認をすることをお勧めします。
関連・参考リンク
ちょこっとアンケート＆メッセージ
このページに関するちょっとした感想または、要望、バグ・間違いの指摘などは、下記の送信欄からお送りください。 質問・その他お問合せなど、返信をご希望の方は「こちらのページ」からメッセージをお送りください。
「このページはお役に立ちましたか？」のアンケートと自由メッセージのどちらか一方でかまいません (両方だとよりうれしいです)。お気軽にご利用ください (感想・どんな用途で使用したかなどをいただけると作成・運営の励みになります！)。
このページはお役に立ちましたか？
画像のひらがな一文字を入力してください。拗音・促音・濁点・半濁点はありません。
※サンプルの追加・ツール改善の参考に利用させていただきます。