5

I am trying to find a way to store .jpg files from my website into the localstorage to increase the site speed. Theoretical its simple: convert the picture.jpg into a base64 string and store it with setitem into the localstorage. to display the picture again just load the base64 string from the localstorage and decode back to jpg. But, as always, the practice is more difficult. Im trying to find a way to convert the .jpg files on-the-fly to base64 using html5 or javascript (no php!). Does someone had the same problem and was able to find a solution and could share the code?

user1271179
  • 51
  • 1
  • 3
  • i don't think that this will increase speed. Browsers are caching pictures and converting in base64 and back shouldn't be faster... – Neysor Mar 15 '12 at 09:44
  • Not the first time, but if you open the page the next time, all the "old" pictures can be loaded from localstorage instead again from the server. this increase the speed for mobile devices with a slow internet connection. – user1271179 Mar 15 '12 at 09:47
  • 4
    This can be done quite easily via Canvas. Keep in mind that the size of `localStorage` is not unlimited. You'd better not use `localStorage` for caching many (big) files. – Rob W Mar 15 '12 at 10:00
  • @Rob W: Have you a short code-example how this could be done? How can i convert existing jpg pictures on the website into canvas and store them to the storage? I know that localstorage is limited to 5mb, but that should be enough i hope. – user1271179 Mar 15 '12 at 10:09

4 Answers4

11

I'm also for using HTML5 cache manifest which supports the offline case too and is designed for your problem. Don't use local storage with base64 because:

  • Base64 encoding increases the file size to 137% (!)
  • The algorithm will slow down your application, because not only the Internet Speed limits your application, also the javascript couldn't be executed as fast as on desktop computers. In my tests on moblie phones i had problems with common javascripts, so i would reduce the javascript to a minimum and your context isn't needed.
  • local storage isn't evertime supported and has also a limitation!

For Cache Manifests you can look to w3.org - Cache Manifests also on html5 Rocks there is a beginner guide.

If you do not want to use HTML5 chache manifest, you should try to increase the speed as much as possible, described in many posts here on stackoverflow, i liked the link to the presentation in the post about increasing Math Object

Community
  • 1
  • 1
Neysor
  • 3,893
  • 11
  • 34
  • 66
  • 1
    Lovely how i can google for 'Zend Framework Validator custom error blablabla' and end up here learning about HTML 5 cache manifest! – halfpastfour.am Apr 03 '12 at 07:42
2

You can use canvas element and toDataURL method where supported. Something like that:

var ctx = canvas.getContext("2d");

var img = new Image();

img.onload = function() {
   canvas.width = this.width;
   cavans.height = this.height;

   ctx.drawImage(this, 0, 0);

   var base64jpeg = canvas.toDataURL("image/jpeg");
}

img.src = "/images/myjpeg.jpg";

But if you want to do that to "increase the site speed", use HTML5 manifest for caching: it was designed exactly for that purpose (and offline app, of course).

ZER0
  • 24,846
  • 5
  • 51
  • 54
  • PS. `var canvas = document.createElement('canvas');` – Rob W Mar 15 '12 at 10:17
  • Hmm I just tested `` But its just not work for me, I tried to do alert(base64jpeg); or alert(img); to see whats happening, but i simply dont get any return. – user1271179 Mar 15 '12 at 10:36
  • @user1271179 assumed you have a element already in your page and `canvas` variable point on it. Check the web console of the browser to see where the error is – maybe the browser doesn't support cavans or `toDataURL`. Also, for the Same Origin Policy, if this code is not in the same domain of the image you're trying to load (ethisphere.com) you will get an exception when you call `toDataURL` method. – ZER0 Mar 15 '12 at 11:01
0

By the way, localStorage is better than browser cache. Google and Bing did some tests trying to see which caching method is faster and here are the results. SPOILER ALERT!!!! localStorage is better.

Kitanga Nday
  • 3,517
  • 2
  • 17
  • 29
0

It may be better/easier to use HTML5 cache by creating a cache manifest.

Alytrem
  • 2,620
  • 1
  • 12
  • 13
  • Hmm maybe, ill will keep this option in mind, but would prefer the localstorage way to be able allow the user to store a single article for offline read or something. – user1271179 Mar 15 '12 at 09:51