Как работать с картинками на gulp.js?
Попробую ответить.
1. Растр в спрайты. Под ретину можно 2@ 
2. Есть несколько способов хранить и использовать svg спрайты. SVG спрайт — это всего лишь файл где поиск по svg элементам происходит по id. <symbol viewBox="0 0 21 21" id="add_icon">
    <title>add</title>
    <path d="M10.5 1C5.3 1 1 5.2 1 10.5S5.3 20 10.5 20s9.5-4.3 9.5-9.5S15.7 1 10.5 1zm0 1c4.7 0 8.5 3.8 8.5 8.5S15.2 19 10.5 19 2 15.2 2 10.5 5.8 2 10.5 2zM10 6v4H6v1h4v4h1v-4h4v-1h-4V6h-1z"/>
</symbol>
На странице используем тег 'use', где атрибут xlink:href — это ссылка на svg, у с указанием идентификатора, например:<svg class="ico-svg">
  <use xlink:href="/ico/ico-set.svg#add_icon"></use>
</svg>
Для поддержки отсталых браузеров используем полифил https://github.com/jonathantneal/svg4everybody. Управляем цветом через свойство fill
3. Элементы интерфейса, такие, как иконки, лучше конечно в векторе хранить. Растр — сжимать.
4. Мелкие элементы в base64. habrahabr.ru/post/116538
Все это собирается, пакуется и т.д. сборщиками, все верно. 
Для SVG у нас используется очень замороченая система, которая: собирает svg-файлы от дизайнеров, клеит из них спрайт, генерирует png спрайты в разных цветах и генерирует стили для них. А еще парсит превью всего этого на отдельной странице, для теста.
Мы используем gulp и плагины для этого:
https://www.npmjs.com/package/gulp-optipng
https://www.npmjs.com/package/gulp-raster
https://www.npmjs.com/package/gulp.spritesmith
https://www.npmjs.com/package/gulp-svg-sprite-plus
https://www.npmjs.com/package/gulp-imageminЕще один способ от Владимира Кузнецова. У него все проще, потому что задач таких, как у нас не стояло.
Я ,конечно же, порекомендую изучить, как это реализовано в TARS. Сами таски находятся в отдельном репозитории 
О том, как это все работает можно узнать из доклада (https://vimeo.com/123924728 20 минута) или из доков к TARS. ТАм все очень подробно описано.