Search code examples
htmlcssimagedata-url

Which is better? Data URL scheme or image links for displaying image?

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.

Solution

  • 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.