Мои любимые команды Linux для оптимизации веб-изображений

Создавайте оптимизированные изображения с измененным размером для миниатюр и изображений баннеров для Интернета.

Раньше я избегал изображений при работе в Интернете. Обработка и оптимизация изображений может быть неточной и отнимать много времени.

Затем я нашел несколько команд, которые изменили мое мнение. Для создания веб-страниц я использую Jekyll, поэтому включил его в инструкции. Однако эти команды также будут работать с другими генераторами статических сайтов.

Команды изображения в Linux

Для меня решающую роль сыграли команды optipng, jpegoptim и, конечно же, почтенный imagemagick. Вместе они упрощают управление изображениями или даже автоматизируют их.

Вот обзор того, как я реализовал свое решение с помощью этих команд. Я поместил изображения статей в свою папку static/images. Оттуда я создал две копии всех изображений PNG и JPG:

Обрезанная версия миниатюр размером 422 на 316 пикселей.
Увеличенная версия баннера размером 1024 на 768.

Затем я поместил каждую копию (миниатюру и баннер) в отдельную папку и использовал пользовательские переменные Jekyll для путей к папкам. Ниже я опишу каждый из этих шагов более подробно.

Монтаж

Чтобы следовать моему решению, убедитесь, что у вас установлены все команды. В Linux вы можете установить optipng, jpegoptim и imagemagick с помощью менеджера пакетов.

В Fedora, CentOS, Mageia и подобных:

$ sudo dnf install optipng jpegoptim imagemagick

В Debian, Elementary, Mint и подобных:

$ sudo apt install optipng jpegoptim imagemagick

В macOS используйте MacPorts или Homebrew.

brew install optipng jpegoptim imagemagick

В Windows используйте Chocolatey.

Создание папок для миниатюр и баннеров

После установки команд я создал новые папки в static/images. Сгенерированные миниатюры помещаются в img-thumbs, а баннеры — в img-normal.

$ cd static/images
$ mkdir -p img-thumbs img-normal

Создав папки, я скопировал все файлы GIF, SVG, JPG и PNG в обе папки. Я использую GIF- и SVG-изображения «как есть» для миниатюр и изображений баннеров.

$ 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/

Обработка миниатюр

Чтобы изменить размер и оптимизировать миниатюры, я использую три команды.

Я использую команду mogrify из ImageMagick для изменения размера файлов JPG и PNG. Поскольку я хочу, чтобы миниатюры были размером 422 на 316, команда выглядит так:

$ cd img-thumbs
$ mogrify -resize 422x316 *.png
$ mogrify -format jpg -resize 422x316 *.jpg

Теперь я оптимизирую PNG с помощью optipng, а JPG — с помощью jpegoptim:

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

В приведенной выше команде:

Для optipng переключатель -o5 устанавливает уровень оптимизации, причем 0 — самый низкий.
Для jpegoptim -s удаляет все метаданные изображения, а -q устанавливает тихий режим.

Обработка баннеров

Я обрабатываю изображения баннеров практически так же, как и миниатюры, за исключением размеров, которые для баннеров составляют 1024 на 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

Настройка путей в Jekyll

Каталог img-thumbs теперь содержит мои миниатюры. и img-normal содержит баннеры. Чтобы облегчить себе жизнь, я установил для них обоих пользовательские переменные в моем Jekyll _config.yml.

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

Использовать переменные просто. Когда я хочу отобразить миниатюру, я добавляю к изображению content-thumbs-images-path. Когда я хочу отобразить полный баннер, я добавляю 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 %}

Заключение

Я мог бы внести несколько улучшений в свои команды оптимизации.

Использование rsync для копирования только измененных файлов в img-thumbs и img-normal является одним из очевидных улучшений. Таким образом, я не буду повторно обрабатывать файлы снова и снова. Добавление этих команд в перехватчики предварительной фиксации Git или в конвейер CI — еще один полезный шаг.

Изменение размера и оптимизация изображений для уменьшения их размера — это победа для пользователя и Интернета в целом. Возможно, моим следующим шагом по уменьшению размеров изображений станет webp.

Меньшее количество байтов, передаваемых по проводу, означает меньший углеродный след, но это уже другая статья. Победа UX на данный момент достаточно хороша.

Эта статья изначально была опубликована в блоге автора и переиздана с разрешения.