Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Minimizing HTTP requests with data URLs

From: Mobile Web Design & Development Fundamentals

Video: Minimizing HTTP requests with data URLs

As I mentioned a couple times previously, developing mobile web applications has a lot of performance implications, and one of the ways to improve the performance of your mobile web application is to use data URIs to represent certain kinds of data in your web page, and that's what we are going to look at in this example. Data URIs represents binary data--or well, really any data--in a page as an encoded text string, and it's commonly used to reduce HTTP requests for resources such as images.

Minimizing HTTP requests with data URLs

As I mentioned a couple times previously, developing mobile web applications has a lot of performance implications, and one of the ways to improve the performance of your mobile web application is to use data URIs to represent certain kinds of data in your web page, and that's what we are going to look at in this example. Data URIs represents binary data--or well, really any data--in a page as an encoded text string, and it's commonly used to reduce HTTP requests for resources such as images.

The general format looks like this. Instead of HTTP, you have the word 'data' followed by a colon and then followed by a mime-type, which is the type of data, such as image/JPEG or image PNG or something like that, then followed by an optional parameter called Base64, which indicates whether or not the data is Base64 encoded, and then you have the data which is included as a text string. So the best way to visualize this is to imagine you had an image that looks something like this.

This image would typically be represented by a bunch of binary bytes located on disk somewhere. And the way that you would normally include this in your web page is to give the browser a URL to this image. The browser would then download the image and display it in the page somewhere. Using data URIs, you'd represent the image like this instead. So instead of having http:// the URL to the image, you would simply represent the image itself as data inside the web page.

And this reduces the need to fetch images from a remote server using HTTP requests, which can take a long time. Data URIs are supported by most modern mobile browsers; in fact, all the major modern mobile browsers that use HTML5, such as Opera, Android, iPhone, Windows Phone, BlackBerry, et cetera, are able to support this now. The advantages of using data URIs are first, you minimize the HTTP requests sent to the server, which results in better performance.

Files that are associated with media elements can be stored as a single file, so you can embed images directly into a web page and then manipulate that the web page as one single entity, without having to worry about links to external images. It also avoids security warnings when data that it is accessed from a non-HTTPS domain is accessed from an HTTPS page. You've probably seen this before. You try to get some data, such as a logo or something, that's not from an HTPPS domain, and the browser throws up a little security warnings saying, "Hey, you know this data is not coming from secure web site," so this avoids that.

Now there are some disadvantages too. Media that's represented by data URIs are not cached separately from the document. So whereas an image that's downloaded by the browser would normally be cached in the image cache, that's not going to happen in this case, because there is no separate image file to cache. And obviously, if the media element changes, it's got to be re-encoded as a data URI. So if you have some image that changes frequently, this may not be the best approach because every time that image changes it's going to have to be re-encoded. Data URIs can also make it more difficult for security software to scan content, which is why up until IE 9 Microsoft didn't allow Internet Explorer to use data URIs for executable content like JavaScript.

But for things like images, this is a pretty minor concern. Data URIs can be used where a normal URL would be used instead. So for example, in HTML, instead of doing something like this where you have image and then the source has some URL to it, you would just use this instead. So you can see that we've replaced the http with the data:, and then here's the mime- type image/png, and the Base64, so it's Base64 encoded, and here is the string that it results in. You can also do the same thing in CSS.

So for example, in CSS rule, instead of saying background-image and using a URL to an image, you would simply use the data representation inside of the URL rule inside the CSS rule. Data URIs can be generated automatically on the server side too, and here is a quick little example of that in PHP. Now if you don't know PHP, don't worry about it. Just follow along with me here. Essentially, what's happening is this function called CreateDataURI is going to take an image file and a mime- type and convert it into a data URI.

And the way you would use this is inside your image tag, inside the source, you'd just call this PHP function that creates a data URI, which spits out data along with a mime-type and the Base64, and it simply gets the contents of the file using a PHP function called get file contents and then calls a Base64 Encode function on the file contents, which gives you the string back right here, and then that encoding string would be appended at the end down here. You might be asking yourself, how do I convert an image into a data URI? There are all kinds of resources on the web that are free and available to you.

All you need to do is just do a search on 'convert image to data URI' and you'll get a whole bunch of web sites that will take an image, upload it for you, and give you a string back. Okay, so let's go ahead and see how this works in code. So here I have my dataURI_start file, and I've got my Snippets.txt file right here, and I am going to go ahead and scroll down to the Data URI section, and that is right here. And let's take a look at this file in the browser first, so you can see what's happening.

So I am just going to bring up dataURI_ start, and you can see that I am using the logo for our Explorer California site. And in this case we have the image included as a traditional linked image. You can see that that's where this image is included right here, traditional URL link. So now we are going to include the same image as a data URI. So I am going to go back over here, and this is the data URI that I am going to use. And if I scroll to the right, you can see it's pretty large. It's about 4k. So all this data right here is part of the image, and it goes all the way to the end here.

You can see, so it's pretty long. So I am just going to copy that. And we are back to dataURI_start, and I am going to copy this same down here, and save. Now we are back to the browser, and I'm going to refresh, and you can see that this image is now included as a data URI. The only difference is this is not an external file, whereas this is. Okay, so let's go ahead and try that out in the emulators, and to do that I am going to have to copy this over to my web server.

So I am going to copy dataURI_start. All right! So let's go ahead and go there and see if it worked. And you can see that it works here. So we have our traditional image and the dataURI. Let's try it in the Opera browser, and here it is in Opera. You can see that that worked as well. And last but not the least, let's try it out in the Android browser, and here we have the same result.

In the Android browser, you can see the regular image there and the dataURI there. So by using dataURIs, you can greatly enhance the performance of your web applications by including media elements directly in the page, such as images.

Show transcript

This video is part of

Image for Mobile Web Design & Development Fundamentals
Mobile Web Design & Development Fundamentals

46 video lessons · 24674 viewers

Joe Marini
Author

 
Expand all | Collapse all
  1. 2m 48s
    1. Welcome
      1m 2s
    2. Using the exercise files
      1m 46s
  2. 29m 25s
    1. Understanding the mobile context
      8m 5s
    2. A survey of mobile sites
      11m 44s
    3. Targeting mobile browsers
      4m 31s
    4. Previewing a complete mobile site
      5m 5s
  3. 27m 20s
    1. Designing for one web
      3m 43s
    2. Using well-defined web standards
      3m 45s
    3. Designing mobile-friendly pages
      3m 40s
    4. Being crisp, clean, and succinct
      5m 45s
    5. Minimizing input where possible
      6m 47s
    6. Focusing on the core scenarios
      3m 40s
  4. 1h 13m
    1. Installing the tools
      3m 52s
    2. Setting up a local web server
      9m 13s
    3. Installing device emulators
      17m 5s
    4. Using device emulators
      13m 9s
    5. Downloading Modernizr and Mobile Boilerplate
      6m 22s
    6. Building a first mobile web page
      5m 43s
    7. Developing mobile pages with desktop browsers
      8m 6s
    8. Exploring useful mobile web development resources
      10m 23s
  5. 53m 26s
    1. Reviewing mobile markup languages
      5m 10s
    2. Understanding content adaptation approaches
      10m 32s
    3. Controlling the viewport layout
      12m 50s
    4. Designing forms
      13m 30s
    5. Using CSS media queries
      11m 24s
  6. 1h 11m
    1. Detecting client capabilities with script
      10m 8s
    2. Caching information with local storage
      9m 16s
    3. Determining position with geolocation
      12m 52s
    4. Minimizing HTTP requests with data URLs
      7m 39s
    5. Understanding user agent detection
      9m 8s
    6. Using server-side detection with PHP
      6m 52s
    7. Using server-side detection with ASP.NET
      4m 54s
    8. Using HTML5 Boilerplate for mobile
      11m 6s
  7. 39m 22s
    1. Measuring performance
      7m 41s
    2. Creating full-screen web apps
      6m 30s
    3. Customizing the user interface
      5m 14s
    4. Detecting orientation changes
      3m 58s
    5. Detecting device movement
      5m 21s
    6. Using touch events
      10m 38s
  8. 47m 14s
    1. Taking a look at the finished site
      7m 40s
    2. Examining the header and background image style on the Home page
      10m 10s
    3. Examining the hover effect and layout styles on the Tours page
      6m 42s
    4. Examining mobile forms on the Contact page
      9m 45s
    5. Viewing and testing the mobile site on emulators
      8m 11s
    6. Viewing the site on devices
      4m 46s
  9. 2m 34s
    1. Goodbye
      2m 34s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Mobile Web Design & Development Fundamentals.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.