Как вы ресайзите картинки для верстки?

В верстке картинки должны быть размера в пикселях такого, что и отображаются + должны быть в разных форматах чтобы браузер грузил что умеет. Например у нас картинка на диске лежит 2000х2000, на сайта отображена 1000х1000, значит нам нужно подготовить 4 изображения, как минимум это png/jpg + webp умножить на 1x-2x размеров, а лучше еще большая градация размеров.
Как всё это делать автоматом
я хочу чтобы
<img src="foo.jpg" alt="Bar" />
само преобразовывалось в
<picture>
   <source type="image/webp" srcset="foo-large.webp  1024w, foo-medium.webp 640w, foo-small.webp 320w"/>
   <source type="image/jpg" srcset="foo-large.jpg  1024w, foo-medium.jpg 640w, foo-small.jpg 320w"/>
   <img src="foo.png" alt="Bar" />
</picture>

со сжатием, ресайзом, автоматом чтобы выбирало png/jpg и проставлением нужных путей.
Неужели сейчас все делают это вручную.
  • Вопрос задан
  • 199 просмотров
Пригласить эксперта
Ответы на вопрос 1
@Cwe
Падкий на front
Если ты используешь сборщик - посмотри для него плагин для ресайза. Для оптимизации огромное количество плагинов. А преобразование кода - напиши свой маленький миксин.

Upd:
Для ресайза - gulp-image-resize
Для оптимизации - gulp-imagemin
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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