10 Sie 2018

Gulp workflow: minimalizacja zdjęć i konwersja na webp

Kiedyś w zamierzchłych czasach używałem perla + lib ImageMagick do konwersji zdjęć, ale mamy XXI wiek i Node 😉
Od jakiegoś czasu zmienił się mój workflow dotyczący obróbki zdjęć na potrzeby stron internetowych.
Do tej pory używałem gulp-image, gulp-imagemin i wiele innych, ale zawsze coś było nie tak, zawsze czegoś brakowało.
Ostatnio używam takiego zapisu jak poniżej

<picture>
    <source class="img-responsive" srcset="./images/thumbnail/IMG_5600.webp" type="image/webp"/>
    <source class="img-responsive" srcset="./images/thumbnail/IMG_5600.jpg" type="image/jpeg"/>
    <img class="img-responsive" src="./images/thumbnail/IMG_5600.jpg" alt=""/>
</picture>

i potrzebowałem również webp, no i co następna biblioteka gulp-webp jest potrzebna 🙁
Mały research i okazało się że jest biblioteka sharp, która bardzo dobrze zastępuje ImageMagick więcej na tej stronie. Biblioteka ta jest w stanie zastąpić wszystko co do tej poru używałem.

Obecnie korzystam z pluginu gulp-responsive który pod spodem używa tejże biblioteki sharp.
Zmiana rozmiaru obrazu za pomocą tej biblioteki jest zazwyczaj 4x-5x szybsza niż w przypadku najszybszych ustawień ImageMagick i GraphicsMagick, a więc czemu jej nie używać. Oczywiście ta bibliotek nie tylko do zmniejsza grafiki ale również przycina, zmieniania formatu, zapisu do grayscale czyli szarości i wiele innych użytecznych rzeczy potrafi 🙂

Dobra zaczynamy cały proces.
Oczywiście musimy mieć zainstalowane node w naszym środowisku ale to nie temat na ten artykuł.

Na początek tworzymy package.json

npm init -y

Instalujemy wszystkie potrzebne biblioteki

npm i -D gulp gulp-responsive gulp-load-plugins