Data URI Encoder

データURIエンコーダー

Input
Result

概要

「データURIスキーム (Data URI scheme)」とは、外部ファイルを使わずに、URI形式でデータを表現する仕様です。

このページは画像や音声ファイルを「データURI」形式に変換する機能を提供します。 ざっくり言うと、バイナリファイルを使わずにテキストのみで画像や音声を表現できるようになります。

Base64でのエンコードになるため、データサイズは元の約1.33倍になりますが、 リクエストの数が減らせるという点と、管理するファイルの数を減らせるというメリットがあります。

URIは「Uniform Resource Identifier」の略で統一資源識別子、URLは「Uniform Resource Locator」の略で 統一資源位置指定子のことです。URIはURLの考えを拡張した概念で、あとから規定されました。 URIスキーム / URLスキームの代表的なものに、http, https, ftp, mailtoがあります。

補足

コメント

対応フォーマットはJPEG, PNG, GIF, BMP, MP3, WAVです。そして、ファイルサイズが「1 MB」以下のファイルが処理対象です。

サイズの上限に関する話ですと、RFC2397(data URL scheme), RFC1866(HTML)に定められた仕様としては、 属性値の上限として「LITLEN 1024」があります。ですのでIMG要素のSRC属性に書く場合には、 「1KB」が上限と言うことになります。あくまでもRFCの仕様としては。 当然、RFCの仕様とブラウザの実装は必ずしも一致しているわけではありません。また JavaScriptやStyle Sheetから使用する際の上限値は…RFC2397には何も書いておらず分かりませんでした。

ネット上の情報で「FireFox2が100KBまで」「IE8は32KBまで」等、古い情報はよく見かけるのですが、 ここ2~3年以降の比較的新しいブラウザに通用する情報は見当たりませんでした。 それではと、一応100KB超のデータとして189KBのMP3データをJavaScript内で使用したサンプルを作って、 2015/01/11時点での主要ブラウザの各最新版「Chrome39, IE11, FireFox34」で試したところ、すべて使えました。

ですので、上限はあまり気にせず使っても問題ないかもしれません。 とはいえ一応サポート対象と考えているブラウザで動作確認をすることをお勧めします。

この機能ではファイル内容を評価するために、ファイルをサーバー上に一時的に保存しますが、 結果の表示後、即時削除します。ご安心ください。

「データURIスキーム」は本来、画像・音声以外のバイナリファイルやテキストファイルでも使用できます。 例えばJavaScriptの外部ファイルの代わりに、データURIで表現しても問題なく動作します。 しかし、実際には画像ファイルで使用されることが圧倒的に多いです。

JavaScriptやCSSを約1.33倍に膨らませてまでHTMLに記述するくらいなら、データURIを使わずに 普通にSTYLE要素やSCRIPT要素内に記述た方がいいでしょう。また、動画ファイルなら一度に多くのファイルを 読み込むということはまずありませんし、さらにBase64エンコーディングにかけるには大きすぎるでしょう。 そのような理由で、データURIスキームは実質的に「画像を表現するための仕様」のように扱われることが多いのだと思います。

しかしちょっとした効果音にも利用できるでしょう。このサイト内ですと、 「スカイツリーは俺何人分?」のページの効果音でデータURIスキームを利用しています。

「Result」下の「Size」は、元ファイルサイズと、BASE64エンコード後の文字列のサイズです。 「data:image/jpeg;base64,」等の部分は含めていません。 ですので特に末尾に「=」のつかないケースではきっちり133.333%になるはずです…。

関連

ちょこっとアンケート&メッセージ

このページに関するちょっとした感想または、要望、バグ・間違いの指摘、 質問・その他お問合せ等は、下記の送信欄からお送りください。 返信をご希望の方は「こちらのページ」からメッセージをお送りください。

「このページはお役に立ちましたか?」のアンケートとメッセージのどちらか一方でかまいません (両方書いていただけるとよりうれしいです)。お気軽にご利用ください (感想・フィードバック・どんな用途で使用したかなどをいただけると作成・運営の励みになります!)


このページはお役に立ちましたか?