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

Improve this question
2
  • 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, 2016 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, 2016 at 9:54

3 Answers 3

Reset to default
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.

Improve this answer
3
  • 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, 2016 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 -- No longer here
    Jul 1, 2016 at 21:36
  • That would be a fun solution for people that casually copy site images
    – Drakes
    Jul 2, 2016 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.

Improve this answer
3
  • 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, 2016 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, 2016 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, 2016 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.

Improve this answer
2
  • 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, 2016 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, 2016 at 10:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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