Is it good to display an image as src="data: image/jpg;base64,...?

Question

I have two ways to approach displaying an image on my webpage. One way is a simple pass to the path of the image in src attribute.

Second way is to pass data in the src attribute

Will any problem occur in the future? Or a longer page loading time with second approach?

Suggestions please.

Answer 1

Loading the image in the page will be slower up front (larger html file), but faster overall (fewer requests to the server). Note that IE7 and lower have no support for this, and IE8 doesn't support images over 32k. (Source) Encoding in base64 also increases the image size by 1/3. (Source)

In my opinion, it makes sense for icons in CSS files, occasional small thumbnails, etc. But several large images should be loaded from normally.

Answer 2

If you have path: Use it.
First of all, data is not standard, so you can´t guarantee it works.
Second, you´ll get things like cache management free, without writing any code.