Nikkorfed
@Nikkorfed
20 лет, веб-разработчик из Екатеринбурга.

Как правильно подключить и оптимизировать изображения в Gulp?

Здравствуйте! Пытаюсь с помощью Gulp реализовать грамотную оптимизацию, сжатие и подключение изображений к проекту. Подробно изучил сборки, прочитал много разных документаций и статей на эту тему — на Хабре, Типичном верстальщике, Webdesign-master.ru, Css-tricks.com и многих других источниках. Нашёл в них для себя много нового и полезного, но всё же не смог определиться с идеальным способом подготовки изображений для сайта.

Сама задача заключается в следующем — нужно подключать .jpg и .png изображения как в виде фона через стили background-image: url..., так и напрямую в HTML-тегах <img src="...">. Также нужно подключать иконки в формате .svg, чтобы можно было их впоследствии легко масштабировать и красить. Вдобавок к этому хочется автоматически создавать две версии изображений, для ретина и неретина экранов, чтобы потом подгружать подходящую. Может есть фронтендеры, которые давно уже выработали для себя подходящую схему и могли бы поделиться идеями, как лучше всё это организовать?

Сам написал уже целую лапшу в Gulp, использовал кучу плагинов из PostCSS. Да всё как-то не то. Разобрался пока только с SVG — c помощью postcss-inline-svg просто конвертирую их в инлайновый вид url("data: ..."), что очень удобно, кстати. А вот что делать с обычными растровыми изображениями? Есть возможность тоже переводить их в инлайн (через postcss-assets) и подключать как data: ... . Это как раз должно значительно уменьшить количество лишних запросов к серверу. Но загвоздка в том, что тогда не работает плагин postcss-at2x, который создаёт стили для экранов с высоким разрешением. Это одно дело. А как ещё разобраться с обычными <img> и заставить там тоже подключать Retina-версии? Использовать какой-нибудь Retina.js не хочется, ибо всё равно будут грузиться оригинальные изображения, будет видна прогрузка, да и это просто костыль...

В общем, вопросов пока больше чем ответов. Надеюсь, что кто-нибудь сможет сориентировать в этом вопросе и подсказать, как сделать всё по уму :)
  • Вопрос задан
  • 56 просмотров
Пригласить эксперта
Ответы на вопрос 1
ArsenyMatytsyn
@ArsenyMatytsyn
CEO iAmStudio, предприниматель.
1. Лучше ручной обработки я пока не нашел метода.
2. В остальных случая спасает выгрузка под разные разрешения (редакторы сейчас это позволяют) + модули типа imagemin (версия для gulp)

UPD: ручная обработка позволяет повернуть элемент на градус на канве редактора и сэкономить размер.
Ответ написан
Ваш ответ на вопрос

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

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