Сайтами, так или иначе, я занимаюсь давно. И любой SEO-специалист, с кем мне приходилось общаться, говорил о необходимости оптимизации всего, что касается продвижения сайта. То причеши текст, чтобы он был и читабельным, и в то же время содержал 100500 ключей. То выровняй блок, то убери его. То снова верни его обратно. Но более всего доставляет их - "Надо уменьшить время загрузки страницы, не то все посетители разбегутся".

"Жирные" картинки

И вот тут начинается реальная суета. С одной стороны, есть немало сайтов, которые медленно грузятся, но посетителей это не отталкивает, а даже наоборот - их количество со временем только растёт. А с другой стороны, сидишь и думаешь, ведь дыма без огня не бывает. И что же может замедлять сайт? Если отбросить узкий канала хостера (такое тоже может быть), то в голом остатке остаются скрипты, стили и медиа файлы. Конечно же всё настраивается, сжимается и оптимизируется на уровне сервера и всех современных CMS/CMF. Всё, кроме изображений.

Большинство сайтов используют изображения, как тизеры к основному материалу. Бывает, что статьи дополняют иллюстрациями, как то фотографии с какой-либо встречи или скриншоты с объяснениями. В любом случае, исходное изображение может быть большого разрешения, и соответственно размер такого изображения может достигать нескольких мегабайт. А это, в свою очередь, занимает дополнительное время при загрузке страницы. По данным исследования Google, 53% пользователей покидают сайт, если он грузится дольше 3 секунд.

ImageMagick спешит на помощь

Как я решал эту проблему? До последнего времени я использовал онлайн сервис от Google - Squoosh.app, который даже с настройками по умолчанию хорошо справляется с поставленной задачей. Но, как пользователь Linux я подумал, что мог бы справиться с этим и без "костылей".

Итак, передо мной была следующая цель, чтобы в один-два клика иметь картинку с заданным разрешением и малым размером, желательно до 200 Кб. Забегая вперёд скажу, что для себя выявил оптимальным ширину картинки в 1600 пикселей. При таком разрешении и вес рисунка вполне удовлетворял моим требованиям.

Приступим к основной части. Не буду голословно утверждать, что пакет ImageMagick по умолчанию включён в состав всех дистрибутивов, но точно знаю, что он присутствует во всех репозиториях Linux. Его установка сводится к вводу единственной команды в консоли.

• Для Ubuntu:
  sudo apt install imagemagick
• Для Fedora:
  sudo dnf install imagemagick
• Для Manjaro:
  sudo pacman -S imagemagick

ImageMagick — набор консольных утилит для редактирования графических файлов. Своего рода "швейцарский нож" для обработки изображений в командной строке. Обо всех возможностях программы можно ознакомиться на их официальном сайте. Нам, из всего многообразия команд, понадобится только одна:

convert original.png -resize 1600x -quality 50 newimage.jpg

С 7 версии ImageMagick выдаёт предупреждение о том, что вместо команды convert необходимо использовать magick или magick convert.

WARNING: The convert command is deprecated in IMv7, use "magick" instead of "convert" or "magick convert"

Здесь первая опция -resize меняет ширину картины до нужных нам 1600 пикселей (высота выставляется автоматически), а вторая опция - степень сжатия файла с некоторой потерей качества. В большинстве случаев потеря качества не является критичной, но зато размер конечного файла может вас удивить.

Как видите исходный файл был весом более 3 Мб, а после обработки "похудел" до 29 Кб, и это хорошо для быстрой загрузки страницы.

Оптимизация процесса

С инструментом разобрались, перейдём к оптимизации выполнения работы. Запускать каждый раз терминал и набирать вручную команду - долго. Поэтому удобнее всего будет добавить команду в контекстное меню. Благо Linux может предоставить нам такую возможность. Для этого нам надо будет создать два файла:

• Файл скрипта, в котором будет прописана наша команда;
• Файл с расширением .desktop, благодаря которому в контекстное меню добавится нужная строка.

Скрипт

Все свои скрипты я храню в домашней директории в папке "Scripts". Не вижу причин не делать этого и далее, и поэтому создадим в ней файл "resize.sh" со следующим содержанием:

#!/bin/bash

file="$1"
magick "${file}" -resize 1600x -quality 50 "${file%.*}.jpg"

Сохраним и дадим файлу разрешение на выполнение. Можно в свойствах файла выставить галочку на разрешение файла как программы на вкладке "Права" или в командной строке:

chmod +x ~/Scripts/resize.sh

Этот скрипт, как я уже указывал выше сожмёт рисунок до приемлемых размеров и сохранит его в той же папке с тем же названием, что и исходный файл, но с расширением ".jpg". Исходные файлы с таким расширением перезаписываются без уведомлений.

Контекстное меню

Со скриптом закончили, приступим ко второму файлу. Для начала надо создать папку "kio" в директории ".local", и в ней вложенную папку "servicemenus". Должно получиться: "~/.local/kio/servicemenus". В последней папке создаём файл "resize.desktop" и добавляем в него следующее:

[Desktop Entry]
Type=Service
ServiceTypes=KonqPopupMenu/Plugin,image/*
MimeType=image/*
Actions=ResizeImage;
# X-KDE-Submenu=Edit Image
X-KDE-ServiceTypes=KonqPopupMenu/Plugin, inode/directory

[Desktop Action ResizeImage]
Name=Resize Image
Exec=bash /home/rustam/Scripts/resize.sh
Icon=edit-image

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

kbuildsycoca6 --noincremental

Кстати, для KDE Plasma 5 вместо папки "kio" надо создавать папку "kservices5", а перезапуск оболочки:

kbuildsycoca5 --noincremental

В остальном всё точно также.

Заключение

В контекстное меню таким образом можно добавить всё что угодно. Можно отдельно написать скрипт пакетной обработки файлов изображений, а также отдельный файл "batch.desktop" и добавить его. А для того, чтобы контекстное меню не превратилось в портянку в файле .desktop надо раскомментировать строку "X-KDE-Submenu=Edit Image". Тогда все добавленные команды будут отображаться в подменю основного списка контекстного меню.

Оптимизация изображений — важный шаг для ускорения веб-сайтов, и Linux предоставляет для этого мощные инструменты. С помощью ImageMagick и нескольких строк кода мы создали удобное решение, которое экономит время и ресурсы. Этот метод не только решает проблему медленной загрузки страниц, но и подчеркивает философию Linux: делай сам, делай лучше.