никак ты не повесишь ссылку на псевдоэлемент. только весь элемент можно обернуть к примеру в ссылку. или сделать его изначально через < a > без href, а потом добавить href.
Потому что img по умолчанию - inline элемент. Т.е. грубо говоря, строка. а у строк есть межстрочное расстояние.
напишите этой картинке стиль display:block и отступ пропадет.
В ошибке ведь все написано
Error: File to import not found or unreadable - Файл для импорта не найден
И файл со строчкой указаны - on line 3 of assets/scss/app.scss
Используйте что-то для организации модульности, например AMD или commonJS(есть и другие варианты, те же ES6 модули).
Ну или экспортируйте что-то в глобальную переменную(window).
Там кроме стилей должны подключаться еще и шрифты. Проверьте линки на шрифты в стилях, лежат ли они в той же папке или нет. Ну и подключается ли сам стиль на сайте?
Tinypng Kraken
2 лучших, все остальные по качеству далеки от них безумно.
У обоих сервисов имеются плагины для gulp.
Как полностью локальный вариант - gulp-image-optimization