Comments (21)
  • Add a Comment
  • Edit
  • More Actions v
  • Quarantine this Entry

11 richb commented Permalink

Maybe I'm missing the point here, but aren't you having to download the image in any case because it's base64-encoded into the page itself? So to avoid the delay in downloading, say, a 100kb image file you add 100kb (or more, since it's encoded?) to the html page itself? <div>&nbsp;</div> Shouldn't the script make an *additional* call to the server if the image is not cached in localstorage and load it from localstorage otherwise, rather than embedding the image itself anyway? If the page changes slightly and needs to be reloaded but the image hasn't changed it will effectively be needlessly downloading the image again anyway. <div>&nbsp;</div> I'm confused...

12 bobleah commented Permalink

@richb - Hi Rich - as pointed out by you and this blog entry, a layer of application intelligence is required. The realization of page performance is derived by the number, size, and complexity of the stored elements, and in the exercise of intelligent control the server application has on these elements. The script illustrates how to store and retrieve an artifact, with focus on what is typically a binary artifact. To add the first layer of intelligence could be as simple as an AJAX request to retrieve the base64 Image or a large javascript file to store and retrieve. Additional intelligence could include associating a SHA hash with locally stored elements, to exercise a form of intelligent version control of stored artifacts.

13 CezaryTomczyk commented Permalink

This technique doesn't work when javascript is off or not available. I mean img without url in src attribute will not show image. I think that use of "expires" header working well because the file is stored in browser cache until expire date is valid. There is no extra request to server for file.

14 monia commented Permalink

Hi, <br /> I want to store an image with this technique (local Storage). So I should have the base64 encoded image. My problem that I should have an automatic process that encode an image in input. <br /> I explain: in my application, a citizen can take a picture, i want to store this picture locally so i should have the base64 code of each picture taked. <br /> The solution must be in javascript. <br /> Someone know what can i do? <div>&nbsp;</div> <div>&nbsp;</div>

15 bobleah commented Permalink

@ monia - I have not personally done this, but a quick Google search revealed a number of examples that may work for you. This looked interesting: http://www.webtoolkit.info/javascript-base64.html

16 monia commented Permalink

I see it. This example encode a text not an image. I'd like to encode an image not a field text

17 MaurisourceAgenceweb commented Permalink

Great technique, but I wonder how to apply this technique without the user having to scroll down the page so that the content starts appearing. I don't know how it actually can increase my homepage loading time there. Thanks for sharing. <div>&nbsp;</div> <b>John Pearson - <a href="http://www.maurisource.com/" rel="123">creation site web</a></b>

18 bobleah commented Permalink

@ MaurisourceAgenceweb - I recently implemented a localStorage method to intelligently store my blogs lead space image. I plan on authoring a blog post and sharing the code on how I did this in the near future. Stay tuned!

19 DilipBhatt commented Permalink

Hey Bob, I used this tip of yours in my blog to publish a front end standard. http://iskeleton.blogspot.in/

20 bobleah commented Permalink

@ DilipBhatt -- Super! Glad you found value in this post!