How to embed images directly to your HTML or Markdown

in #steemit8 years ago (edited)

Img

When you code a web page, you’ll oftentimes want to include images. In almost every case you’ll throw down a line of code that looks something like this:

<img src="location/of/image.png" alt="alternative text" scale="0">

But did you know that you can embed your image directly into the HTML without having to link to an external file? Yep, but first, why would you want to? In a word, portability. 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. How do we do this? Observe.

Let’s say you have an image that you want to include in your markup — when you link to it, the browser interprets it as encoded data in a format dictated by your tag. In theory, you can convert the image directly to encoded data and put it directly into the src parameter, right? Let’s find out.

You can use Base64 code instead of an image location.

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAACXBIWXMAAAsTAAALEwEAmpwYAAAA
B3RJTUUH4AccEA4yOA1aawAAAyFJREFUSMftlltIFGEUx8/3zTd7cS/tels1TbeyqLSiorKUIExI
KEMiIiiMopcgCLKH6KGg6AI9+aARVPRQVPZgUQ8pBElJZZRlpIVlZuiqm7q3mZ3Ld3roQtgyzYZS
D/0H5mH4vvnNOXPO/3wEEWEqRWGK9Q8A8PvtVrfc2hcHAFVTJxPAOd90+CYAP/dMjyoAAJuP3JlM
QF8g9LBzSNEwx0ludOkA2Nz+aSwqTRrAn+0pKfLVNrRWzWNvRuDDuL6hJH/PmXtmQ0ATetETSN3Y
EBwPbbke3toY7vk04q6sj6uKmb2mqqjInyFQISLhvhXiYJTm5aQVz0xVVD5pEYyGpc73AUTsHFJO
tEYQsfF+F5oTSaqTP0txr91CgJjfwhI+HQtHX/UGKZn4IvKtLSZqZrbHl+ZKAtDR/bH8UIuNAQUd
AHQiGn9m3d7SnZULkwBYLRa7RfDPKchesY7xeNvl84JoNQAEQ7GorDpsotk+cNpFRBRFxjU1EugH
yowjOHm1o3D7xR3HmswC0j0OACJJMgDIcY38zqz2VxfNzXHcbh88fumBKUBWupcSHpdVAKCE/9YO
S4tzrx2tsjDacOulOasgxOO0KlIMEFMcTuNS5oipbjujhFIyPC6Z9SKfN0WOhAWuWJxuRG7cqjMy
Xf3DIU3nSwozzQL8PieC0NfWQl1pDpvRT2aU7Dp9t7y2KRxTTu0pNQuoWu1XND40GIwF+t1ZuQYA
Tdc73o2sWuB7XFddtih/YrIN8jt9c73KBZHB7KXLXj9qT7gmxUp7r+z+w3lw4WAFAKgadD95mnCB
ovGa8sI/HzgVy2fVrM3TdOQ8cZTVK7OP7FpjDEicolAkuu1oU/PzgA6iwyYQ+Hr9fAwARJQUrmty
2fyMswfWz83PSALwQ4Hhkb4hKTAaHo8qclzRqZWiYmNsmoNlpLpz0+25WZm/li38ZMOEc05IEv4O
AFEV3wTBa0cCIGtgYzAQBr8XUgR8+2GAMYFzPhqSyhYXMIGRb3MnGYbGYUxGjQOjIAqg6GChIFAA
IKocU3Vut4iKpntcNoFS8v9s+tcBXwDEIPHZH2+GUwAAAABJRU5ErkJggg" alt="beastie.png">

beastie.png

It's a pity that

steemit.com / https://stemmin.com
can't handle it correctly :(

Would be nice to have it working properly

Pic