Question

I have a question about base64 encoding for images. I used base64 for small background images. I convert it with a online base64 tool. And put it directly in the CSS file.

But is there a way. That the base64 encoding go automatic. When i upload the files to the server or when i run the website. Then the small background images in the CSS. Convert automatic to base64 encoding. Do you understand??

Thanks for help!

Answer 1

Well, I’m not sure if I exactly understand your question. However, the <canvas> element offers a function named .toDataURL()^help, which converts the contents from the <canvas> node into a Base64 encoded string. But that does not make much sense in your case anyway I guess.

Same story for window.btoa(). You would need to ordinary transfer the images to the client and then converting them, which does not make any sense. So you would need a tool/script which runs on the server and transfers images as base64. And guess what, it exists.

supplyJS

Using supplyJS, you could create a call like

supply.listen('image/jpg', function(payload, filename) {
    jQuery('<img>', {
        src: 'data:image/jpeg;base64,' + payload
    }).appendTo(document.body);
});

supply.setDealer('/cgi-bin/supply.pl').files({
    images: [
        '/images/foo.jpg',
        '/images/bar.jpg',
        '/images/another.jpg'
    ]
});

It will natively convert all images into base64 to transfer them.

Example: http://www.typeofnan.com/lab/mxhr-stream/