Вадим Кот

https://codepen.io/anon/pen/GBrJvY

https://github.com/aFarkas/lazysizes

В плане seo гугл бот точно видит картинки - можно убедиться в search console в сканирование->Просмотреть как Googlebot. Яндекс нужно протестировать аналогично гуглу в вебмастере.

В статье гугла по ссылке Александр Талалаев есть раздел Lazy loading libraries

https://codepen.io/WhoIsAndrew/pen/QGLeMP
https://codepen.io/CiTA/pen/ALVWzg
https://codepen.io/geoffgraham/pen/vWJeOP
https://codepen.io/mihaelnikic/pen/yJLJYG

Чтобы была поддержка в IE svg спрайта из внешнего файла нужно использовать полифилы https://github.com/jonathantneal/svg4everybody или https://github.com/Keyamoon/svgxuse

Вы не поверите, но вопрос по верстке именно такого элемента уже задавался в прошлом году и имеет несколько решений Как сверстать это?

Модификатор нельзя использовать самостоятельно https://ru.bem.info/methodology/quick-start/#%D0%9...

или так (останется только тени добавить)

Примерно также как и на флексбоксе делается - для начала сделать высоту body в 100%
https://codepen.io/anon/pen/QQwYav

Вопрос полностью дублирует уже решенный Как осуществить данный hover эффект?

одно из них сдвинуто влево и вверх а под ним фон

дизайнер предусмотрел состояния элемента и сделал один под hover

https://jsfiddle.net/5gjfufub/3/

Есть такой устаревший тег dir https://developer.mozilla.org/en-US/docs/Web/HTML/... - он в браузерных стилях по умолчанию имеет отступы сверху и снизу (стили одинаковы для ul, menu, dir). Зачем его используете (dir class="main-header clearfix")? Очепятка?
Из косяков header не закрыт и background-attachment: relative сами придумали?
Для .header в background после url зачем точка с запятой?
https://validator.w3.org/ - избавил бы сразу ото всех этих вопросов.

Откройте файл svg в текстовом редакторе или браузере с просмотром исходного кода и увидите, что внутри находится image data:image/png, т.е. png изображение.

Такая задача решается либо с помощью jQuery, либо vanilla js
Вот варианты: https://codepen.io/anon/pen/eEKWWO

https://jsfiddle.net/sma9j1s5/3/
position:relative добавить для кнопки - на данный момент у вас before спозиционирован относительно body.