I'am working with a large project with lot of images. to increase it's page speed, chrome "lighthoues" recommend me to differ images. But my company gives priority to the ranking of the page. I'am not sure how this effect for google crawlers. As you know after dffer the images, there is no real image url under the "src" attribute. So how can google understand and optimize my images? can some one provide me a realiable resource to understand the problem?
above is a sample differed image tag. As you can see src tag doesn't contain the actual image. actual image is under data-src attribute which will be loaded to the site using javascript.
I just wanna know how does this affect to our SEO/Page-ranking?
I thought I had read somewhere that lazy-loading is fine for SEO but to be sure I did some googling and found the following. Spoiler alert; googlebot will render the full page and thus all images will have populated src="" attributes.
https://yoast.com/ask-yoast-lazy-load/