Эффективное изменение размера изображений с помощью imagemagick

Эффективное изменение размера изображений с помощью imagemagick

772

В наше время, больше и больше веб-сайтов сталкиваются с необходимостью внедрения адаптивного дизайна и адаптивные изображения – и в данной связи нужно отлично поменять размер всех изображений. Система обязана работать так, чтоб каждый юзер просьбой прислать картину подходящего размера – небольшой для юзеров с маленькими экранами, огромные – для огромных экранов.
В вебе так отлично работает, но для доставки изображений различных размеров различных юзеров необходимы все эти рисунки поначалу сделать.
Давайте разглядим, как с помощью imagemagick, инструмент командной строчки, чтоб быстро изменять размер изображений, сохраняя хорошее качество и получение маленького количества файлов. Почти все инструменты сделок с конфигурации размера, но очень нередко они приносят огромные файлы, сводя на нет выигрыш в производительности, который должен придти совместно с отзывчивыми изображениями.
Даже на стремительном соединении таковых веб-сайтов может издержать на лимиты трафика. Миллионы людей выходят в Веб через 3G, либо ужаснее. 2Мб в этих вариантах работают плохо. Работа интернет-дизайнеров и разрабов, чтоб упростить и сделать лучше жизнь юзеров. Огромные рисунки == огромные трудности
Средняя Интернет-страничка весит 2 МБ, 2/3 из их – фото.

Но что делать, раз у вас их дофига? Мелкие веб-сайты могут просто сохранить несколько версий всех изображений. К примеру, магазин может быть сотки тыщ снимков – не делать их характеристики вручную.
Помощью imagemagick
Утилита командной строчки с 25-летним стажем в то же время, является редактор изображений с полным набором функций. На данный момент я объясню, в чем неувязка, и показать для вас, какие опции нужны для ее решения. Но с опциями по умолчанию, файлы, которые нередко получают очень огромные – время от времени больше, чем оригинал, хотя в их и меньше пикселей. Это большая куча способностей, и посреди их – быстро и автоматом изменяет Размер картинок.
Как изменять размер рисунки
По определению, при изменении размера изображения меняется Количество пикселей в нем. Задачка состоит в том, как очень сохранить содержание начального изображения с различным количеством пикселей. Раз оно возросло, то на выходе будет больше пикселей, чем на входе; при уменьшении – напротив.
Повышение изображения легче изобразить, потому начнем с него. Рассматриваем картину с квадратом 4х4 пикселя, который мы желаем удвоить до 8х8. Они должны иметь какой-то цвет – выбор процесс именуется интерполяцией. По сущности, мы берем эту картину и рисовать по новейшей сетке именуется передискретизация (подборка). При отборе проб метод, который выделяет интерполяционный фильтр именуется дискретизацией. Сделать дискретизацию изображения 4х4 до 8х8, необходимо куда-то вставить излишние 48 пикселей.

Ну, допустим, красноватый. В Photoshop это делается через “изображение” → “Размер холста” заместо “изображение” → “Размер изображения”. Самый обычный метод добавить четыре строчки и четыре столбца хоть какого цвета. Фильтров там много таковых. Это будет в фоновом режиме интерполяции, когда пустые места есть Цвет фона (красноватый).
Фон интерполяции употребляется лишь для прибавления новейших пикселей, и позже это бесполезно при изменении размера. Картина похожа на оригинал. Это, естественно, нас не устраивает.

Еще один обычный интерполяции, чтоб сделать цвет новейших пикселей такое же, как и их соседей является интерполяцией ближайших соседей. Для фото, в особенности для нашей маленький коробке, итог будет намного лучше.

При downsampling, т. е. уменьшение изображения, не так просто сделать интерполяцию по наиблежайшим соседям. Они должны признать, что для математических целей можно оперировать с дробными пикселей. Так как пикселы стают меньше, и размер их больше, некие из их содержат несколько цветов. Для пуска новейшей сетки используются к начальному изображению.
Так что время от времени сосед интерполяции при уменьшении, именуется точкой отбора проб. Но эти пикселы имеют лишь один цвет. Результирующий цвет каждого пикселя новейшей сетки определяется цветом в центре.

Но раз это что-то труднее линий и квадратов, этот способ кидает неровные и квадратные снимки. Он работает быстро, производит наименьшие файлы, но это смотрится плохо.
В билинейной интерполяции считается средневзвешенное значение цвета. Большая часть фильтров употребляют варианты интерполяции соседа – они делают точки отбора проб в пары точках и потом вычислять средний цвет для их.

Уникальные изображения были лишь 2-ух цветов, сейчас у нас есть больше из их. Но при иных равных критериях, чем больше цветов, тем тяжелее файл. Но таковой фильтр влияет на Размер файла, так как он совместно с закругленными краями добавляет новейшие цвета.
И что это значит для нас
Нам нужно как-то уменьшить количество цветов без утраты свойства. Больше всего это влияет на выбор фильтра, но и остальные характеристики тоже сможете.
Они выполняют похожие деяния, но mogrify работает с несколькими файлами сразу и конвертировать – один. Нас интересуют две функции, Convert и mogrify. Рациональные опции для imagemagick
Базы Пакета Imagemagick
С помощью imagemagick множество опций и функций, и отыскать подходящий достаточно тяжело.
Обычная операция:
конвертировать input.jpg -Размер 300 output.jpg
В то время как IM принимая input.jpg и меняет размер до пикселей по ширине, сохраняя итог в output.jpg. Функция-поменять размер 300-это пример 1-го из его бессчетных функций. Все они имеют однообразный Формат: -имя_функции вариант.
Mogrify может применять также, с маленьким дополнением:
mogrify-пути выхода/ -Размер 300 *.Формат JPG
Вот им-воспринимает все JPEG файлы из текущего каталога (*.формате JPG), измените размер до 300 пикселей в ширину и сохраняет их в выходном каталоге.
Функции могут быть объединены:
конвертировать input.jpg -Размер 300-качество 75 output.jpg
Он также изменяет Размер input.jpg до 300 piskula, но устанавливает качество JPEG до 75 перед сохранением в output.jpg.
DSSIM ассоциирует два вида и выдает итог. 0 значит личность. И в одно исследование в прошедшем году нашли, что люди традиционно не могут на глаз отличить снимки с DSSIM наименее 0,015. Чем меньше балл, тем больше они похожи. Тестирование и результаты
Тестирование разных опций чата, я стремился уменьшить размер файла без вреда для их свойства, потому они не различают его от выбора фотошопе «сохранить для web». Я достиг оценки DSSIM не наиболее 0,0075. Я употреблял, чтоб проверить, как субъективное мировоззрение и объективный – измеренный структурные различия (структурные конфигурации, DSSIM).
Опосля тестирования разных изображений в JPEG и PNG, я пришел к выводу, что последующие опции чата поза менее результатов, которые фактически неотличимы от выдачи фотошопе:
mogrify-путь OUTPUT_PATH-фильтр треугольник-найти фильтр:поддержка=2-эскиз OUTPUT_WIDTH-нерезкая 0.25×0.25+8+0.065 -нет дизеринга-постеризация 136-82 качество-определение формата JPEG:фантазии-апсемплинг=выкл-найти Формат PNG:сжатие-фильтр=5-найти Формат PNG:сжатие-уровень=9-найти Формат PNG:сжатие-стратегии=1-Найти Формат PNG:исключить-чанк=все-переплетает никто-цветовое место с sRGB-прокладка INPUT_PATH
Разглядим их наиболее тщательно.
Mogrify либо конвертировать
Чат употребляет функцию Convert для обработки изображений по одному, и mogrify, как правило, нужны для пакетной обработки. В безупречном мире результаты их работы должны быть схожими. К огорчению, в конвертации есть ошибка, когда он игнорирует некие опции (-определение формата JPEG:фантазии-апсемплинг=выкл), потому пришлось применять mogrify.
Есть три метода сделать это: Дискретизации (передискретизации)
Выбор фильтра дискретизации им как-то смущает.

выбор функции Resize (изменение формата
используя опцию-фильтр
либо вариант-интерполяция

Примеры двенадцать разных функций конфигурации размера
Эта функция работает в три шага: Самое очевидное внедрение –изменить размер, но результаты очень огромные. Я протестировали 11 разных функций и узнали, что лучше всех справлялся с ограниченной эскиз, размер, и качество.

изменяет размер рисунки до размера в 5 раз больше, чем требуется, используя функцию эталона, который имеет собственный свой интегрированный фильтр
потом измените размер до нужного методом –изменить размер
удаляет Мета-данных из образов

И в конце будет удалить Мета-данные. То есть раз мы уменьшаем изображение до 500 пикселей в ширину, -эскизов во-первых, поменять его размер до 2500 с помощью подборки. Потом я собираюсь поменять размер с 2500 до 500 с помощью –изменить размер.
Во 2-ой шаг работы –эскиз употребляется –фильтр, поэтому что он употребляет функция –изменить размер. Некие функции являются встроенными фильтрами, в то время как остальные имеют фильтры по умолчанию, которые можно поменять. 2-ой метод выбрать фильтр для отбора проб – через –фильтр.
Он вычисляет средневзвешенное цвета примыкающих пикселей. Этот фильтр также известен как билинейная интерполяция. Я проверил 31 вариант опции для фильтра и достичь наилучших результатов, используя треугольник. Я нашел, что лучше всего найти области примыкающих пикселей как найти фильтр:поддержка=2 параметра.
3-ий метод выбора фильтра –интерполировать, но это учитывается при использовании-миниатюру.
Не считая того, им по умолчанию употребляет функцию, именуемую формате JPEG фантазии апсемплинга, которая пробует отдать наилучшее качество JPEG. Я решила, что он лишь наращивает размер изображения, а разница в Качество музыки пренебрежимо мала, так что рекомендую отключить его по-определение формата JPEG:фантазии-апсемплинг=выкл.
Я рекомендую фильтр нерезкая, который, невзирая на заглавие, наращивает четкость изображения: -нерезкая 0.25×0.25+8+0.065. Повышение резкости (увеличение резкости)
Когда вы изменяете размер изображения слегка размыты, так же фотошоп применяет разные технологии увеличения четкости.
1-ые два числа являются радиус и Сигма (в нашем случае 0.25 пиксела). Фильтр работает так, что поначалу применяет Гауссово размытие. Опосля размытия фильтр ассоциирует размытой версией оригинала, и где яркость не различается наиболее чем на данное пороговое значение (0.065), употребляется, чтоб прирастить определение данной прочности (8).
Потому необходимо попробовать уменьшить их количество, но без утраты свойства. Понижение цветности
Как я произнес ранее, основной предпосылкой роста размера файлов при изменении размера изображений – добавление новейших цветов.
Одним из методов является Пастеризация (постеризации), когда градиенты заменяются устанавливает точных цветов. Общее количество цветов в картинке будет цвет композиция этих каналов. Пастеризация уменьшает количество цветовых уровней, сколько вариантов остается красноватым, зеленоватым и голубым каналами.
Я предлагаю цифрой 136, в которой вы получите маленький файл, в особенности не теряя в качестве. Схематизация может уменьшить размер файла, но и усугубляют качество.

Оригинал

Уменьшить количество цветов
Дитеринг (Дизеринг) — это процесс, который смягчает действие сокращения числа цветов, добавление шума к цвету наборам для сотворения иллюзии большего количества цветов. В теории это отменная мысль.

Опосля дизеринга
К счастью, и без него результаты постеризации отлично смотреться. Так что его лучше отключить через-дизеринга нет. К огорчению, в IM есть баг, который портит картину с прозрачностью когда dizerega.

Ошибка дизеринг в IM
Цветовое место
Цветовое место косвенно относится к количеству цветов в изображении. Картина ниже указывает, что цветовое место Профото RGB и имеет больше цветов, чем Adobe RGB, который, в свою очередь, содержит больше, чем sRGB. И все они содержат наименее цвета, чем лицезреет глаз. Это место описывает, какие цвета доступны.

Он упоминается в спецификации PNG. место sRGB поставил тебя царем цветовых местах Веба. Он был одобрен консорциумом W3C и иными организациями. Он является неотклонимым для поддержки в CSS Цвет модуля уровня 3 в спецификации и SVG и webp. Короче, sRGB является наилучшим выбором для web, и раз вы желаете, чтоб ваши изображения показываются верно, лучше применять его. В фотошопе это тоже цветовое место по умолчанию.
Качество и сжатие
Форматы С потерями, как JPEG и качество сжатия впрямую соединены – чем больше сжатие, тем ниже качество и меньше Размер файла. Потому необходимо отыскать баланс.
И в настройках чата рекомендую через 82. В моих тестах эталонного изображения и Photoshop был разоблачен как максимум, либо 60. Почему?
Качество 60 в Photoshop может быть таковым же, как качество 40 в одной програмке, качество уровня «B+» либо как «красавцы» в третьей. Выходит, что количественно высококачественный параметр не определен в Формат JPEG, и потому он не обычный. В моих тестах я нашел, что fotoshopovskogo 60 соответствует-качество 82 в imagemagick.
И форматы без утраты свойства, таковых как PNG, качество и сжатие соединены. Высочайшая степень сжатия не меняет вид рисунки, и зависит лишь от уровня загрузки процессора при его обработке. Раз Вы не пожалеете компов, нет никаких обстоятельств не ставить наибольшее сжатие в формате PNG.
Степень сжатия я рекомендую ставить на максимум, 9 (-найти Формат PNG:сжатие-уровень=9). Я достигнул наилучших результатов при использовании адаптивной фильтрации (-найти Формат PNG:сжатие-фильтр=5). Файлы в формате PNG сжатие в IM может быть установлен в три положения: -определение ПНГ:сжатие-фильтр-найти Формат PNG:сжатие-уровня-и-найти Формат PNG:сжатие-стратегии. Стратегия описывает сам метод. Фильтр сжатия является доп шагом до сжатия, которая сортирует данные так, что степень сжатия становится наиболее действенным. Мне приглянулась стратегия по умолчанию-определение ПНГ:сжатие-стратегии=1).
И хотя я указал, что –миниатюру удаляет Мета-данные, тем не наименее, он удаляет их все. На качество не влияет. Эта информация занимает место, но не улучшает восприятие изображения, и его легче удалить. Есть возможность удалить все, используя стрип-найти Формат PNG:исключить-чанк=все. Мета данные
Кроме фото, файлов может содержать Мета-данные – информация о изображении, когда она была сотворена, о устройстве, которое сделало его.
Прогрессивный рендер
JPEG и PNG могут быть сохранены с прогредиентным (прогрессирующим) либо поочередно (поочередный) рендер. Прогрессивный значит, что картина передается и отображается равномерно. Действие по умолчанию-2-ой, когда пикселей загружаются в несколько рядов, сверху донизу.
В прогрессивный JPEG визуализация может происходить в хоть какое количество шагов определяется при сохранении файла. 1-ый шаг состоит в низком разрешении полного изображения; в каждой следующей версии возникает наиболее высочайшего разрешения не будут выдаваться до тех пор, пока все изображение в высочайшем разрешении.

В PNG есть Тип прогрессивной визуализации именуется Adam7 переплетением, когда пиксели показываются в семь шагов на базе 8х8.

Но необходимо ли это? Оба типа визуализации можно настроить в IM через с чередованием.
Длительное время числилось, что оно обязано быть включено, поэтому что это улучшает их восприятие юзерами. За счет этого возрастает размер рендеринга файлов. Даже раз безупречная картина не загружается сходу, это нечто признать, и это будет лучше чем ничего.
Это всего только одно исследование, но все равно любопытно. В прошедшем году результаты исследования проявили, что юзеры предпочитают поочередный рендер. Потому я решил посоветовать внедрение поочередного рендера через «-переплетаются никто».
Все описанные до данной опции я рекомендую, раз Вы не улучшить ваши изображения. Раз они могут улучшить, тогда я изменю: маленькие конфигурации в настройках-нерезкая лучше работать-нерезкая 0.25×0.08+8.3+0.045 напротив-нерезкая 0.25×0.25+8+0.065 без оптимизации) и не нужно применять в качестве прокладки. Оптимизация картинок
Я упомянул оптимизации.
mogrify-путь OUTPUT_PATH-фильтр треугольник-найти фильтр:поддержка=2-эскиз OUTPUT_WIDTH-нерезкая 0.25×0.08+8.3+0.045 -нет дизеринга-постеризация 136-82 качество-определение формата JPEG:фантазии-апсемплинг=выкл-найти Формат PNG:сжатие-фильтр=5-найти Формат PNG:сжатие-уровень=9-найти Формат PNG:сжатие-стратегии=1-Найти Формат PNG:исключить-чанк=все-переплетает никто-цветовое место sRGB в INPUT_PATH
Но, опосля использования image_optim пользоваться picopt и ImageOptim является наименьшим. Оптимизаторов много. Я инспектировал их одну за иной и пришел к выводу, что лучше запустить файлы через все три в том порядке, в котором они возникают. Раз у вас нет очень много времени и вычислительной мощности, внедрение наиболее чем одной оптимизации будет чрезмерным. Я тестировал image_optim, picopt и ImageOptim, и они изгнать все рисунки через ряд разных шагов.
Результаты (и стоило так страдать?)
Естественно, мои опции сложны, но чтоб сделать лучше пользовательский опыт, в которых они нуждаются. Рады сказать, что проведя время тестов, я сумел существенно уменьшить размеры файлов без утраты свойства.
Средний размер файлов уменьшился на 35% по сопоставлению с вариантом в фотошопе “сохранить для web”.
В сопоставлении с Photoshop креативное скопление

Мои опции без оптимизации оказалось даже лучше, чем фотошоп с оптимизацией!
По сопоставлению с опциями по умолчанию, при изменении размера рисунки в чат, мои советы выиграл в среднем 82%.

По сопоставлению с опциями по умолчанию в WordPress, что «под капотом» употребляет imagemagick, о мои характеристики в среднем набрал 77%.

По сопоставлению с иными CMS и инструменты, используемые при помощи imagemagick, мои характеристики были выигрывать вплоть до 144%.

Помните, все фото были неотличимы от выхода из Photoshop.
Как это воплотить в собственных проектах
оболочки bash
Тут вы сможете добавить функцию в макрос файл .bash_aliases (либо .bashrc и), которая заменит мое рекомендуемые команды:
smartresize() {
mogrify-Path в $3-фильтр треугольник-найти фильтр:поддержка=2-миниатюру $2-нерезкая 0.25×0.08+8.3+0.045 -нет дизеринга-постеризация 136-82 качество-определение формата JPEG:фантазии-апсемплинг=выкл-найти Формат PNG:сжатие-фильтр=5-найти Формат PNG:сжатие-уровень=9-найти Формат PNG:сжатие-стратегии=1-Найти Формат PNG:исключить-чанк=все-переплетает никто-цветовое место sRGB в $1
}
Но именовать это обязано быть так:
smartresize входной_файл.ПНГ 300 outputdir/
При его использовании вы сможете добавить функция конфигурации размера последующим образом: Node.js
Нпм пакет под заглавием пакета imagemagick дозволяет применять пакет imagemagick.
вар им = требуют(‘использующих’);

вар inputPath = ‘путь/до/ввода’;
в var outputPath = ‘путь/к/вывода’;
вар Ширина = 300; // вывод ширины в пикселях

вар параметр args = [
inputPath,
‘фильтр’,
‘Треугольник’,
‘-найти’,
‘фильтр:поддержка=2’,
‘-уменьшенное’,
Ширина,
‘-нерезкая 0.25×0.25+8+0.065’,
‘-сглаживание none’,то
‘-постеризация 136’,
‘-качество 82’,
‘-найти Формат jpeg:фантазии-апсемплинг=выкл’,
‘-найти Формат PNG:сжатие-фильтр=5’,
‘-найти Формат PNG:сжатие-уровень=9’,
‘-найти Формат PNG:сжатие-стратегии=1’,
‘-найти Формат PNG:исключить-чанк=все’,
‘-переплетает никто’,
‘-цветовое место с sRGB’,
‘-Стриптиз’,
outputPath
];

им.конвертировать(аргумента, то функция(ошибаться, обычный вывод (stdout, stderr, то) {
// делаем вещи
});
Хряк
Раз вы используете грунт для выполнения задач, специально для вас я сделал задание с именованием грунт-respimg (нпм), который делает то, что я обрисовал. В собственных проектах вы можете включить его последующим образом:
нпм установить крякнутые-respimg —сохранить-дев
И потом вы сможете завершить его в грунт файл:
грунт».initConfig({
respimg: {
по умолчанию: {
характеристики: {
Ширин: [200, 400]
},
файлы: [{
разверните узел: правда,
кдо: ‘в src/виду/’,
иточник: [‘**.{джиф,jpg,ПНГ,формате SVG}’],
цель: «выстроить/виду/’
}]
}
},
});
грунт».loadNpmTasks(‘хряк-respimg’);
РНР
Imagemagick для PHP в встроенной под заглавием Imagick. К огорчению, она ограничена и не способна делать все то, что я рекомендовал, в частности, настраивать фильтр подборки с внедрением миниатюр функция.
Он может быть включен в проект, используя Композитор: К счастью для вас, я сделал PHP модуль-respimg (packagist), кто все делает верно.
композитор просит nwtn/РНР-respimg
И потом поменять размер изображения последующим образом:
require_once(‘vendor/autoload.php’);
применять nwtnRespimg как Respimg;
$Image = новое Respimg($input_filename);
$изображение->smartResize($output_width, 0, ересь);
$изображение->writeImage ($, output_filename);
Опосля установки для активации для вас необходимо будет добавить последующее в файл functions.php: Системы Управления Контентом
Раз ваша CMS работает на PHP, берем раздел «РНР» и перевоплотить его в плагин. Раз вы используете WordPress, то вы сможете применять плагин RICG адаптивные изображения.
функция custom_theme_setup() {
add_theme_support( ‘дополнительно-изображения-сжатие’ );
}
помощи add_action( ‘after_setup_theme’, ‘custom_theme_setup’ );
Остальные CMS либо по другому предоставляют доступ к функциям для работы с изображениями – обратитесь к их документации.
Производительность
В моих тестах я нашел, что по сопоставлению с –изменить размер по умолчанию им проведены в 2,25 раза больше времени на обработку изображения.
Мы можем сделать веб-сайт наиболее шустрым, улучшения пользовательского восприятия, и даже принести наш контент на новейшие рынки. Вывод
Дизайнеры и создатели чрезвычайно сильно влияют на то, как интернет работает. Уменьшение размера фото достаточно просто и существенно увеличивает производительность участка – надеюсь, что вся эта информация будет для вас полезной и дозволит для вас сделать лучше ваш веб-сайт для юзеров.
Ссылки
грунт-respimg
РНР-respimg
RICG адаптивные изображения плагин habrahabr.ru