I was trying web clone coding. In my cloned web, image(include background) is stored in my storage. but when I show my web to my friends, cause they have no image file they can't see background image. Is all web developer provide there Image from other site? (src = "https:// ~~~ ") and isn't it make loading more longer?
Asked
Active
Viewed 46 times
0
-
This can help you: https://stackoverflow.com/questions/8499633/how-to-display-base64-images-in-html – 95faf8e76605e973 Jul 15 '20 at 03:46
-
@95faf8e76605e973 Anyway the image should be provided from other url? – Suee97 Jul 15 '20 at 03:57
-
cause I didn't understand the link's answer .. – Suee97 Jul 15 '20 at 03:57
1 Answers
0
In real world scenario, developers will most likely serve files with a real URL path because it helps with caching, which in turn speeds up loading.
In certain cases, we can encode images (or anything) into base64 encoding.
The encoded data (in your case, images) can then be included directly in your files that needs them (i.e., HTML or CSS), and the page will decode them and render the images for you.
A base64-encoded image looks something like this:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABXklEQVQ4jbWQsUsCYRjGn/fuSu/Sk3ALmlzNtoagKRqSaHMKGkKhEOV0KWispSXPQaglAnNobOgfaCyIcgicmxO9zFPv/N5WwTs5gt7x+5739/2eDwgw/bK67HcnBQG4Ag3L0LJ/BoBFDuDzTiGUCAywDC3bNbRtANCrwxaBziRZanAGcjADwR8AX1uGesEZyFGzXwO43VsKn07GaJa5lY/GMefUAYooEvaELDnCEW9M2I1V7GdPg04hlLAM7dYqqut67ftLNwdpMB5dgRfXdVMgHIFpx9egfbwYk0eDA2LKAWJMkK6cUOhOGdkpZmoQiy29OmwFq1AKb5CgQyakAXqQJKpELn/eJzPK1JKhPhHjk4EmMzUVmU/coVLkeXff672pk155YXUsxikCJQFeYVCSgCiAV920N311b+r37FslH413S+qaV86rggfIBbG38RRAN+2ZHzsTMKvGv80vvziHGAusG84AAAAASUVORK5CYII=
You can encode images into base64 encoding either using an online service (like this one) or with your own code.
To include these images into your webpage, simply use the string in the src attribute:
<p>Stack Overflow logo:</p>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABXklEQVQ4jbWQsUsCYRjGn/fuSu/Sk3ALmlzNtoagKRqSaHMKGkKhEOV0KWispSXPQaglAnNobOgfaCyIcgicmxO9zFPv/N5WwTs5gt7x+5739/2eDwgw/bK67HcnBQG4Ag3L0LJ/BoBFDuDzTiGUCAywDC3bNbRtANCrwxaBziRZanAGcjADwR8AX1uGesEZyFGzXwO43VsKn07GaJa5lY/GMefUAYooEvaELDnCEW9M2I1V7GdPg04hlLAM7dYqqut67ftLNwdpMB5dgRfXdVMgHIFpx9egfbwYk0eDA2LKAWJMkK6cUOhOGdkpZmoQiy29OmwFq1AKb5CgQyakAXqQJKpELn/eJzPK1JKhPhHjk4EmMzUVmU/coVLkeXff672pk155YXUsxikCJQFeYVCSgCiAV920N311b+r37FslH413S+qaV86rggfIBbG38RRAN+2ZHzsTMKvGv80vvziHGAusG84AAAAASUVORK5CYII=
" />
yqlim
- 6,898
- 3
- 19
- 43
-
So caching would be great way to serve img. right? Then why use base64 encoding? – Suee97 Jul 15 '20 at 04:03