Как ускорить сайт: оптимизация изображений в ImageMagick

Содержание

Если картинки тормозят ваш сайт, ImageMagick поможет! Рассказали, как уменьшить вес изображений без потери качества и ускорить загрузку страниц.

Каждый лишний килобайт на веб-странице замедляет её загрузку, особенно это касается изображений. Оптимизация графики позволяет существенно снизить вес страниц и ускорить их загрузку, что важно и для пользователей, и для поисковых систем. В статье объяснили, как сжимать и обрабатывать изображения с помощью утилит ImageMagick, чтобы сайт работал быстро. Разобрали установку ImageMagick на Linux, Windows и VPS, поддержку современных форматов и привели реальные примеры команд.

Что такое ImageMagick и зачем он нужен

ImageMagick — это свободный кроссплатформенный набор консольных утилит для работы с изображениями. Проще говоря, это как графический редактор для командной строки, который позволяет конвертировать изображения в различные форматы, менять размеры, обрезать, сжимать и многое другое. Большинство таких операций можно выполнить в графических редакторах (GIMP, Photoshop и т.д.), но если нужно обрабатывать десятки или сотни файлов, да ещё повторять одно и то же действие, консольный инструмент будет куда удобнее и быстрее.

В состав ImageMagick входит несколько утилит. Чаще всего используются две из них:

convert — создаёт новое изображение на основе исходного, применяя все указанные преобразования.
**mogrify — вносит изменения прямо в существующий файл изображения.

Обе утилиты поддерживают одинаковый набор опций. Будьте осторожны с mogrify: он заменяет оригиналы, поэтому сначала сделайте резервную копию изображений или укажите вывод в другую папку. А convert всегда требует задать имя нового выходного файла и оставляет источник нетронутым.

ImageMagick работает практически везде: на локальном компьютере (Windows, macOS, Linux) и на сервере. Многие серверы и хостинги уже имеют его в составе, например, на VPS-хостинге ImageMagick можно установить и использовать через SSH. Его также используют различные CMS и скрипты. Например, в PHP есть расширение Imagick, которое предоставляет доступ к возможностям ImageMagick из кода.

Установка ImageMagick на Linux, Windows, macOS и VPS

Начнём с подготовки инструмента. Хорошая новость: ImageMagick бесплатен и ставится очень просто.

Linux (Ubuntu/Debian)

Достаточно выполнить установку из менеджера пакетов. Подключитесь к серверу или откройте терминал и обновите пакеты командой:

sudo apt update

Затем установите пакет:

sudo apt install imagemagick

Для CentOS/AlmaLinux аналогично:

yum install ImageMagick

Пакет весит немного, установка пройдёт быстро. После завершения можно проверить версию:

convert -version

Должна отобразиться информация о версии и поддерживаемых форматах. Обратите внимание на список Delegates в выводе: там должны фигурировать jpeg, png, webp, heic и т.д.

Это библиотеки, отвечающие за поддержку разных форматов. Если какой-либо современный формат отсутствует, например AVIF, возможно, у вас установлена устаревшая версия ImageMagick. В таком случае стоит обновиться до свежей или собрать ImageMagick из исходников с нужными библиотеками.

Windows

Скачайте установщик с официального сайта ImageMagick. Рекомендуем выбирать самую свежую версию, подходящую для вашей системы (x64 или x86).

В процессе установки обратите внимание на следующие моменты:

Убедитесь, что установщик добавит утилиты ImageMagick в системную переменную PATH. Это позволит запускать команды ImageMagick из командной строки без указания полного пути.
Если вы планируете использовать команды, такие как convert, отметьте опцию установки устаревших утилит. Это важно, так как в Windows уже существует команда convert, предназначенная для преобразования файловых систем, и без этой опции может возникнуть конфликт.

После завершения установки откройте командную строку (CMD или PowerShell) и введите:

magick -version

Или:

convert -version

Если всё установлено корректно, вы увидите информацию о версии ImageMagick. Обратите внимание, что, начиная с версии 7, рекомендуется использовать команду magick вместо convert, чтобы избежать конфликтов с системной утилитой Windows.

Важно
Для старых машин с ограниченным объёмом оперативной памяти рекомендуется использовать сборку Q8. Она обеспечивает меньшую точность, но потребляет меньше ресурсов. В большинстве случаев достаточно стандартной версии Q16.

VPS

На виртуальном сервере под управлением Linux установка ничем не отличается от обычной Linux-системы. Подключитесь по SSH и установите пакет через менеджер пакетов, как описано выше. Виртуальный сервер даёт возможность установить ImageMagick и использовать его для автоматической оптимизации изображений прямо на сервере, что помогает разгрузить локальные устройства и ускорить работу сайта. На некоторых хостингах ImageMagick уже может быть предустановлен. В этом случае достаточно сразу набрать команду magick -version и проверить доступность утилиты.

macOS

На macOS ImageMagick устанавливается через менеджер пакетов Homebrew. Если Homebrew у вас ещё не установлен, его можно добавить с помощью команды из официального сайта Homebrew. После этого в терминале выполните:

brew install imagemagick

Через несколько секунд ImageMagick будет установлен. Проверить установку можно командой:

magick -version

Если команда выдаёт информацию о версии, установка прошла успешно.

Использование ImageMagick на сервере даёт возможность запускать оптимизацию прямо в среде VPS, автоматически обрабатывать загруженные на сайт изображения и тем самым экономить ресурсы локального компьютера. Можно настроить cron-задачу для автосжатия новых файлов по расписанию, чтобы все ресурсоёмкие процессы выполнялись на сервере. Если у вас shared-хостинг без SSH, изображения можно подготовить заранее — сжать их локально и только потом загрузить на сайт. При этом синтаксис ImageMagick остаётся одинаковым на любой платформе.

Аренда VPS/VDS от 219 руб/месяц

Преимущества VPS в AdminVPS:

✓ Бесплатное администрирование

✓ Только быстрые NVMe-диски

✓ Защита от DDoS-атак

✓ Быстрая техподдержка

Аренда VPS/VDS виртуального сервера от AdminVPS — это прозрачная и честная услуга с доступной ценой

Сжатие JPEG и PNG

Начнём с самых распространённых форматов — JPEG и PNG. Базовая оптимизация этих изображений включает три основных шага.

Изменение размеров

Часто изображения загружаются в слишком большом размере. Например, фото 4000×3000 отображается на сайте в блоке 800×600, из-за чего страница грузится медленнее. Чтобы задать нужные размеры заранее, введите команду в ImageMagick:

convert input.jpg -resize 800x output.jpg

Изображение уменьшится до 800 пикселей по ширине с сохранением пропорций. Если исходное изображение меньше, оно не изменится. Чтобы не увеличивать мелкие изображения, добавьте символ >:

-resize 800x800>

Удаление метаданных

Фотографии с камер и смартфонов содержат скрытые данные: модель устройства, геолокацию, дату съёмки и прочее. Эти данные не нужны сайту, но увеличивают размер файла. Чтобы удалить их, в ImageMagick используют опцию -strip.

Например, чтобы уменьшить картинку до 100×100 пикселей и убрать метаинформацию:

convert in.jpg -resize 100x100 -strip out.jpg

Это значительно снижает вес файла, особенно для превью, и экономит место на сервере.

Сжатие с потерей качества (для JPEG)

JPEG поддерживает регулируемое сжатие. В ImageMagick степень сжатия задаётся опцией -quality от 1 до 100. Значения 75–85 процентов обычно почти не влияют на качество, но заметно уменьшают размер файла. Например:

convert in.jpg -quality 80 out.jpg

Это уменьшает вес изображения с минимальной потерей детализации. Слишком низкие значения, например, 10 процентов, дают экстремальное сжатие с заметным ухудшением качества.

PNG — формат сжатия без потерь, поэтому параметр -quality в его случае указывает не на степень качества, а на глубину цветового квантования. Для PNG обычно достаточно команд -strip и -resize.

Если нужно дополнительно снизить вес сложного PNG, можно уменьшить число цветов:

-colors 256 -depth 8

Но учтите, что палитровые PNG подходят не для всех изображений. PNG лучше использовать для графики и логотипов, а для фотографий — JPEG или современные форматы.

Современные форматы WebP и AVIF

Помимо JPEG и PNG для сайтов всё чаще применяют новые форматы изображений — WebP и AVIF. Эти форматы позволяют сжимать графику гораздо сильнее без видимой потери качества. WebP позволяет уменьшить размер изображений по сравнению с JPEG, сохраняя при этом сопоставимое качество. В реальных проектах это помогает ускорить загрузку страниц за счёт меньшего объёма передаваемых данных. А новый формат AVIF ещё лучше: в реальных тестах файлы AVIF выходят в 5–6 раз меньше JPEG и примерно в 2–3 раза меньше WebP. Изображение весом 100 KB в JPEG может превратиться в 40 KB в WebP или 15–20 KB в AVIF, и страница будет загружаться ощутимо быстрее.

ImageMagick поддерживает WebP и AVIF, так что вы легко можете конвертировать изображения в эти современные форматы. Синтаксис элементарный:

convert input.jpg output.webp

Или:

convert input.jpg output.avif

В примере выше мы взяли JPEG и сохранили его копию в WebP и AVIF. По умолчанию ImageMagick применит сжатие с разумным качеством: для WebP примерно 75, для AVIF аналогично. Вы можете настроить качество опцией -quality так же, как для JPEG.

Например:

convert input.png -quality 80 output.webp

Это установит качество ~80 % для WebP. У WebP также есть режим без потерь (-define webp:lossless=true), но он нужен редко, так как обычно мы хотим минимальный размер и готовы чуть пожертвовать качеством.

Поддержка браузерами

WebP уже поддерживается большинством браузеров давно, а AVIF стремительно догоняет. Начиная с 2023 года, AVIF есть в Chrome, Firefox, Opera, и даже Safari добавила поддержку (в macOS 13+). Однако у небольшого процента аудитории могут быть старые браузеры без этих форматов. Поэтому на продакшн-сайте правильнее делать fallback — хранить версии изображений в JPEG/PNG на крайний случай. Для этого можно использовать тег <picture> с несколькими источниками. Пример кода:

<picture>
    <source srcset="image.avif" type="image/avif">
    <source srcset="image.webp" type="image/webp">
    <img src="image.jpg" alt="Описание изображения">
</picture>

Браузер загрузит AVIF, если формат поддерживается. Если нет, то переключится на WebP, а при его отсутствии откроет обычный JPEG.

Выигрыш в размере и качестве

WebP и AVIF используют более продвинутые алгоритмы сжатия, основанные на видео-кодеках VP8/AV1. WebP подходит для большинства ситуаций: он заметно уменьшает вес как фотографий, так и иллюстраций, поддерживает и прозрачность, и анимацию (аналог GIF).

AVIF сжимает изображения сильнее, чем другие форматы, но требует больше времени на обработку и иногда даёт ограничения по цветопередаче. Практика показывает, что кодирование AVIF медленнее WebP в несколько раз. Поэтому в рабочих сценариях можно комбинировать: например, генерировать WebP для оперативности, а дополнительные AVIF версии готовить в фоновом режиме или по необходимости.

Поддержка CMS и серверная интеграция

Если вы используете популярные CMS (WordPress, Joomla и др.), проверьте, умеет ли ваш движок работать с WebP/AVIF. WordPress, к примеру, из коробки поддерживает WebP с версии 5.8, а поддержка AVIF планируется в версии 6.5. Многие плагины умеют автоматически конвертировать изображения в WebP при загрузке. Но даже если CMS не знает про новый формат, вы можете загружать пары файлов, например, image.jpg и рядом image.webp, и прописывать теги <picture> вручную в шаблоне.

Пакетная обработка изображений и автоматизация

Никто не хочет вручную оптимизировать сотни файлов по одному. К счастью, ImageMagick отлично справляется с пакетной обработкой. Расскажем, как оптимизировать целую папку изображений одной командой или скриптом.

Mogrify для группы файлов

Утилита mogrify применяет операции сразу ко всем указанным файлам. Простейший пример: вы хотите сжать все JPEG в текущей директории до качества 85 %. Достаточно перейти в эту папку в терминале и выполнить:

mogrify -quality 85 *.jpg

Эта команда пройдётся по каждому файлу *.jpg и перезапишет его с указанным качеством. Если нужно, можно добавить и другие опции, например:

mogrify -resize 1200x -strip -quality 85 *.jpg

Данная команда сразу и масштабирует изображения до 1200 px по ширине, и очистит метаданные, и сожмёт.

Команда mogrify перезаписывает файлы, поэтому убедитесь, что у вас есть бекап оригиналов или протестируйте на копиях. Также можно воспользоваться параметром -path, который указывает директорию для сохранения результата. Например:

mogrify -path ./compressed/ -resize 1200x -quality 85 *.jpg

Так изображения сожмутся и запишутся в подпапку compressed. Команда создаст папку, если её нет. Аналогично можно конвертировать форматы:

mogrify -path ./webp/ -format webp *.jpg

Эта команда сделает копии всех JPEG в формате WebP в папке webp.

Циклы и скрипты

Вместо mogrify можно использовать обычную команду convert в цикле Bash (Linux/macOS) или PowerShell/Batch (Windows). Например, в Linux скрипт:

for file in *.png; do
    convert "$file" -strip -quality 90 "compressed/${file%.png}.png";
done

Команда пройдётся по всем PNG-файлам в каталоге и сохранит оптимизированные копии в подкаталог compressed. Это эквивалентно работе mogrify, просто другой синтаксис. На Windows можно написать пакетный .bat файл или использовать PowerShell. В PowerShell команды ImageMagick также работают, если они добавлены в PATH. Например, можно быстро уменьшить размер всех JPEG в папке наполовину и сохранить их с новым именем. Для этого используется код:

Get-ChildItem -Filter *.jpg | ForEach-Object {
    $input = $_.FullName
    $output = Join-Path $_.DirectoryName ($_.BaseName + "_half.jpg")
    magick $input -resize 50% -quality 80 $output
}

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

Интеграция в рабочий процесс

После освоения базовых команд можно внедрить оптимизацию изображений в процесс деплоя или в работу CMS. Например, при загрузке новых картинок на сайт, сразу вызывать скрипт с ImageMagick, чтобы создавались сжатые изображения. Многие фреймворки позволяют прописать такие хуки. В статических сайтах можно оптимизировать медиа на этапе сборки. Если ваш сайт хостится на VPS, то у вас полная свобода: установили ImageMagick и используете по своему сценарию, хоть вручную, хоть автоматически.

Читайте в блоге: