Решил, в целях увеличения производительности, использовать Intersection Observer, реализуя, таким образом, lazy-load.
С помощью этого API я буду отслеживать положение картинки. Реализация планируется следующая:
<img src="preloader.gif" data-src="real-image-source" alt="alt text" title="title text"/>
В момент, когда картинка будет на экране пользователя, атрибут
src станет равен атрибуту
data-src. Как это повлияет на SEO, если такие картинки будут все? То есть изначальное значение атрибута src
ВСЕХ картинок == preloader.gif.
И вторая реализация:
Использовать вместо preloader.gif уменьшенную копию всех картинок (5-10px в ширину). А потом точно также менять значение атрибутов. Но так не хотелось бы, потому что придется генерировать эти картинки + в два раза больше запросов на сервер.
