Михаил Юдин

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

Оптимизация изображений для Веба при помощи 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;

Поддержать




Выключите пожалуйста блокировку рекламы для этого сайта чтобы поддержать проект

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


Остались вопросы или есть пожелания, замечания — пишите в комментарии:

Ещё почитать

Чеклист оптимизации скорости загрузки веб-приложения ✓

Чеклист оптимизации скорости загрузки веб-приложения ✓

Переход с PHPStorm или Intellij IDEA на VIM

Переход с PHPStorm или Intellij IDEA на VIM

Подсветка активных ссылок на чистом JavaScript

Подсветка активных ссылок на чистом JavaScript

Рендер текстовых шаблонов по данным из массива PHP

Рендер текстовых шаблонов по данным из массива PHP

Битва титанов: normalize.css против reset.css

Битва титанов: normalize.css против reset.css

CSS ищет баги в SEO: картинки без alt и внешние ссылки

CSS ищет баги в SEO: картинки без alt и внешние ссылки