3

I've seen this question: Lazy loading images and effects on SEO

My question is very similar, except that I am using data-uri images like so:

<img width="1100" height="340" class="img-responsive lazy lazy-hidden"
     src="data:image/png;base64,iVBORw0KGgoAAAANS ... "
     data-src="//example.com/epic-cat-fails-omg.png"
     alt="" >

Each lazy-load image has a unique data uri to create a specific-sized transparent image. What should I put in the alt tag for SEO? Anything? Nothing? Does Google even bother with data-uri images?

(Or should I use a proper description, and use the <noscript> tag to put the actual <img> with the exact same description? I'm in the dark on this.)

  • Alt tags are for users that can't see the image. They have little effect on SEO. Google uses text around the image and the image file name for image search, but puts very little weight on the alt text as far as I can tell. Do what is right for users and don't try to do something for SEO. – Stephen Ostermiller Jun 29 '16 at 9:33
  • I'm going to have to respectfully disagree about your SEO comment: theseotailor.com.au/blog/lazy-loading-images-seo-experiment – Drakes Jun 29 '16 at 9:54
1

What should I put in the alt tag for SEO? Anything? Nothing? Does Google even bother with data-uri images?

Search engines define content as text.

A website with just only images and values for the alt parameter will not rank well in search engines because there is no supplementary text to describe the image in detail.

If you're trying to load images based on a data URI, keep in mind that it will increase your HTML code size more than if you just used an external image file.

If you are trying to lazy-load hundreds of small-enough images as an attempt to save on server processing power, I'd suggest going with an image sprite instead which is what I use on my website for picture listings. In a sense it feels like a lazy-load except that the pictures are already shown instead of slowly loading. Also, the browser compatibility with sprite loading is higher than data URIs.

  • Thanks for the comment. These images are large so lazy-loading is essential for initial page speed. Your comment about data uri compatibility is interesting. Could you include your reference so I can get more details? – Drakes Jul 1 '16 at 2:42
  • Data-URI is new. For compatibility, if you want to go really old-school, you could load an image grid as one image, and use image maps to define sections of the image that are clickable. The reference is the browsers themselves. Give Netscape or even old Internet Explorer (lower than version 5) a try. Heck, even Netscape doesn't support the basic javascript functions that are in use today such as document.getElementByID. – Mike Jul 1 '16 at 21:36
  • That would be a fun solution for people that casually copy site images – Drakes Jul 2 '16 at 1:31
1

What should I put in the alt tag for SEO?

Why do you got this question? I mean, you deal here with pretty banal construction (image as data uri and regular image as fallback for noscript browsers), so it doesn't need any special solution.

Use, as everybody uses, alt and title, fill them meaningful - those are the only best practices, both for SEO and for W3C.

  • You're sure then that there won't be a penalty for inserting text into an image alt that is only a data-uri? – Drakes Jul 1 '16 at 8:14
  • Be 100% sure - no alt in the world, under no circumstances would trigger a penalty. It isn't important, what kind of image it is, or on which way an image is implemented, data uri or image file. alt is a kind of placeholder for users, who doesn't see images, and for browsers, who doesn't display images. – Evgeniy Jul 1 '16 at 9:42
  • I refer you this SEO experiment (theseotailor.com.au/blog/lazy-loading-images-seo-experiment) to know that alt is used by search engines too, especially for image search. But what happens when the image is a data-uri that cannot be linked to? If it's a meaningless image stuffed with text, how do search engines respond? Be sure without "best guesses" – Drakes Jul 1 '16 at 9:48
1

I've used data URI images on a site and I have found the following:

  1. Your data URI images are unlikely to be indexed in Google image search. When the images are lazy-loaded, it is pretty much impossible to get them indexed.
  2. When using the full image in the data URI, it substantially increases page size. This causes Googlebot to crawl your site much more slowly.
  3. Older versions of Internet Explorer (version 7 and previous) won't be able to see your images.

Since you are using a transparent image in the data URI and lazy loading the full image later, I don't think your page size will increase so much that you need to worry about Googlebot.

As far as alt text goes, do what makes sense for users. Any user with a browser that doesn't load images would like to see text that makes sense when the image isn't loaded. Google image search won't be indexing your images, so it doesn't matter for that. Google pays almost no attention to alt text when it comes to web search.

  • Thanks for your answer. It mostly makes sense. About the alt tag, I refer you this SEO experiment (theseotailor.com.au/blog/lazy-loading-images-seo-experiment) to know that alt is used by search engines too. – Drakes Jul 16 '16 at 5:21
  • Yes, Google will index alt text, but the text there doesn't rank well. In the linked article, the alt text was the only text on the page and he was searching for long chunks of it. I wouldn't rely on alt text to get your site into the search results for your keywords like that. Yes, it will be indexed, but rankings won't be great. – Stephen Ostermiller Jul 16 '16 at 10:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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