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

Question

[Евгений Окрушко]

В верстке картинки должны быть размера в пикселях такого, что и отображаются + должны быть в разных форматах чтобы браузер грузил что умеет. Например у нас картинка на диске лежит 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 и проставлением нужных путей.
Неужели сейчас все делают это вручную.

Comments

[Алекс Глебов]

обычно, при загрузке картинок на бекенде, из 1 картинки делаются все эти варианты
но можно и в верстке
gulp resize image гуглите

Answer 1

[Дмитрий Борцов]

Если ты используешь сборщик - посмотри для него плагин для ресайза. Для оптимизации огромное количество плагинов. А преобразование кода - напиши свой маленький миксин.

Upd:
Для ресайза - gulp-image-resize
Для оптимизации - gulp-imagemin