Lazy image loading with semantic markup

Question

I have a very image-rich site. To conserve bandwidth for users, I would like to lazy-load images as they enter the view-port. There are assorted jQuery plugins and similar that accomplish this. This comes at the price of placing the actual image url, not in the src attribute but someplace else. This makes the markup less nice, and worse, less intelligible for search engine crawlers.

Is there way to have both lazy image loading and semantic, search-engine-friendly markup?

Ib

Answer 1

You do not need to put src of image somewhere else. There are a no. of plugins available. Check the following link http://www.appelsiini.net/projects/lazyload

Grouping

That's not correct, the plugin you link to uses a placeholder in src and the actual url in the data-original attribute. – Ib

Oh I see, Check this link if it could help you: webmasters.stackexchange.com/questions/26190/… – Grouping

Answer 2

Note that now <img loading="lazy" is standardized, so you can just keep src as the actual source and everything works perfectly with semantics, more details at: How do you make images load lazily only when they are in the viewport?

Outfitter