Web Font Anti-pattern: Data URIs—zachleat.com
After I posted my Critical Web Fonts article on Twitter, I had an interesting conversation with a developer named Wim Leers about embedding Web Fonts as Data URIs. @zachleat @MarcDrummond Why not just embed as a data URI in the critical CSS? Cached, no FOUT. Example: https://t.co/tqQ03G3dhf. — Wim Leers (@wimleers) January 6, 2016 His suggestion was to embed the font directly in a style block on t
Optimizing SVGs in data URIs by Taylor Hunt on CodePen
Awhile back, CSS-Tricks posted “Probably Don't Base64 SVG”, which concluded that SVGs in data: URIs are smaller used as-is instead of base64-encoded. It’s got the right idea, but there are a few complications and further optimizations. Better browser support In the provided code, we have: (Assume the ... are replaced with real SVG data) .bg { background: url('data:image/svg+xml;utf8,<svg ...> ...
CSS Sprite画像はDataURI画像にすべきか？ - MOL
最近、スプライト画像はDataURIにすべきですか？という質問が多くて、調べてみました。てか、前のもそんな話題があったような。DataURIってなんぞって方は下記を見てほしい。 データURIスキーム | MOL CSSファイルがパースされなければレンダリングが始まらないのでCSSファイルの肥大化は絶対に避けなければならない。画像の1KBとCSSファイルの1KBを同じように考えてはいけない。 ― ぼくのかんがえたさいきょうのしーえしゅえしゅ あ、ホントそうだっけーなーと思いつつ、どこぞの資料見たんだっけなーと探してたらあった。 Optimizing the Critical Rendering Path for Instant Mobile Websites - Velocity SC 2013 このセッションはすごく分かりやすいのでオススメです（該当の箇所は12分位から）。というかIlya
Sassでlinear-gradient()のmixinをつくる その4 - fragmentary
2013年2月も終わりかけですが、CSS Preprocessor Advent Calendar 2012の記事の続編です。 今回は linear-gradient() から、SVGのグラデーション画像を生成するmixinをつくります。なんでそんなことをするのかというと、IE9が linear-gradient() を実装しておらず、またグラデーションを生成できる独自フィルタもIE9標準モードで使えないからです。面倒ですねえ。Windows 7版のIE10の登場とそれへの移行が早く済むとよいのですが。 Part 6 ― SVGはパーセントエンコードされたdata: URLで表現 今回やるのは、異なるCSS構文の変換ではなく、CSS→SVGというフォーマットの変換が主です。IE9からサポートされたSVGを利用し、グラデーションを含んだSVGファイルを、background-image で参
Noisy URIs
What is this? Data URIs (unique resource identifiers) are resources (such as images) converted into text so that they can be used with webpages without referencing external files. A great explanation of data URIs can be found on CSS-Tricks.com Repeating noise images are very useful for adding a little texture to all kinds on element on a web page. When you're designing in Photoshop it's simple to
DataURI Maximum length - latest log
DataURI サポート状況: http://caniuse.com/datauri Wikipedia: http://en.wikipedia.org/wiki/Data_URI_scheme Browser Max length Source IE 7 0 IE 8 32KB - 1 http://msdn.microsoft.com/en-us/library/cc848897%28VS.85%29.aspx IE 9 4GB http://msdn.microsoft.com/ja-jp/ie/ff468705.aspx#_DataURI MobileSafari 3.x 128KB ? http://blog.clawpaws.net/post/2007/07/16/Storing-iPhone-apps-locally-with-data-URLs#c1989348 Chro
Data URI Generator
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
Data URIによるHTTPリクエストの削減とYSlowスコア | ゆっくりと…
以前「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
The proper MHTML syntax
Reducing the number of HTTP requests is a must, sprites are cool, but a pain to maintain, so there come data URIs (for all browsers) and MHTML (IE6 and 7). I've talked about these things on this blog to a point where the blog comes up in top 10 results in search engines for queries like "mhtml" and "data url". Therefore I think it's my duty to clarify a point for the good of the mankind 🙂 MHTML w
MHTML - when you need data: URIs in IE7 and under
UPDATE: It's very important to have a closing separator in the MHTML document, otherwise there are known issues in IE7 on Vista or Windows 7. The details are here. In the previous post I described what data: URIs are and how they are useful to reduce the number of HTTP requests. Now, the problem with data: URIs is that they are not supported by IE < 8. But, thanks to this article (in Russian), her
データURIスキーム - MOL
今回の記事の主題はデータURIスキームとはなんぞいねってことなんですが、簡単に言いますと、このスキームを使うとサーバにリクエストすることなく、ページ内のコードに画像を埋め込むことができるという話です。スキームといえば、このほかにもhttp:、ftp:、mailto:なんてものがありますね。 Webパフォーマンスにとって高コストなものといえば、HTTPリクエストですから、それを使わず画像を表示できるということはこのスキームを使う最大のメリットと言えるでしょう。 てなわけで、実際にどんなものか見てみましょう。例えば、隣にあるこのフィードアイコン はHTMLソースの中ではこんな感じでに記述されています。 <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6
img2data
“img2data” is the app genarates base64 encoded data url string from your local file. Works with modern browser feature called “File API” and “Drag and Drop API”. These allaw us to process file content locally without sending any data to server. So you can use this app safely even for confidential use.
日記 | ヨモツネット
blog移行しました。新しいblogで更新を続けています。 XMLェ… text ja 2012-07-08 http://www.yomotsu.net/wp/?p=603 XMLェ… 日々の出来事2012年7月8日日曜日 ブログ作りなおそうかなーと思って、この Webサイト をみなおしてたら、Web ページのメタ情報としてダブリンコア (RDF) を混在させていたことを思い出した。バリデーターにかければ、グラフも取り出せて みたいな感じになる。でも結局あまり意味なかったです多分。いまは OGP とかありますしね。 Web ページは XHTML にしてたけど、ブログのコメントで参照先のない数値参照とか混ぜられると XML パースエラーになるし、XML だから他の語彙混在できるけど、RDF くらいしか混ぜてなかったし、XHTML 意味なかったです多分。いまは HTML に SVG 混在でき
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Real, Automatic Instagram Likes - Duri.Me
http://datauri.com/