: Lazy loading images (with data URI) and effects on SEO 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
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.)
More posts by @Cugini213
3 Comments
Sorted by latest first Latest Oldest Best
I've used data URI images on a site and I have found the following:
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.
When using the full image in the data URI, it substantially increases page size. This causes Googlebot to crawl your site much more slowly.
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.
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.
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.
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.