@chukriy

Работа с картинками, иконками при верстке?

Решил в верстку уйти на время, уже разобрался с гридами, флексбоксами, вспомнил гит и галп, настроил стартовый шаблон с миксинами, сеткой, нормалайзером и некоторыми библиотеками для анимации, слайдера и т.д Но работу с графикой отложил на потом. В принципе весь 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=...
  • Вопрос задан
  • 286 просмотров
Пригласить эксперта
Ответы на вопрос 1
@DLeo13
Я далеко не гуру, однако, мне кажется ты заморачиваться сверх меры.

Про объединение png, суперсжатие jpeg: ты хочешь чтобы вся assets песила пару мегов?

Объединение svg тоже может принести много ненужных проблем.

Иконки хорошие у Angular Material, можно брать шрифт или svg. Если есть непосредственная необходимость доступа к ресурсу без интернета (мобильное приложение, например), то бери svg сразу.

P.S. Не забывай про проблемы совместимости с Symbol.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы