Komprese obrázků pomocí imagemin

V tomto článku vám povím, jak zmenšit velikost obrázků. K tomu použiji npm balíček s názvem imagemin.

Například mám pět obrázků o celkové velikosti 1,6 MB, které je třeba umístit na web:

Můžete je tedy jednoduše nahrát na web. Nebo zmenšit jejich velikost a stránka se pak načte mnohem rychleji. Pro pokračování budete potřebovat nodejs. Jak ho nainstalovat, jsem vám řekl v dalším článku.

Zda je nodejs nainstalován, můžete zkontrolovat pomocí následujícího příkazu:

node -v

Pokud je nainstalován nodejs, příkaz by měl vypsat verzi nodejs.

Budete také potřebovat npm:

npm -v

Samotný balíček se nazývá imagemin-cli. Cli znamená, že jej lze použít z příkazového řádku.

Tento balíček nainstaluji globálně pomocí následujícího příkazu:

npm install --global imagemin-cli

Přejdu do složky s obrázky:

cd Изображения/test

Nekomprimovaný první obrázek váží 60 KB:

Zkomprimuji to pomocí imagemin:

imagemin 1.png > 1-min.png

Po kompresi váží 44 KB:

Pokud porovnáte komprimovaný a nekomprimovaný obrázek v prohlížeči obrázků, jejich kvalita se prakticky neliší:

Všechny mé obrázky jsou ve formátu png. Proto je převedu do formátu jpg pomocí následujícího příkazu:

mogrify -format jpg *.png

K tomu budete potřebovat nainstalovaný konzolový nástroj imagemagick. Nainstaluji ho pomocí následujícího příkazu:

sudo apt install imagemagick

No, smažu obrázky ve formátu png:

rm -r *.png

Při spuštění tohoto příkazu se ujistěte, že se nacházíte ve správné složce s obrázky, jinak můžete smazat potřebné soubory:

Teď zkomprimuji obrázek jpg:

imagemin 1.jpg > 1-min.jpg

A porovnám jejich velikosti před a po kompresi:

Jak vidíte, velikost se nezměnila. Stalo se to proto, že je nutné explicitně specifikovat plugin, který obrázek komprimuje.

Všechny existující pluginy jsou uvedeny v této tabulce:

Pro kompresi budu potřebovat plugin mozjpeg. Nainstaluji ho globálně:

npm install -g imagemin-mozjpeg

A znovu se pokusím komprimovat obrázek explicitním zadáním pluginu:

imagemin 1.jpg --plugin=mozjpeg > 1-min.jpg

Znovu uvedu velikost tohoto souboru. A jak vidíte, váží 24 KB:

A rozdíl mezi obrázky je minimální.

Pro kompresi všech obrázků použiji následující příkaz:

imagemin *.jpg --plugin=mozjpeg --out-dir=build

Kde na konci uvedu složku, ve které budou komprimované obrázky vytvořeny, v mém případě je to složka Build. Před kompresí tedy soubory váží 269 KB a po kompresi 89:

A co se týče kvality, jsou prakticky identické.

Můžete také zadat parametr kvality obrázku, tj. míru komprese obrázku. Pro formát jpg můžete zadat kvalitu od nuly do 100, kde 100 je ideální kvalita, tj. komprese se nepoužívá.

Třetí obrázek komprimuji se 100% kvalitou:

imagemin 3.jpg --plugin=mozjpeg.quality=100 > 3-min.jpg

A jak vidíte, obrázek se dokonce zvětšil:

Teď zkusím snížit kvalitu na 80:

imagemin 3.jpg --plugin=mozjpeg.quality=80 > 3-min2.jpg

A obrázek byl komprimován na 40 KB:

Tímto způsobem můžete upravit rovnováhu mezi kvalitou a velikostí obrazu.

Pokud se vám článek líbil, sdílejte ho prosím na sociálních sítích: