Make delicious recipes!


Images can be displayed in a webpage using the 'img' tag as follows:

<img src="some-url" width=300 height=400>

For example:

Following image can be displayed using:

<img src="PS2.PNG" width=180 height=120>

Encoding image as base64 into the html code

Any kind of data can be encoded in base-64 to give an ascii output.
Image can be converted into base-64 ascii format by using some online tool such as this one.
The output ascii can be used as follows:

<img src="data:image/png;base64,<encoded-data>">


Advantage of doing so is that the image data need not be fetched from a different URL.
However, an issue with this approach is that the size of the HTML page becomes quite big.
Also, base-64 encoding usually blows up the size of the original image, so the overall loading time of the page is increased.

To summarize, create base64 encoding only when the image is small enough so that around 30% increase in image size would be of no consequence.
Do not use this approach if the image is very large (Example: more than 100kb)

Like us on Facebook to remain in touch
with the latest in technology and tutorials!

Got a thought to share or found a
bug in the code?
We'd love to hear from you:

Email: (Your email is not shared with anybody)

Facebook comments:

Site Owner: Sachin Goyal