Здравствуйте! Пытаюсь с помощью 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 не хочется, ибо всё равно будут грузиться оригинальные изображения, будет видна прогрузка, да и это просто костыль...
В общем, вопросов пока больше чем ответов. Надеюсь, что кто-нибудь сможет сориентировать в этом вопросе и подсказать, как сделать всё по уму :)
Простой
