Решил в верстку уйти на время, уже разобрался с гридами, флексбоксами, вспомнил гит и галп, настроил стартовый шаблон с миксинами, сеткой, нормалайзером и некоторыми библиотеками для анимации, слайдера и т.д Но работу с графикой отложил на потом. В принципе весь workflow от принятия макета до итогового варианта ясен, кроме работы с графикой. Почитал разные статьи на хабре, css-tricks, тостере, скорее всего по кусочкам ответ уже был, но хочу резюмировать окончательно с вашей помощью.
PNG/JPEG:
- Все что в png обьединить в спрайт, минифицировать, чтобы уменьшить число запросов, по возможности самому нарисовать или попросить дизайнера перерисовать в svg, если необходимо.
- Jpeg максимально постараться сжать пока не начнут появляться артефакты
Иконки:
1) Использовать иконочный шрифт, например с помощью icomoon, вариант удобный, так как можем цвет, размер менять и хорошая поддержка, но проблема с анти-алиасингом, проблемыс позиционированием присущими свойствами для текста и при сбое шрифта буду юникод символы.
В общем кажется вполне рабочим вариантом, если это не какой то крупный проект.
2) Обьединить все svg в один файл, где они обернуты с symbol и использовать через use.
Тут у меня вопросы, лучше вставлять документ на сервере в разметку и кешировать в local storage?
Аяксом получать файл и вставлять в страницу, тогда он будет кешироваться?
Или же прописывать полный путь и добавить svg4everybody?
3) Обьединить в спрайт, отсутствует возможность взаимодействовать.
4) Вставлять через data uri прямо в код, не до конца понял насчет кеширования. svg файл это язык разметки входящий в подмножество xml. В любом случае браузер парсит документ, читает координаты и рисует фигуру, какая ему разница будет это отдельный файл в виде спрайта, отдельного файла как при cymbol или же разбирать код внутри файла стилей? Но это у меня уже рак мозга начинается, я давно не читал информацию про то как рендерит браузер файлы. Такой вариант тоже можно через gulp автоматизировать, но еще не пробовал.
Пока попробовал только шрифты и symbol в видео отдельного файла, но с запросом к нему, а не вставки его в html. Но я так понял, что это самые подходящие варианты. Пока повторял другое, то графику просто экспортировал в нужном формате и подключал без спрайтов, иконочных грифтов. Хочу с этим разобраться и уже пойти где то поработать в офисе на время.
P.S До этого верстальщиком лишь пару раз брал заказы, но это было года 3 назад. Остальное только по yii2, laravel немного работал. Но не скажу, что верстка проще, если подходить ответственно и рассматривать различные варианты, оптимизацию и т.д Ладно, надеюсь поможете окончательно разобраться, а то зациклился немного..
Часть просмотренного:
https://css-tricks.com/icon-fonts-vs-svg/
https://css-tricks.com/pretty-good-svg-icon-system/
https://habr.com/post/260645/
https://habr.com/post/272505/
https://www.youtube.com/watch?v=S_wZSjLiUog&index=... 
Средний
Средний
Простой
