Skip to main content

Embed Images Directly into HTML

In HTML, images are defined with the <img> tag.

<img src="url" alt="some_text">

The src attribute defines the url (web address) of the image.
The alt attribute specifies an alternate text for the image, if it cannot be displayed.
If you want to show an image, you write something similar to this in your HTML :

<img src="html5_sticker.png" alt="HTML5 Sticker">

But, sometimes you may want to show an image on your webpage but you don't want to link an external image file. In that case, you can directly embed your image into the HTML without having to link to an external file.

The idea behind it is that the browser interprets the image file in encoded format. So why not we directly put the encoded data in the src attribute of <img> tag. One of the advantages of embedding the image directly into the HTML is Portability.

There are so many online Base64 Image encoder available on the web. Just google it and you can get a list of online converters.

Base64 Image is one such tool which I have used sometimes.

Following is the image tag with src attribute as base64 encoded stream instead of external url/location.

<img src="data:image/png;base64,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"/>

This looks quite ugly. But, check the HTML5 logo below - browser's interpretation for the base64 encoded stream.

Comments

Popular posts from this blog

Hello World

I had heard about blogs few years back. Since then I wanted to write my blog. But, for some reasons like, what to write, how to write etc, always stopped me.

Finalizing an address for the blog is most depressing thing. Address of your choice will be unavailable and to think of a name, which would be available will take a lot of time.
"Sorry, this blog address is not available" will vanish your enthusiasm/excitement for blogging, unless you come up with a really unique and out-of-box kind of word/words. BTW, my blog name is not so out-of-box, but it's in Hindi (my mother-toung).
This blog-name thing is one of the significant reason, I am coming up with my blog a bit late. Logged in to blogger so many times earlier, but I was not getting a name which I like.

But, this time I was determined to start my blog and So friends, this is the start of  "meri-jigyasa.blogspot.com".
Edit: Now, I have a custom domain "www.merijigyasa.com" for my blog.

Thanks

Sakleshpur - The Green Route Railway Trek, Waterfalls, Jungle Adventures and Much More

The breathtaking images of picturesque railway route from Sakleshpur to Kukke Subramanya captivated us to go for this trek. We had been planning to do "The Green Route trek" - that's what it is called, from last few months and then finally the day has come and we started for our journey to Sakleshpur - also referred as "Poor Man's Ooty".

We read some news about the ban on trekking in western ghats. But we were not sure if it is really banned. Before the conversion of the railway line from meter gauge to broad gauge along the Sakleshpur railway line in Karnataka’s Hassan district, it was one of the most sought-after trek routes.

We started our journey from Bangalore on Friday evening, had dinner enroute in a dhaba near Hassan and reached Sakleshpur at around the Midnight, Checked into Hotel. Next morning, We talked to some local people and We came to know "The Green Route" Trek is banned for sure. But, still we went to the donigal Railway station, 8 …

Mangalyaan is launched successfully - What Next ?

At 2:38 PM, 5 November - Two days post Diwali, ISRO successfully lauched a rocket "Majestic PSLV C25" towards planet Mars as if they were celebrating Diwali, after spending numerous sleepless nights in their endeavour to make the launch successful, at Satish Dhawan Space Centre, Sriharikota.

India is the first Asian country and the fourth in the world to undertake a mission to the red planet. That's the reason, "A Billion Hopes" were riding with the Mangalyaan launch. ISRO made us feel proud and we can held our head high for the success.

About 45 minutes after the launch, Mars Orbitor Mission (MOM) Satelite, Mangalyaan, separated from its launch rocket and launch rocket has placed the Orbiter very precisely in an elliptical orbit around Earth, which makes the First Stage successful.

Now, Mangalyaan, is expected to go around the Earth for about a month, to attain the escape velocity. So that it can break free from Earth's gravitational pull. Only then Mangalyaa…