What does it means data:image/png in the source of an image?

Question

I am using Symfony and I found this in the source of an image of one template:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAABUElEQVQoz2NgAIJ29iBdD0d7X2cPb+tY2f9MDMjgP2O2hKu7vS8CBlisZUNSMJ3fxRMkXO61wm2ue6I3iB1q8Z8ZriDZFCS03fm/wX+1/xp/TBo8QPxeqf+MUAW+QIFKj/+q/wX/c/3n/i/6Qd/bx943z/Q/K1SBI1D9fKv/AhCn/Wf5L5EHdFGKw39OqAIXoPpOMziX4T9/DFBBnuN/HqhAEtCKCNf/XDA/rZRyAmrpsvrPDVUw3wrkqCiLaewg6TohX1d7X0ffs5r/OaAKfinmgt3t4ulr4+Xg4ANip3j+l/zPArNT4LNOD0pAgWCSOUIBy3+h/+pXbBa5tni0eMx23+/mB1YSYnENroT5Pw/QSOX/mkCo+l/jgo0v2KJA643s8PgAmsMBDCbu/5xALHPB2husxN9uCzsDOgAq5kAoaZVnYMCh5Ky1r88Eh/+iABM8jUk7ClYIAAAAAElFTkSuQmCC" alt="Search on Symfony website" />

What it means and how to create my own code?

Thanks.

score 5 · Accepted Answer · answered Oct 31 '13 at 00:41

5

This is a URI scheme (Uniform Resource Identifier scheme) that provides a way to include data in-line in web pages as if they were external resources.

See here http://en.wikipedia.org/wiki/Data_URI_scheme for a longer description.

You can encode your own here:

http://webcodertools.com/imagetobase64converter

answered Oct 31 '13 at 00:41

Lee Taylor

7,761
16
33
49

Thanks, it is faster than using the location of the image?? – kilkadg Oct 31 '13 at 01:01
For smaller images it may be faster but you probably wouldn't want to be using that technique for every single image in a web site. – Lee Taylor Oct 31 '13 at 01:02

score 2 · Answer 2 · answered Oct 31 '13 at 00:41

That's a base64-encoded image embedded directly in the page. If you want to generate your own, the base64 utility on any Linux system will do this:

base64 image.png

and just copy that string into your image tag.

<img src="data:image/png;base64,LONGSTRINGOFASCIICHARACTERS" alt="..." />

score 1 · Answer 3 · answered Oct 31 '13 at 00:40

It's the data URI scheme, it is a way to provide the actual content of the resource in the URI (instead of the location where to find it).

There are example code on how to generate them in the linked wikipedia page, but as you can see in the sample you gave it's pretty easy to generate one; give the mime type, the encoding used and then the content.

score 0 · Answer 4 · answered Oct 31 '13 at 00:40

0

This is a url in 'data uri scheme'.

answered Oct 31 '13 at 00:40

Pateta

430
4
15

What does it means data:image/png in the source of an image?

4 Answers4