Тут нужно подходить к вопросу с умом. Все зависит от конкретного проекта и задач которые он должен решать. Если у тебя, условно, пара картинок на странице, то наверное не стоит делать по 4-6 копий одного изображения. А если у нас галерея картинок, а их еще штук 50, то я думаю стоит позаботиться об оптимизации загрузки изображений. Тем более это все решается написанием небольшого скрипта в сборщике, например gulp.
Не, ты не понял. Брейкпоинт стоит на ширину экрана, а не картинки. Допустим на мобиле идет маленькая картинка 260 на 260. А на десктопе (например после 768рх) идет уже другая картинка, например 500 на 400. Это два разных изображения. Естественно если на брейкпоинте в 768рх изображение не меняется, то source там и не нужен.
Avocode и zeplin в определенном смысле упрощают написание стилей, если есть возможность и желание, то стоит ими пользоваться. Доставать все стили руками из фотошопа будет дольше.
По поводу двух версий сайта, в комментариях уже говорили, что это не самая лучшая практика.