Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

Do you think the use of image data URI is SEO friendly?

On the one hand saves you a HTTP request. On the other hand it really messes up your code. Especially for image files larger than 20KB or moving GIF image files of up to 200KB, the quantity of code inserted is enormous. As Googlebot reads usually from top to bottom, all data after the image data URI encoding will be harder to rank well in Google.

Consider that image data URI is not in the CSS files as they should normally be and for the time being I can use only TinyMCE editor which provides me with just two options, either insert image with the image data URI method or the traditional image link.

I would like to know which is more search engine friendly.

share|improve this question
1  
Also note that, "Base64-encoded binary data is approx 1.37 times the original data size" (Wikipedia Base64) so not only are your pages larger, you are in fact transmitting more data and potentially using more bandwidth (gzip encoding may reduce this?). Also, IE8 reportedly has a DATA URI size limit of 32KB (approx 23KB image file size). So, it's probably only practical for small images. – w3dk Jan 4 '14 at 12:05
    
When using mod_deflate to gzip compress the pages that you send, the Base64 data gets shrunk back down considerably. It is still larger, but only by a very small amount, certainly not by 1.37. – Stephen Ostermiller Jan 5 '14 at 10:46

They both help and hurt SEO.

I have a site on which I use data URI images. The images are all small. Most visitors only view a single page. I inlined the JavaScript, the CSS, and them images (using data URI). Now each page is only a single request to the server and the page load event fires in 400ms from when the request was started. Before I inlined everything, it was over one second.

Performance and page load time improvements

The biggest advantage is that they can be embedded within the HTML or CSS directly. This cuts down on the number of requests that need to be made to the server to render the page. Reducing the number of requests can substantially improve the performance for users. Higher performing sites have an SEO advantage.

Using "sprites" or multiple small images laid out next to each other in a bigger image file and using CSS to show just the relevant portion of the image is another technique in the same vein. You should also investigate whether sprites would be an alternative to data-uri because they don't have many of the disadvantages.

Increased page size leads to lower crawl rates

Initially I was giving all bots the data URI images. When I did so, I noticed that Webmaster Tools reported that my page size went up dramatically and that Googlebot started crawling fewer pages on my site because of it. After that, I changed the user agent test to treat all bots like older versions of IE. Now bots and older browsers get the image links and modern browsers get the data URI.

If you implement data URI for your images, check your crawl rate in Google Webmaster Tools afterwards. Ensure that Googlebot is still crawling enough pages on your site that it will be able to keep up with the changes you make to your site.

Serving more bytes overall

Base64 encoding increases the size of the image by 25%. Gzip transfer encoding helps some, but you are still serving more bytes than serving the images directly.

Limited ability to cache images

If you include the images in the HTML, you have to serve them again as part of each subsequent page. Conversely, image file requests are usually cached by the browser between page requests.

Using data URI images in your CSS files can be fine in this regard because the entire CSS file can be cached.

Limited browser support

Browser support is good, but not perfect. All modern browsers support data URI, but older versions of Internet Explorer (7 and earlier ) do not. About 1% of my visitors use these old IE browsers last time I checked.

As such, I put in user agent tests to determine whether browsers support data URI. I conditionlly serve data URI only to browsers that support it.

Can't be used for large images

Some browsers have limits about how big data URIs can be. I think it is around 4k or so. You can only use data URI with relatively small images.

Images won't appear in image search

Google won't index data-URI images for image search. Small images that are appropriate for data-URI are generally not high enough quality to rank in image search anyway.

If you have an image that ranks well in image search, don't convert it to data-URI.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.