Question

I am a bit confused about this. For displaying images in my HTML page, embedding image code is good in HTML img tag (using Data URL technique) or giving a link to that image file will be more better (the traditional way)? If anyone can tell me the advantages and disadvantages of both of them in a comparative manner than it will be a great help.

Answer 1

Data URL embedding:

• ↑ Fewer HTTP requests to load the page;
• ↓ Super-long code lines with not-tiny images;
• ↓ Hard (very hard) to maintain (think when you need to replace images);
• ↓ IE 6 and 7 do not support it.

Image link:

• ↑ Easy to maintain (you just have to replace the file);
• ↑ Cached independently of the HTML;
• ↑ Code is conciser;
• ↑ Supported in all versions of IE;
• ↓ More HTTP requests to load the page.

In general, I suggest to use links for larger images (photo, layout elements, big icons) and for images that can change over time. Use Data URL only for very small icons.

I have to say you can avoid the first two Data URL problems (long code and maintainable) generating Data URL from a physical image file, using a server-side language (PHP for example) for encoding.