3 Kicks

MVC Data URI HTML Helper(deanhume.com)

submitted by deanomachinodeanomachino(764) 8 months, 11 days ago

I have recently been looking into web page performance and one of the things I came across is the Data URI scheme. When you reference an image in your HTML, the client needs to go and retrieve the image. This creates an HTTP request and adds to the time it takes for the page to load. What is the Data URI scheme - well, it is a URI scheme that provides a way to include data in-line in web pages as if they were external resources. Instead of adding a reference to your image as a path or URL, you embed the image directly into the document using a Base64 encoded string. The browser automatically understands the string and decodes it there and then - instead of retrieving it via an HTTP request.

1 comment |category: |Views: 22

tags: another

new Add a live kick counter to your blog >> liveImage

You can even customize the image by choosing your own colors, and then clicking the button below to update the preview and the html code:

  • "Kick It" text
  • "Kick It" background
  • kick count text
  • kick count background
  • border

Simply copy and paste this HTML into your blog post.


Users who kicked this story:
bsenoffbsenoff(1583) - dpetersondpeterson(4397) - deanomachinodeanomachino(764)
Comments:

posted by dpetersondpeterson(4397) 8 months, 11 days ago 0

While I would use something else to detect datauri support (http://weston.ruter.net/2009/05/07/detecting-support-for-data-uris/), the practice of using them is sound.
I'm currently working on transitioning all of our static images over to datauri's where it makes sense (some larger images we load separately after the initial page load).

Reply

information Login or create an account to comment on this story
Submit a Story
View upcoming stories
How else can I help?
Add our feeds to your site

Most Active Users

What's this?