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.

Labels:

Comments

Post a Comment

Thank you for your comment. It'll be reviewed and posted to the blog.

Popular posts from this blog

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. 1, 2, 3 - Smile 1, 2, 3 - Smile 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. Bu...
2 comments
Read more

Dudhsagar Falls - An exhilarating rail trek in the picturesque Western Ghats

Usually the trips we plan gets finalized at the last moment - making all the bookings a day or two before. But, For this trip we just changed the usual way. This was a well-planned one. We had booked train tickets and stay almost a month in advance. We boarded the train from Bangalore City station. We had our reservation in  Rani Chennamma Express  till Londa Junction. We reached Londa Junction at around 8:30 AM. We had breakfast at the station - Vada Pav and Idli Vada - were only things available there. Then, we bought General tickets and boarded  Chennai Vasco Express  at around 9:00 AM. We reached Castle Rock at around 10:00 AM. Bon Voyage - @Bangalore City Railway Station We started our expedition From Castle Rock at around 10:30 AM. Weather was awesome - drizzling with cool breeze. View was awesome all the way - full of Jungles, Mountains, small and big waterfalls. The rail trek was an ultimate experience amidst the beautiful Western Ghats. ...
Post a Comment
Read more

Cross-Site Scripting (XSS) Vulnerability

Cross-site scripting   ( XSS ) is a type of   computer security   vulnerability   typically found in   Web applications . Cross-Site Scripting (XSS) attacks are a type of injection, in which malicious scripts are injected into  trusted web sites.   Cross-site Scripting ( XSS )  is generally believed to be one of the most common application layer hacking techniques. XSS is the hacking technique that leverages vulnerabilities in the code of a web application to allow an attacker to send malicious content from an end-user and collect some type of data from the victim. An attacker can use XSS to send a malicious script to an unsuspecting user. The end user’s browser has no way to know that the script should not be trusted, and will execute the script. Because it thinks the script came from a trusted source, the malicious script can access any cookies, session tokens, or other sensitive information retained by the browser and used with th...
1 comment
Read more