Moje oblíbené linuxové příkazy pro optimalizaci webových obrázků

Při práci online jsem se vyhýbal obrázkům. Manipulace s obrázky a jejich optimalizace může být nepřesná a časově náročná.

Pak jsem našel nějaké příkazy, které změnily můj názor. K vytváření webových stránek používám Jekyll, takže jsem to zahrnul do pokynů. Tyto příkazy však budou fungovat i s jinými generátory statických stránek.

Příkazy pro obrázky v systému Linux

Další zdroje pro Linux

• Cheat pro příkazy Linuxu
• Cheat sheet pro pokročilé příkazy systému Linux
• Bezplatný online kurz:Technický přehled RHEL
• Síťový cheat pro Linux
• Cheat sheet SELinux
• Cheat pro běžné příkazy pro Linux
• Co jsou kontejnery systému Linux?
• Naše nejnovější články o Linuxu

Příkazy, které pro mě udělaly zásadní rozdíl, jsou optipng , jpegoptim , a samozřejmě úctyhodný imagemagick . Společně umožňují snadnou správu nebo dokonce automatizaci manipulace s obrázky.

Zde je přehled toho, jak jsem implementoval své řešení pomocí těchto příkazů. Obrázky článků jsem umístil do static/images složka. Odtud jsem vygeneroval dvě kopie všech obrázků PNG a JPG:

1. Oříznutá verze miniatury o rozměrech 422 x 316
2. Větší verze banneru o rozměrech 1024 x 768

Potom jsem umístil každou kopii (miniaturu a banner) do vlastní složky a pro cesty ke složce jsem využil Jekyllovy vlastní proměnné. Níže popisuji každý z těchto kroků podrobněji.

Instalace

Chcete-li pokračovat v mém řešení, ujistěte se, že máte nainstalované všechny příkazy. V systému Linux si můžete nainstalovat optipng , jpegoptim a imagemagick pomocí správce balíčků.

Na Fedoře, CentOS, Mageia a podobných:

$ sudo dnf install optipng jpegoptim imagemagick

V systémech Debian, Elementary, Mint a podobných:

$ sudo apt install optipng jpegoptim imagemagick

V systému macOS použijte MacPorts nebo Homebrew.

brew install optipng jpegoptim imagemagick

V systému Windows použijte Chocolatey.

Vytváření složek pro miniatury a bannery

Po instalaci příkazů jsem vytvořil nové složky pod static/images . Vygenerované náhledy se umístí do img-thumbs a bannery jsou v img-normal .

$ cd static/images

$ mkdir -p img-thumbs img-normal

S vytvořenými složkami jsem zkopíroval všechny soubory GIF, SVG, JPG a PNG do obou složek. Pro miniatury a obrázky bannerů používám GIFy a SVG tak, jak jsou.

$ cp content/*.gif img-thumbs/; cp content/*.gif img-normal/

$ cp content/*.svg img-thumbs/; cp content/*.svg img-normal/

$ cp content/*.jpg img-thumbs/; cp content/*.jpg img-normal/

$ cp content/*.png img-thumbs/; cp content/*.png img-normal/

Zpracování miniatur

Ke změně velikosti a optimalizaci miniatur používám své tři příkazy.

Používám mogrify příkaz z ImageMagick pro změnu velikosti JPG a PNG. Protože chci, aby miniatury byly 422 x 316, příkaz vypadá takto:

$ cd img-thumbs

$ mogrify -resize 422x316 *.png

$ mogrify -format jpg -resize 422x316 *.jpg

Nyní optimalizuji PNG pomocí optipng a JPG pomocí jpegoptim :

$ for i in *.png; do optipng -o5 -quiet "$i"; done

$ jpegoptim -sq *.jpg

Ve výše uvedeném příkazu:

• Pro optipng , -o5 přepínač nastavuje úroveň optimalizace, přičemž 0 je nejnižší.
• Pro jpegoptim , -s odstraní všechna metadata obrázku a -q nastaví tichý režim.

Zpracování bannerů

Obrázky bannerů zpracovávám v podstatě stejným způsobem jako miniatury, kromě rozměrů, které jsou u bannerů 1024 x 768.

$ cd ..

$ cd img-normal

$ mogrify -resize 1024x768 *.png

$ mogrify -format jpg -resize 1024x768 *.jpg

$ for i in *.png; do optipng -o5 -quiet "$i"; done

$ jpegoptim -sq *.jpg

Konfigurace cest v Jekyll

img-thumbs adresář nyní obsahuje mé miniatury. a img-normal obsahuje bannery. Abych si usnadnil život, nastavil jsem obě na vlastní proměnné v mém Jekyll _config.yml .

content-images-path: /static/images/img-normal/

content-thumbs-images-path: /static/images/img-thumbs/

Použití proměnných je jednoduché. Když chci zobrazit miniaturu, přidám před text content-thumbs-images-path k obrazu. Když chci zobrazit celý banner, přidám content-images-path .

{% if page.banner_img %}

 <img src="{{ page.banner_img | prepend: site.content-images-path | \

prepend: site.baseurl | prepend: site.url }}" alt="Banner image for \

{{ page.title }}" />

{% endif %}

Závěr

Existuje několik vylepšení, která bych mohl provést ve svých optimalizačních příkazech.

Pomocí rsync pro kopírování pouze změněných souborů do img-thumbs a img-normal je jedno zřejmé zlepšení. Tímto způsobem nezpracovávám soubory znovu a znovu. Přidání těchto příkazů do Git pre-commit hook nebo kanálu CI je dalším užitečným krokem.

Změna velikosti a optimalizace obrázků za účelem zmenšení jejich velikosti je výhrou pro uživatele i web jako celek. Možná, že mým dalším krokem ke zmenšení velikosti obrázků bude webp.

Méně bajtů přenášených po drátě znamená nižší uhlíkovou stopu, ale to je na jiný článek. Vítězství v UX je prozatím dost dobré.

Tento článek byl původně zveřejněn na blogu autora a byl znovu publikován se svolením.