Оптимизация изображений для Веба при помощи ImageMagick

Часто при работе с изображениями встаёт задача оптимизировать изображения для показа в Веб. Инструментов достаточно много, в том числе и онлайн, однако больше контроля над процессом и более эффективный результат можно получить используя утилиту convert из библиотеки ImageMagick.

Часто нужно сделать так, чтобы изображения подгружались в полном размере, чтобы не плыла вёрстка или не было пустого пространства до полной загрузки изображения. Да и к тому же будет достигнут эффект размытия при загрузке изображения.

Реализовать это очень просто:

convert -strip -interlace Plane -quality 85 input-file.jpg output-file.jpg 

Подробнее про опции:

-strip убирает лишнюю метаинформацию
-quality устанаввливает качество результата в процентах; рекомендуется в диапазоне 75..90
-interlace Plane определяет режим подгрузки изображения, в данном случае всё изображение при загрузке в браузере будет отображаться постепенно из размытого состояния к более чёткому.

При работе с PNG изображениями можно достичь меньшего размера, если урезать палитру до минимально необходимого набора цветов:

convert -colors 8 input-file.jpg output-file.jpg 

Где:

-colors 8 указывает на количество цветов в выходном файле.

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

#!/usr/bin/env bash

find . -name '*.jpg' -exec mogrify \
    -filter Triangle \
    -define filter:support=2 \
    -unsharp 0.25x0.25+8+0.065 \
    -dither None \
    -posterize 136 \
    -quality 82 \
    -define jpeg:fancy-upsampling=off \
    -define png:compression-filter=5 \
    -define png:compression-level=9 \
    -define png:compression-strategy=1 \
    -define png:exclude-chunk=all \
    -interlace Plane -colorspace sRGB \
    -strip $1 {} + 

Для быстрого создания изображений в формате WebP из JPEG можно воспользоваться этим:

for i in *.jpg; do cwebp -q 80 $i -o $i.webp;done

На выходе получим файлы с расширением .jpg.webp.

Способ с обработкой поддиректорий с изображениями и параллельным выполнением:

find . -name "*.jpg" | parallel -eta cwebp {} -o {.}.webp

На выходе получим рядом лежащие файлы с расширением .webp.

Бонус для пишущих на PHP — определение поддержки WebP на стороне сервера:

$has_webp = strpos($_SERVER['HTTP_ACCEPT'], 'image/webp') !== false || strpos($_SERVER['HTTP_USER_AGENT'], ' Chrome/') !== false;