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.

Answer 3

Yes the second approach is something like 8 times slower than the first one. That’s base64 encoding.

I use base64 to do small images, and the benefit of this is that they can be stored in a database. Use them on things like thumbnails, profile pictures etc... anything that is around 100 or 200 KB

EDIT: Sorry my bad... 37% bigger file size is base64