SEVENTHERE ru

Сжатие картинки в php

Категория : Своими руками

Система должна работать так, чтобы каждому пользователю по запросу отправлялась картинка нужного размера — маленькие для пользователей с небольшими экранами, большие — для больших экранов. Веб таким образом работает отлично, но для доставки картинок разных размеров разным пользователям необходимо все эти картинки сначала создать. Множество инструментов занимается изменением размера, но слишком часто они выдают большие файлы, аннулирующие выигрыш в быстродействии, который должен приходить вместе с отзывчивыми картинками.

Давайте рассмотрим, как при помощи ImageMagick , инструмента командной строки, быстренько изменять размеры картинок, сохраняя превосходное качество и получая файлы небольших объёмов.

Миллионы людей ходят в интернет через 3G, или ещё хуже. Даже на быстром соединении такие сайты могут израсходовать лимиты трафика. Работа веб-дизайнеров и разработчиков — упростить и улучшить жизнь пользователя. Очень маленькие сайты могут просто сохранить несколько вариантов всех картинок. Но что, если у вас их дофига? Например, в магазине может быть сотня тысяч картинок — не делать же их варианты вручную.



Сжатие картинки в php видеоматериалы




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

Как работает изменение размера картинок По определению, при изменении размера картинки меняется количество пикселей в ней. Если её увеличивают, на выходе будет больше пикселей, чем на входе; при уменьшении — наоборот. Задача состоит в том, как лучше всего сохранить содержимое исходной картинки при помощи другого количества пикселей. Увеличение картинок изобразить проще, так что начнём с него.

Рассмотрим картинку с квадратиком 4х4 пикселя, который мы хотим удвоить до 8х8. По сути, мы берём эту картинку и натягиваем на новую сетку — это называется resampling дискретизация.



в сжатие php картинки


Чтобы сделать дискретизацию картинки 4х4 на 8х8, нужно куда-то вставить 48 лишних пикселей. У них должен быть какой-то цвет — процесс его подбора зовётся интерполяцией. При дискретизации алгоритм, выбирающий, как работает интерполяция, называется фильтром дискретизации. Фильтров таких есть множество. Проще всего добавить четыре ряда и четыре столбца любого цвета.

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





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


Цифры оптимизации изображений в PHP

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

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

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

В билинейной интерполяции считается взвешенное среднее цветов. Но такой фильтр влияет на размер файла, потому что он вместе с округлыми краями добавляет новые цвета. У оригинальной картинки было всего два цвета, теперь же у нас их больше. А при прочих равных, чем больше цветов, тем тяжелее файл. И что же это означает для нас Нам нужно как-то уменьшать количество цветов, не теряя в качестве.

Больше всего на это влияет выбор фильтра, но и другие настройки тоже могут. Нас интересуют две функции, convert и mogrify. Они выполняют схожие действия, но mogrify работает с несколькими файлами сразу, а convert — по одному. Функция -resize — пример одной из множества функций. У них у всех один формат: Использовать mogrify можно также, с небольшим дополнением: Я использовал для проверки как субъективное мнение, так и объективное — измерял структурные различия structural dissimilarity, DSSIM.

DSSIM сравнивает две картинки и выдаёт оценку. Чем меньше оценка, тем больше они похожи. А в одном из исследований в прошлом году было установлено, что обычно люди не могут на глаз отличить картинки с DSSIM менее 0, Протестировав различные изображения разных размеров в форматах JPEG и PNG я пришёл к выводу, что следующие настройки IM создают наименьшие результаты, которые при этом практически неотличимы от выдачи фотошопа: Mogrify или Convert IM использует convert для обработки картинок по одной, а mogrify обычно нужен для пакетной обработки.

В идеальном мире результаты их работы должны совпадать. К сожалению, в convert есть ошибка , из-за которой он игнорирует некоторые из настроек -define jpeg: Дискретизация resampling Выбор фильтра дискретизации в IM почему-то запутан. Есть три способа это сделать: Я проверил 11 разных функций и обнаружил, что лучше всего с уменьшением справляется —thumbnail, как по размеру, так и по качеству.


Как подключить OptiPic к PHP для сжатия изображений?

Эта функция работает в три этапа: Затем IM изменит размер с до через —resize. И в конце удалит мета-данные. Второй способ выбрать фильтр дискретизации — через —filter. У некоторых функций есть встроенные фильтры, а у других есть фильтры по умолчанию, которые можно поменять. На втором шаге работы —thumbnail используется —filter, потому что там используется функция —resize.

Я проверил 31 вариант настроек для —filter и добился наилучших результатов, используя Triangle. Этот фильтр также известен как билинейная интерполяция. Он вычисляет взвешенный средний цвет из соседних пикселей.



картинки в php сжатие


Я нашёл, что лучше всего задавать область соседних пикселей как -define filter: Третий способ выбора фильтра — это —interpolate, но он игнорируется при использовании -thumbnail.

Я решил, что она лишь увеличивает размер картинок, а разница в качестве получается пренебрежимо малой, поэтому рекомендую отключать её через -define jpeg: Увеличение чёткости Sharpening При изменении размера картинки слегка размываются, поэтому тот же фотошоп применяет различные техники увеличения чёткости. Я рекомендую фильтр unsharp, который, несмотря на название, увеличивает чёткость картинки: Фильтр работает так, что сначала применяется гауссово размытие.

Первые два числа — это радиус и сигма в нашем случае, по 0,25 пикселя. После размытия фильтр сравнивает размытую версию с оригиналом, и там, где яркость отличается более, чем заданный порог 0. Уменьшение цветности Как я говорил ранее, основная причина увеличения объёма файлов при изменении размера картинок — добавление новых цветов.

Поэтому нужно попытаться уменьшить их количество, но без потери качества. Один из способов — это постеризация posterization , когда градиенты заменяются на наборы из чётких цветов.

Постеризация уменьшает количество уровней цвета — это то, сколько вариантов остаётся у красного, зелёного и синего каналов. Общее количество цветов картинки будет комбинацией цветов этих каналов. Постеризация может уменьшить объём файла, но и ухудшить качество. Я предлагаю цифру , при которой вы получаете небольшой файл, не теряя особо в качестве. Оригинал Уменьшение количества цветов Дизеринг Dithering — процесс, который смягчает последствия уменьшения количества цветов, добавляя шума в цветовые наборы, чтобы создать иллюзию большего количества цветов.

В теории это хорошая идея. После дизеринга К сожалению, в IM есть ошибка, которая портит картинки с прозрачностью при дизериге. Поэтому его лучше отключить через -dither None.

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

Это пространтсво определяет, какие цвета доступны. И все они содержат цветов меньше, чем видит глаз. Его одобрили W3C и другие организации. На него ссылаются в спецификации PNG. В фотошопе это также это цветовое пространство по умолчанию.



в php картинки сжатие


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






Комментарии пользователей

спасибо за статью… добавил в ридер
21.08.2018 13:53
Действительно интересная подборка.
30.08.2018 04:43
Да, это вразумительный ответ
08.09.2018 14:52

  • © 2009-2018
    seventhere.ru
    RSS записи | Sitemap