Serving image using strange URL

Question

Hello,

Some website has images with strange URLs

For example below PNG image (Strange URL):

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAAAdCAYAAAA91+sfAAAAIElEQVRoge3BgQAAAADDoPlTX+AIVQEAAAAAAAAAABwDJF0AAcCDW58AAAAASUVORK5CYII=

What type of URL is this? and how this works in that website?

Thanks

Answer 1

data URI scheme

Answer 2

It appears you are looking at a URI specified using the data URI scheme.

In this case I believe the PNG data is encoded directly into the URI.

Answer 3

That's an embedded image whose binary contents were encoded by Base64 so that it fits in a "normal" String inside a HTML page. With other words, that's an embedded image. Also see this: http://www.w3.org/TR/xhtml-print/#s.4.1.2

However not all browsers do support it and it's also not really efficient. The image is now tied to the parent (X)HTML page and you cannot control its request nor (caching) headers separately. It's only useful when transferring images or any other binary data through real XML files.

Answer 4

Like everyone mentioned, it is data URL scheme. It was detailed in RFC 2397 back in 1998 and follows the following syntax:

data:[<mediatype>[;base64],<data>

IE 5 - 7 do not support it, other standard-compliant browsers such as Firefox, Safari, Opera and Chrome do support data URIs. Work arounds are available for older versions such as IE.

Just a side note, you can generate it with one line of PHP :

<?php echo base64_encode(file_get_contents("yourimage.gif")); ?>

Answer 5

nice answer to this question.