Serj-One

TinyPng
https://github.com/bigbrush/yii2-tinypng
https://tinypng.com/developers/reference/php

Естественно, брать новый. За простой он тебе, думаю, не платит.

Контент в html, оформление в css. Очевидно, что изображения каталога - это контент.

"Удерживающих" прелоадеров не существует заведомо, любой прелоадер отталкивает. Посетитель пришёл за контентом, а не за смешными фразами при загрузке. Нужно оптимизировать скорость загрузки, а не маскировать проблемы свистелками.

БЭМ

Git + Trello + LastPass + Я.Диск.

Ты импортируешь css в scss. Соответственно, срабатывает стандартный css импорт, а этих css файлов рядом нет. Код импортируемых файлов при css импорте не включается в компилируемый файл.

Нужно понимать, что ширина сайта (именно контентной части) должна зависеть не от ширины монитора пользователя, а от удобства восприятия. Бегать глазами от одного угла экрана к другому пользователю попросту неудобно. Оптимальное решение - прежние максимальные 1200px для десктопа, и адаптив до 320px.

Причём здесь записи? Оформление формируется в вёрстке.

Зачем такие извращения? Browsersync умеет отдавать внешнюю ссылку, по которой можно показывать работу кому угодно.

gulp.task('browser-sync', function() {
    browserSync.init({      
        tunnel: true
    });
});

Tinypng
Kraken
2 лучших, все остальные по качеству далеки от них безумно.
У обоих сервисов имеются плагины для gulp.
Как полностью локальный вариант - gulp-image-optimization

Открою вам секрет, адовая конструкция "parent__block__another-block__element" к "старому доброму БЭМ" не имеет совершенно никакого отношения.

csso
gulp-csso

1. rem + em + px. Нужно понимать, в чём каждая из единиц является оптимальной, и применять нужное.
   
2. В процессе разработки вполне достаточно chrome dev tools. Для финального теста - browserstack, достойных альтернатив у него нет.
   
3. Вопрос некорректен. Все работы в портфолио должны быть выполнены качественно, и быть боевыми проектами, а не показухой на основе free-psd на своём хостинге. Причём быть их должно не мало. Одна не решает ничего.
   

Browsersync Какой-то специальный редактор здесь не нужен.