: Image data URI and SEO 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

@Eichhorn148

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.

Vote Up Vote Down