html - HTML と CSS: フォントと画像をデータ文字列に変換する

Question

フォントと画像 (アセット全般) をデータ属性に変換するにはどうすればよいですか?

この方法でアセットの読み込みが速くなったり遅くなったりしますか?

Answer 1

You should be aware that DataURI's are not supported by IE earlier than IE8. Also, IE8 has a limitation for at most 32KB of dataURI's in css assets. A more detailed description about DataURI's can be found at this blog post.

If you need the java implementation, you can find one here:

This allow you to transform all images into a base64 encoded uri in css files. For more details about how to integrate this implementation into your project, visit this page:

Disclosure: I'm affiliated to wro4j project.

Answer 2

個別のファイルをキャッシュできる一方で、リクエストごとにデータをダウンロードする必要があるため、ページの読み込みが遅くなります。小さなファイルのみにデータ URI を使用するようにしてください。

画像の uri エンコーダー: http://www.scalora.org/projects/uriencoder/

Answer 3

FileSystem APIのメソッドを使用できますreadAsDataURL。ただし、現時点ではクロムでのみ機能します。