9964

Best practice for inlining images using data:-URLs?

Question:

I have a simple rails app that stores images created by users in an HTML5 site using canvasContext.toDataURL(). There's an index action, which shows a list of thumbnails, and a show action for each image, showing the image.

I'm being absolutely lazy in the backend here, I just store the base64 encoded data:image/png;base64,... Strings of the original image and a thumbnail, which is also generated in the client. The images are included in the page using <img src="data:"/> URIs.

Now, since this isn't fully supported in IE before v9, I will have to implement some kind of workaround, probably by including the URL of the generated image using a data- attribute and then replacing the source attribute after page load using jQuery.

This brings up the question whether it's good practice to inline rather large images into HTML using data: URLs...

Are there any recommendations or best practices? The images might be up to 500 KiB, and each of them is used only once. The page containing the images will not change once created, so it should be cacheable pretty good, including the image. The index page containing the thumbnails (which are around 60 KiB) uses pagination, so the page will hardly be cacheable. You can assume that the HTML pages will be deflated or gzipped in production.

Answer1:

Best-practice is: Don't.

You'll need a workaround anyway, which will completely duplicate the basic functionality, so you've just another place things can go wrong and more cases to test.

You say the images should be very cacheable, but you're sending them in a way that doesn't allow you to include information about caching. However, with the more common approach of sending images over a separate HTTP request, you can send expires and max-age requests to indicate the image won't change for a year. If you're super-confident that the image won't change you can also set a last-modified and an e-tag (you don't even need any logic to decide on the etag, just send "IMMUTABLE" as the tag) and respond to every conditional GET by sending a 304 without even checking (because again, you only do that if you're <em>super-confident</em>, otherwise though you can still implement a more conventional check for 304).

If the image is just used once, then have the image served by something that creates it and writes it based on some identifying features in the query (just what is specific to what you are doing) and writes it to the stream to the browser. You'll still have nicer separation within your application to have this done in its own place.

Even with gzip, you aren't going to beat this on stream size.

Answer2:

This is not a good idea. I would use normal, separate image resources instead.

By using inline images,

<ul><li>

you destroy all cacheability for static images - with inlined images, every time the HTML page changes, all the image data has to be reloaded as well.

</li> <li>

gzipping/deflating will take longer, and produce sub-optimal results (because image data is much harder and much less efficient to compress).

</li> <li>

the rest of the Internet is geared towards HTML documents and images being separate resources: Prefetchers, caching systems, proxies...

</li> <li>

then you have browser compatibility, which as you point out, is abysmal for older IEs.

</li> </ul>

Answer3:

My advice ? Don't do it.

A real file can be modified more easily with backend libraries, so don't. And if you want use base64 in your page, you can easily do it with HTML5.

var xhr = new XMLHttpRequest(); xhr.open('GET', 'images/myimage.png', true); xhr.responseType = 'arraybuffer'; xhr.onload = function(e){ if(this.status == 200){ var bb = new WebKitBlobBuilder(); // Or MozBlobBuilder, MSBlobBuilder, etc. bb.append(this.response); var reader = new FileReader(); reader.readAsDataURL(bb.getBlob('image/png')); reader.onloadend = function(e){ $("#myimage").attr("src", reader.result); }; } }; xhr.send();

Recommend

  • Why no segmentation fault on strcpy? [duplicate]
  • Rails: Is it possible to get the controller and action name from an asset file?
  • Initial Token is cassandra is not working as expected
  • Integrating ehcache with spring 3.0
  • Get the network interface type in Linux via C program
  • Using STAT relation in CActiveDataProvider criteria
  • psql.frame_query
  • Using hibernate 2nd level cache or query cache for lazy fetch queries
  • Angular Material - Getting index of row in data table
  • Data persistence when worker process dies, how?
  • Caching in Java Applets
  • How to make a shared resource thread-safe when using dependency injection?
  • didSelectRowAtIndexPath method at PFQueryTableViewController
  • How can I create, read, update and delete Mediawiki articles via scripts?
  • Posting to Facebook Page through API as the page (with admin rights)
  • Django how to modify database records by template
  • Can I put a + sign in a folder with IIS?
  • How can I encode a filename according to RFC 2231?
  • HikariPool-1 - Unusual system clock change detected, soft-evicting connections from pool
  • Gerrit will not push. Error: No common ancestry
  • Cannot style mat-tab without ::ng-deep and !important
  • Open hyperlink on click on an ggplot/plotly chart
  • Symfony2 redirect to https route fails (uses wrong port)
  • WordPress > setting permalink option via script buggy?
  • cordova is not defined - cordova.js has already been loaded :: Ionic
  • jQuery: add elements until a particular height is reached
  • Combining two different ActiveRecord collections into one
  • Do I need to seed any random number generator before using EVP_PKEY_keygen of OpenSSL?
  • JqueryMobile Popup menu is not working
  • Authentication in Play! and RestEasy
  • How to use carriage return with multiple line?
  • Repeat a vertical line on every page in Report Builder / SSRS
  • Calling of Constructors in a Java
  • Traverse Array and Display in markup
  • Transpose CSV data with awk (pivot transformation)
  • How to get icons for entities from eclipse?
  • Proper way to use connect-multiparty with express.js?
  • Load html files in TinyMce
  • Why can't I rebase on to an ancestor of source changesets if on a different branch?
  • JaxB to read class hierarchy