Tool for embedding images into HTML

Does anyone know of a tool to convert images to text so you can embed them?
I am trying to do this technique for embedding an image directly into HTML.

1 Like

Hey @JohnnyBizzel,
Are you looking for something like this?

No sorry, that’s image hosting. I want image embedding. Did you read the article?

In certain cases, you may want to be able to pick up your page and simply relocate it without worrying about whether linked images are going to transfer correctly as well.

Also, I believe it improves performance of the page because the page does not have to make requests to other domains.

(I was suggesting this technique for someone in the chat rooms).

Are you looking for this?
https://www.npmjs.com/package/gulp-base64

1 Like

In GNU/Linux you can use base64 on a console (Command line interface) and it will give you the base64 encoding of almost anything you give it.

Example:
Using your avatar, I download the image and give it to base64.

user@computer:~$ base64 37661_1.png
iVBORw0KGgoAAAANSU[...A quite long string...]Jggg==

Then you can inline that output on your HTML document by writing a little extra on the image element.

Edit: You can also look into SVG. I personally recommend it.

2 Likes

Base64 encod8ng/decoding is a dead simple thing to do, as @Undigon says it’s just a basic operation, and turning that into online tools is very simple as well so there are loads of sites like: https://www.base64encode.org/

Note it makes the images about 30% larger than they would be otherwise + there’s a decoding step + they now can’t be cached, so it’s only going to give perf improvements for very small images (where it’s a v good technique)

2 Likes

The guy in the chat room was making a navigation menu using images so ideal. :+1:
(as the images were small)
Although better would be just using CSS in this case.

Base64 encoding will expand the image by a third, which will increase bandwidth utilization. On the other hand, including it in the file will remove another GET round trip to the server. So, a pipe with great throughput but poor latency (such as a satellite internet connection) will likely load a page with inlined images faster than if you were using distinct image files. Even on my (rural, slow) DSL line, sites that require many round trips take a lot longer to load than those that are just relatively large but require only a few GETs.

(from: html - How much faster is it to use inline/base64 images for a web site than just linking to the hard file? - Stack Overflow )

So as always: Good in one case, bad in other.

I use base64 on static websites which allows me to cache whole website on CDN and push it with single request.

2 Likes