How to load <img> tag SRC into a javascript variable to be re-used across multiple images?

Question

So here is my plan for fast web page downloading...

1. Place all images into a single png-24 image sprite.
2. Encode that image as base64 and include it in the webpage HTML code.
3. Duplicate the SRC of the original image sprite and re-use it for the logo, share buttons, other images, etc..

The only problem I can foresee is the duplication of the base64 encoded image source.

Can I readily extract the image source with jQuery and just re-insert it into all of my blank images (the images that need the sprite to be created)?

EDIT: Some people are mentioning base64 images are not cached, but wouldn't my entire webpage (containing the base64 images) be cached if I told it to be?

Answer 1

That is a common technique with CSS icons / reusable images.

You can get the image src using $(element).attr('src');.

However, I don't see the advantage of encoding the image binary (I'm assuming you meant the image file itself) to base64 to include with the HTML markup. You may be over-thinking this a bit.

I don't think you can "save" bytes by re-encoding the image data into base 64, primarily because base 64 is a narrower character set than the encoding used in the original data (think binary 111 = decimal 7), so I expect a larger output actually. (But that's just me theorycrafting, so correct me if I'm wrong.)

However, if you do manage, for example, to re-encode to at most an equal size of markup, then you're not making any headway with "faster downloading". You're still downloading the same amount of data. Most probably more.

If you do manage a smaller payload, is the performance hit of encoding / re-encoding worth it? Not to mention the cross-browser compatibility.

A better technique would be to package the images into a single image file (which is the spirit of your exercise), and just let the browser download that as normal. Once one copy of an image is downloaded, as long as its cached by the browser, it won't download it anymore.

EDIT

To answer your edit regarding caching of the web pages, yes, your web pages will be cached. So will your base-64 encoded images. But since your images are effectively part of the HTML markup, they're going to be cached with the HTML pages.

e.g. If I download foo.html (which includes my encoded sprite file), I'm definitely going to get my markup as normal. That page is cached.

Now, I download bar.html (which uses my sprite file too). I expect that your image won't be cache-accessible from bar.html, because as far as the browser is concerned, that image is part of the HTML markup of foo.html. It probably won't even realize that there's an image wedged in there.

The way caching works (as best I can understand it) is URL matching. That's the reason why if I download facepalm.jpg in one page, and request facepalm.jpg again in another, the browser recognizes that I've already downloaded it, so it doesn't.

With your encoding plan, I'm not going to be requesting foo.html (or part of it) from bar.html, so I expect that your image caching won't work as you expect it to in your question.

If I visit foo.html again though, I'd get all benefits of caching for that page, as I've "downloaded that before".