4

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.

13ruce1337
  • 753
  • 1
  • 6
  • 13
manan
  • 234
  • 2
  • 9
  • Care to search engines? As [they don't index](https://productforums.google.com/forum/#!msg/webmasters/MDujtIpTuPo/xNmhJCF-aGQJ) the Data URIs in the page. – Hashem Qolami Mar 07 '14 at 17:22

3 Answers3

7

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.

Community
  • 1
  • 1
Mooseman
  • 18,763
  • 14
  • 70
  • 93
1

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

Giacomo1968
  • 25,759
  • 11
  • 71
  • 103
JamesG
  • 2,018
  • 2
  • 28
  • 57
  • Actually My problem is when i update src attribute (with first approch) using javascript, again one request goes for the image. And that request show cookies carry in pingdom tool. – manan Mar 07 '14 at 17:38
1

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.

deviantfan
  • 11,268
  • 3
  • 32
  • 49