JavaScript 内で無圧縮 ZIP を作って Data URI を生成するライブラリを作りました - IT戦記
ちょっと思うところあって JavaScript 内で、複数のファイル情報を作って Zip で固めて、 Data URI を生成するライブラリを作ってみました。 ソースは以下の zip.js です。 http://svn.coderepos.org/share/lang/javascript/Zip/ 使うには 以下の base64.js が必要です。 http://svn.coderepos.org/share/lang/javascript/Base64/trunk/ この base64.js は弾さんが作ったものです。 今回 Zip で使うように、ちょっとチューニングさせていただきました。 こんなことができます // zip オブジェクトを作る var zip = new Zip; // 文字列をファイルとして追加する zip.addString('Hello, world!!', '
The data: URI kitchen
Google のウェブ検索結果でウェブページのスクリーンショットに使われている data URI scheme。 data:[<mediatype>][;base64],<data> 形式のデータ (data URI scheme) を生成してウェブページに埋め込むことで HTTP リクエストを減らせるメリットがある。ただ、バイナリデータより3割ほどデータサイズが増える。 ファイルサイズが小さいアイコンを直接埋め込んだり、ブラウザが PC より対応しているスマートフォンでも使われ出している。ということで、画像のバイナリデータを Base64 にエンコードするツールをつくった。出力形式も HTML の img、CSS、JavaScript、生データに対応。 ツールの提供は終了しました。 data URI scheme がサポートしている HTML タグは object (images onl
スタイルシートの中で画像を多数呼出していると、HTTPリクエストが大量発生してページの読み込みが遅くなります。このような場合、CSS Spriteを使って回避することが一般的ですが、Data URIを使うと運用はもっと簡単です。 CSSファイルへの埋込 例えばOSSCafeの場合、サイトのCSS内で16ほどの画像ファイルを読込んでいます。 body { background-image:url(images/body.png) } body>header { background-image: url(images/header.png) } body>header div.center>h1 { background-image:url(images/logo.png) } ...(略) body { background-image:url(data:image/png;base64,
こんにちは、@poyosiです。皆さんdata URI Scheme使ってますか？ 私は全然使ってません。 data URI Scheme（データ ユーアールアイ スキーム）自体はかなり昔からありますが、知っておいて損はないと思いますので、おさらいの意味も込めて書きたいと思います。 そもそもURI Scheme（ユーアールアイ スキーム）とは？ data URI Schemeのお話をする前に、そもそもURI Schemeって一体なんなの？というところを簡単にご説明したいと思います。 一般的にURI Schemeはあまり聞きなれないワードかと思いますが、実は身近なところで広く使われています。 例えば、Webサイトにアクセスするときに「http://exsample.com」というURLをブラウザに入力して表示させますよね？ このURI（URL）先頭部分に記述される「http」のような「どのよ
SVGをdata URI schemeに変換するとき文字化けしないように必要なこと - 聴く耳を持たない(片方しか)
現在、パソコン、スマートフォン、タブレットと様々な画面サイズの情報機器が世の中に溢れています。そうした端末に適切に対応するには画像も色々なサイズのものをいくつも用意する必要があるわけですが、SVGのようなベクター画像であればそうした手間も少なくて済むのがメリットです。 例えば、AppleのサイトではロゴにSVGを使っています。 https://www.apple.com/jp/iphone/ そしてそのロゴを調べてみるとSVGをdata URI schemeで指定しているのが分かりますね。 data URI schemeはHTML文書内に記述できるため、画像ファイルのリクエストを減らして素早く画面表示が行えるという利点がありますから、世界中から多くのアクセスを集めるAppleのサイトで採用されているのでしょう。 こうした使われ方も多いことから、data URI schemeを簡単に作成でき
以前「WordPressテーマ iNove のYSlow的サイト最適化」で CSS Sprites によるHTTPリクエストの削減に取り組みました。しかしながら、繰り返し画像などはSprites化が出来ないため、どうしても幾つかの画像が残ってしまいます。 そこで、さらなるサイトの最適化を目指し、人気のデザイン系Webサイト CSS-Tricks で紹介されている「Data URIs」という技術を取り入れてみました。 1.Data URI って何？ Data URI とは、「ドキュメントに直接埋め込まれたデータにアクセスするためのスキーム」のことで、RFC2397 には次の様な書式が定義されています。埋め込むデータは base64 もしくは7ビットASCIIエンコードでテキスト文字列にエンコードします。 data:[<mime type>][;charset=<charset>][;base
快速ページ表示のためのblank.gifのdata URI化、最短表現や処理の重さを実際にテストしてみた | 初代編集長ブログ―安田英久
今日は、Webページを素早く表示するために、lazyloadやスプライトで使うblank.gif画像をdata URI化する手法に関して。モダンブラウザで表示に問題のない最短文字数とデコード処理にかかる時間を調査してみました。ちょっと技術的です。 blank.gifというと、古い人には「スペーサーかよ！」と思われるかもしれませんが、今でも画像のlazyloadに使ったり、スプライト画像のベースに使ったりと、意外と使うものです。 このblank.gifを「data URI化」するとページ表示が早くなるんじゃないかと思い、調査したりテストしたりしてみました。結論としては、次のようなものでした。 モダンブラウザで正しく表示されるblank.gifのdata URIは最短74文字の次の表現：data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAA
data URI scheme
The data URI scheme is a uniform resource identifier (URI) scheme that provides a way to include data in-line in Web pages as if they were external resources. It is a form of file literal or here document. This technique allows normally separate elements such as images and style sheets to be fetched in a single Hypertext Transfer Protocol (HTTP) request, which may be more efficient than multiple H
データURIスキーム（英語: data URI scheme）とは、あたかも外部リソースを読み込むのと同じように、ウェブページにインラインにデータを埋めこむ手段を提供するURIスキームである。ファイルリテラル、あるいはヒアドキュメントの一形態である。この技術を利用することで、通常は別のデータに分かれている画像やスタイルシートなどの要素を、1つのHTTPリクエストによって読み込むことが可能になる。これにより、HTTPリクエスト数が削減され、データの転送効率が改善される可能性がある[1]。また、一部のブラウザ拡張機能でも、画像などのコンテンツを単一のHTMLファイル内にパッケージングしてユーザーに届けるために利用されている[2][3]。2018年現在、データURIは主要なほとんどのブラウザで完全にサポートされている。ただし、Internet ExplorerとMicrosoft Edgeでは、
「MyShortcuts+Viewer」がiOS8になって、ウィジットに対応してから、なかなか「iOS8の可能性」が増えたと思います。ウィジット内でHTMLを表示できるので、動画を埋め込んだり、リンクを作ったりできます。 そして、iOSといえば「URLスキーム」というものが有り、アプリを起動するアドレスのようなものです。それらをアイコン付きでウィジットに表示しちゃえば、ソレはまるでランチャーのようになります。そんなすばらしいやってみました。 ところが、画像は通知センターを開く度に読み込むので、それなら「Data URIで埋め込んじゃえ」ということで、すべてウィジットに埋め込んだ状態のやり方をご紹介します。 Data URIで埋め込みData URIとは？通常、画像ファイルは「サーバー」に一旦保存して、そこを参照するためにURLが当てはめられます（http://~~~.jpg)。ソレはつまり
Drag & drop image file(s) here One at a time, in a bunch, or bunches. Alternatively tap / click to choose file(s). Data-URI base64 conversion Can help improve page load performance over HTTP/1 connections by bundling multiple images into a single cacheable style sheet, or by embedding small images directly into the HTML itself. When using base64 data-URIs Optimise first Most designers don’t tend t
WordPressの記事内の画像をData URIで扱ってサイトを高速化させる方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、CTOのづやです。 WordPressを利用していた際、サイト高速化の実験として記事詳細ページで使用する画像をData URIにできないかなと思い、以下のことを試してみました。 記事詳細ページで使用する画像をData URIで扱ってみた なるべくすぐ戻せるように、通常の画像サイズも選べるような作りを目指して、アップロード時点でBase64エンコード版のサイズを用意する形で実装しています。 functions.phpに記載する形です。 // 画像サイズ名を定数で宣言(今回はbase64って名前で作成しています) define("BASE64_IMAGE_KEY" , "base64"); // エンコードする画像のサイズを追加しておく add_image_size(BASE64_IMAGE_KEY , 400 , 400); // 画像ファイルアップロードのメタデータ保存の際にエ
data URI Schemeを使ってHTTPリクエストを削減する方法を紹介します。 １．概略 HTMLで画像を表示する場合、 <img src="http://user-domain/foo.jpg" /> という風に、httpを使ってサーバ上の画像ファイルを表示させるのが一般的ですが、httpの代わりにdata URI Schemeを使えば、HTMLファイルに埋め込んだインラインデータで画像を表示することができます。 ２．data URI Schemeとは RFCの規定上、http、https、ftpなどは「URI Scheme（スキーム）」と呼ばれます。 data URI Schemeは、「http」にあたる部分が「data」であるURI Schemeのことを指し、RFC2397で規定されています。 ３．data URI Schemeの構文とサンプル data URI Schemeの
Firefox2、Opera9のみ。 Drawing text using a canvas - MDCとtoDataURLメゾッドを使えば、テキストを画像にすることができる。 LDRの未読数をfaviconに表示するGreasemonkeyスクリプト - 素人がプログラミングを勉強するブログ nsIDOMHTMLCanvasElement#toDataURLなんてものがあるのか。 javascript:(function(){ var c = document.createElement("canvas"), img = document.images[0]; c.width = img.width; c.height = img.height; c.getContext("2d").drawImage(img, 0, 0); prompt(img.src, c.toDataURL())
【WordPress高速化日記】アイコン画像の表示をdata URI schemeで高速化 – 旧・中川勉社会保険労務士事務所FPウェブシュフ
サイトを制作していると、ソーシャルボタンをはじめ結構な数のアイコン画像を使いますよね。でも、アイコンの種類が増えてくると、画像ファイルの呼び出し回数が増えてページの表示が遅くなります。これを改善する方法の一つがdata URI schemeです。 画像が多いとなぜ遅くなるのか ウェブページは、そのページを閲覧している端末からHTTPリクエストを受けたサーバーが、要求されたデータをHTTPレスポンスとして各端末に返すことで表示されています。 画像の枚数と同じ回数のHTTPリクエストが必要になります。 そのうえ画像が増えるとサーバーから受け取るデータ量も増加します。 つまり画像が増えるとページの表示速度がダウンするのです。 ページを軽くするには ページを軽くする対策は以下の二点から考えなければいけません。 サーバーから呼び出す画像の枚数を減らし、HTTPリクエストの数を減らす。 サーバーから呼
Data URI化した画像とその再利用性
Data URI化した画像はHTTPリクエストの削減に大いに役に立つので積極的に使って良いと思う。けど、CSSにおいて変数が使えないことなどの理由からその再利用性は低いため、注意して書かないと同じData URI化した画像がいくつもCSSに出てくるなどという無駄につながりかねない。極端な例では3KBくらいのData URI化した同じ画像が8から10以上出てくるCSSファイルとか見たことが何回もある。 単なるアイコンなどは使い回しすることはあまりなく、クラス名に紐付けられるだけなのでこういう問題は起こらないけど、上記のような透過させたグラデーションのような使い回すことを意図したテクスチャを違う背景色と混ぜてアレンジするというような使い方においてData URIを利用すると重複が起こりやすい。そういう時にはOOCSS的なアプローチでData URI化した画像を使うためだけのクラスを作ってセレク
Knapsackはdata URIを使ってオンラインリソースをパックする。 [/s2If] KnapsackはRuby/Sinatra製のフリーウェア（ライセンスはDo What The Fuck You Want To Public License）。個人的にWebアーカイブは便利な技術だと思っている。Webページをアーカイブにまとめ、後でいつでも閲覧することができる。画像などのファイルがまとまっているので移動したりするのも楽だ。 任意のデータをパック サイト内で使われている画像であれば、data URIを使えばページ内に埋め込むことができる。これは何も画像に限ったものではない。どんなデータでもパックすることができるのだ。それを実現するWebアプリケーションがKnapsackだ。 KnapsackはシンプルなWebアプリケーションで、URLを指定して実行すると外部コンテンツを取得し、da
Mozilla Re-Mix: ページ上の画像からData URI（ファビコン）を生成できるFirefoxアドオン「Image2Icon」
CSSやスクリプトを書いたり編集したりしたことのある方なら、そこにData URI文字列を記述し、アイコンなどを表示させたことがあると思います。 この方法なら、リクエスト回数を減らしたり実際にファイルを用意しなくてもいいなどのメリットがありますが、様々な画像をこうした形式に変換するのはちょっと面倒ですね。 ローカルにある画像やウェブページに表示している画像をこうした形式に変換することも多いと思いますが、もっと簡単にアイコン化させることができるようになれば、作業効率も良くなるのではないでしょうか。 このような作業を行うことが多い方に便利なFirefoxアドオンが「Image2Icon」です。 「Image2Icon」は、ウェブページ上に表示されている画像やローカルにある画像から、非常に簡単な操作でアイコンやData URI文字列を取得することができるというアドオンです。 アドオンをインストー
Data URIスキームとは Data URIスキームとは、テキストや画像などのリソースをURIで表すことができる仕組みです。 まずはソースコードの記述がどのように変わるのか、そしてブラウザの表示結果がどのようになるかみてみましょう。 たとえば、HTMLで以下のようなimg要素があったとします。 <img src="sample.gif" alt="logo"> Data URIスキームを使用すると以下のように記述することができます。 <img src="data:image/gif;base64,R0lGODlhfQFUAKIGAP///8zMzJmZmWZmZjMzMwAAAP///wAAACH5BAEAAAYALAAAAAB9AVQAAAP/CLrc/jDKSau9OOvNu/（略）"> ソースコードがかなり長くなりました。これは画像データ（sample.gif）を64種類の英数字で
ファビコンでData URIは使えるか
ちょっとした理由があって、外部リソースにまったく依存しないページを作る必要があった。大抵のもののインライン化については知識があったのだけど、ファビコンをData URIでインライン化できるかはよく知らなかったため簡単なテスト・ページを作って調べてみたが、ChromeやFirefoxでは大丈夫なようだった。 Demo: Data URI Favicon 単色の緑の四角がファビコンとして表示されれば対応していることになる。表の通り、Chrome 39やFirefox 33では問題なく表示された。対してInternet Explorer 11(及び12)ではうまく読めなかった。ファビコンの参照はlink要素で行うため、読める方が好ましいはずだ。Internet Explorerの実装が行き届いていないと言って良い。 簡単に回避する手段もなさそうなので、ファビコンをインライン化するのは難しいと結論
imgのsrcにdataURIでSVGを指定する際の手順をメモ。 1. IllustratorでSVGを書き出す。 [別名で保存]、若しくは[WEBおよびデバイス用に保存]でSVGを書き出す。ロゴくらいならデフォルトの書き出しでいいかも。パスの数が膨大でファイルサイズの削減が必須な場合はカヤックさんの下記記事のようにオプションをゴニョゴニョするみたい。 SVG女子を90%軽くしたSVG軽量化テク+α #svggirl | KAYAC DESIGNER'S BLOG - デザインやマークアップの話 2. SVGファイルを編集 100px×95pxの星を書き出したSVGファイルをテキストエディタで開くと下記みたいなXMLで構成されている。 <?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 13.0.
Chromeの拡張機能ではchrome.webRequestというAPIが提供されており、これを使って特定のURLへのアクセスを別のURLへリダイレクトさせることができます。 この時リダイレクト先のURLをdata URI schemeで指定してあげることで、既存のページへのリダイレクトだけでなく任意のデータを返す事が出来ます。 JavascriptのXHRのテストで使うこともあるかなーと思ったので、拡張機能として使えるところまで作ったものをChrome Web Storeにて配布中です。 バーミッションの設定 chrome.webRequestでリダイレクトを行う場合は、 manifest.jsonのパーミッションで"webRequest"と"webRequestBlocking"、それとwebRequestで監視するURLを指定します。
読み込んだ画像をData URI schemeでbase64のテキストに変換するツール。 画像をテキストに変換することでHTMLやCSSの内部に画像データを直接埋め込むことができます。 まず最初に、テキストに変換したい画像を読み込みます。 ボタンを押すと読み込むファイルを選択するためのダイアログが表示されるので、変換したい画像ファイルを選択してください。 画像ファイルをボックスに直接ドロップすることでも選択できます。 読み込みが完了すると、画像は自動的にテキストに変換されます。 テキストボックス内に表示された「data:image/png;base64…」から始まるテキストがbase64で変換された画像データです。 このテキストを任意の場所に貼り付けることで画像を埋め込むことができます。
A client-only html5 file api multiupload data uri generator, does not require a server upload, so it's super-fast! This generator works in IE 10+ and the latest versions of Chrome and Firefox. You can find a Data URI browser support table at caniuse.com. One more thing; there seems to be a maximum file size it seems to work for, this differs for every browser and OS. Optimize your images! You can
The data: URI scheme allows you to build URLs that embed small data objects. data: URIs are supported by most modern browsers - you can read about browser support here. They are very useful in a couple of specific areas such as embedding graphics and other data items in web pages, CSS files or Greasemonkey scripts. You can read more about data: URIs and see some examples of their use, or use the g
uu59のメモ | vimでファイル名をData URIに置換する
選択範囲をそのまま外部プログラムに渡して実行結果で置換したかったんだけど、vim-operator-userを使うのが手っ取り早そうだったので使ってみた。 .error { background-image: url(/icons/gnome_dialog_warning.png); } こんな感じのCSSで、/icons/gnome_dialog_warning.pngをビジュアルモードで選択してるときに任意のキー（ここではBとする）を押すと .error { background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAABIAAAASABGyWs+AAAACXZwQWcAAAAYAAAAGAB4TK
読了: 約 6 分 前職の時には使用しなかったので詳しい事はあまり分かっていなかったのですが、 現在スマホのブラウザアプリをごりごり創っていて、data URI Schemeも結構使えるんじゃなかろうかという事で 簡単にメモ・おさらいしておきます。 目的 ・HTTP Requestの回数削減によるスマートフォンでのページ高速化 使用されている方はもう分かっているかと思いますが、 CSS spriteとどっちがいいのかなという事で。 そもそもdata uriって何？URLなの？ 正直そう僕も思っていました。 そうしたら、英語の記事でも、『URI,not URL』とそんな事が書かれていました。笑 そもそものuri schemeについて これについては分かり易い記事があったので、こちらを参考にしてください。 メリット・デメリット メリット パフォーマンスが上がる CSS spriteで大量発生す
Base 64ではなくURLエンコードを利用したData URIなSVGは記号類以外は普通のテキスト。なので簡単なものならばSassのインターポレーション機能(#{$foo})を使いダイナミックにデータを弄ることができる。一年半前くらいにヨモツネットで書かれてたグラデーション・ミックスインとかで使われている。それのもっと単純で即戦力な利用例。 例えばSVGのfillで使う色をSassで定義したカラースキームに従ったものに変えるようにできる。通常はカラースキームからカラーコードをコピーし、それを使ってSVGを編集し保存、更にData URIに変換した後でSassにペースト、という手順を踏むことになるが、その手順のほとんどが必要なくなる。 $color: #369; $image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2
webフォントをData URI schemeで実装 - ヲレサイト
webフォントをData URI schemeで実装 このブログの看板の文字にwebフォントを採用してみた。 Internet Explorer 8を切り捨てたので、もはやwoff形式のみの記述で済むもんね。Android標準ブラウザの4.3以前もwoffに対応してないようですが・・・無視（お Can I use... WOFF - Web Open Font Format コンテンツ部分の文字は閲覧しているデバイス固有のフォントで表示されて、ヲレの想定外の見た目となってしまっても知ったことではない。 ンですが看板部分については多少は自己主張する見た目のつもりなので、どんなデバイスでも同じような見た目となるように制御してみるのじゃ。 てことで、看板はこんなんなりました。 Windowsだろうが、Macだろうが、はたまたLinuxでも同じフォントとなっているはず。ブラウザ側でwebページ指定
Data URI Generatorは画像をアップロードすると、同じ画像をDataURI形式で出してくれるジェネレーターです。尚、画像の大きさには制限があります。 Data URI Generator
Data URI Sprites
In the inaugural topic of this blog on site speed, Hugh Williams spoke briefly about image spriting as a technique to speed up the rendering of a page. CSS Image Sprites are now commonly used to remove the performance problems created by making separate HTTP requests for every image on a web page. Unfortunately the technique cannot be used on a web page with a dynamic image set such as the eBay se
data URIを使いまくってる皆様こんにちは、@poyosiです。 画像からdata URI Schemeに簡単に変換するツールを自分用に作ってみました。この手のツールは他に沢山ありますが、よろしければ使ってみてください。 dataURI converter | 画像をdata URI Schemeに変換するツール http://data-uri.poyosi.com/
I've been trying to re-implement an HTML5 image uploader like the one on the Mozilla Hacks site, but that works with WebKit browsers. Part of the task is to extract an image file from the canvas object and append it to a FormData object for upload. The issue is that while canvas has the toDataURL function to return a representation of the image file, the FormData object only accepts File or Blob o
Image to Base-64 Data URI Encoder Using the new HTML5 File API by Martin Ivanov (@wemakesitesnet) | Image2Base64
Image to base64 data URI converter, using the new HTML5 file api
GitHub - Medium/sus: simple data-uri stylesheet generator
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Dev Sep 8, 2013 Font-Face and Base64 Data-URI A more bulletproof approach to font delivery - 2013 edition Increasing support for web fonts is a beautiful thing and given rise to life beyond Helvetica and Georgia. Typographic considerations are now a vital aspect of any awesome web project, with font selections and parings playing a huge role in early stage design patterns. And beyond typography, i
通常、data URI Schemeを作成しようとすると、「画像を作成→base64エンコード→CSSに記述」という流れになり、結構手間がかかります。またCSSには元の画像名などが記載されないため、元ファイルが何なのか分かりづらく、管理もしづらくなりがちです。 しかし、Sass+Compassを使用することで、簡単にdata URI Schemeを作成し、管理もしやすくすることができるようになります。 参考:CompassでデータURI スキーム scssファイルへの記述方法 以下のように、CSSでは「url」となる部分を「inline-image」に変更するだけです。 (※クォーテーションも必要です。) //サンプルアイコン .icn-sample { background-image: inline-image("img/sample.png"); } 何故、管理しやすくなるかとい
Whenever I go on a "performance run" on a website, the first place I look is imagery. Why? Because you can save an image out of Photoshop, push it into ImageOptim or even TinyPNG, and save 70% on its file size. What do most developers not consider? Taking tiny image files and making them data URIs instead of traditional images (another HTTP request). Unfortunately that needs to happen on the
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[提供終了]画像をBase64に変換するツール (data URI scheme) – シングスブログ
CSS内の画像埋込で高速化(Data URI) - Qiita
今更だけどdata URI Schemeって何？ – poyosi.com
Data URIによるHTTPリクエストの削減とYSlowスコア | ゆっくりと…
Data URI scheme - Wikipedia
MyShortcutsに「Data URI」で画像を埋め込もう！
Image to base64 data-URI converter
data URI Schemeを使ってHTTPリクエストを削減する
JavaScript: canvasを使って画像をdata URIに変換 - mayokara note
どんなデータでもdata URIでパックする·Knapsack MOONGIFT
表示速度改善 Data URIスキーム | 前編 仕組みとメリット
caramel*vanilla dateスキームを生成 - The data: URI kitchen
Data URIでSVGを指定する | jekylog
chrome.webRequestとdata URI schemeを使ってダミーデータを返す - Qiita
画像をData URI schemeでテキストに変換するツール
Data URI Generator
data: URI Generator - dopiaza.org
【スマートフォン制作】スマホで圧倒的に速くするDATA URIのあれこれ – T2
URLエンコードを利用したData URIなSVGでSassのインターポレーションを利用する
画像をDataURIスキームに変換する・「Data URI Generator」
画像からdata URI Schemeに変換するツール – poyosi.com
Convert Data URI to File then append to FormData
Font-Face and Base64 Data-URI | Stephen Scaff
data URI Scheme(base64エンコード)ならSass+Compassがおすすめ | CodePlus
Convert Image to Data URI with JavaScript