Search code examples
htmlimagesrc

Can i use data-src in <img> instead of src attribut?

Can we use data-src instead of src attribute in <img> with no side effects?

we are using data-src only at https://www.svetandroida.cz/flightor-levne-letenky/ and everything works OK, but HTML validator say that we are missing "src" and Google News feed doesn't display our thumbnails https://news.google.com/publications/CAAqKggKIiRDQklTRlFnTWFoRUtEM04yWlhSaGJtUnliMmxrWVM1amVpZ0FQAQ?hl=cs&gl=CZ&ceid=CZ%3Acs

Do you think that missing "src" a is problem for Google not displaying our images?

Thank you

Solution

  • Can we use data-src instead of src attribute in with no side effects?

    No.

    data-src, like all data- attributes is a mechanism to provide custom data for (primarily) JavaScript on a website to use.

    src determines where to load an image from.

    It sounds like you are using data-src and JS to populate src dynamically. While there are reasons for do this, you've seen the negative impact it has on Google and you'll have similar problems when JavaScript fails.

    Use src, even if it for a default you override later. (And if you are overriding it with JavaScript, consider if it would be better to override it with srcset instead).