Как правильно уменьшать размер (габариты) png?

Question

[65536]

Существует ли какой-то способ чтобы уменьшать пнг без ручного пиксельарта и чтобы ничего не ехало?

Пример, исходная картинка (70х70):

Вот уменьшенная до 35х35 в фш в наиболее подходящем режиме "бикубическая четче":

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

Answer 1

[Нерон Лордов]

Попробуй сначала сильно увеличить изображение, а потом уже уменьшить до нужного размера.
Также присоединяюсь к совету Сергей - используй вектор, Люк.

Comments

[65536]

вроде слегка помогает

[Нерон Лордов]

65536: Прикольно. Слева - картинка из сабжа, а справа - после махинаций с увеличением и уменьшением?

[65536]

Liquidos: да, в 10 раз увеличил и потом в 20 уменьшил. в общем на данный момент это пока решение)

[Нерон Лордов]

65536: Круто. Я этот принцип использовал при подготовке графики для соцсетей. В соцсети нужно закачивать картинки в 2-3 раза больше максимально допустимых, тогда они не будут изуродованы движком сети) А если закачивать картинку по рекомендациям - артефакты вылезут, цвета перекосятся и вообще смотреть невозможно.

[65536]

честно говоря, не понимаю в чем разница, отличия минимальны
обычный способ https://i.gyazo.com/dc516ad1d227e08a036e1cf3f8518e...
ваш способ https://i.gyazo.com/2505f3ef38cb0a2634edf2514a0736...
такой видимо выправляющий оптический эффект из-за того что чуть темнее там эти линии получились

[Нерон Лордов]

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

[Нерон Лордов]

65536: если интересно, рекомендую к прочтению Photoshop Lab Color Маргулиса. Автора ругают частенько, но вообще из книги много нового узнаешь про обработку изображений и движок фотошопа)

[65536]

Liquidos: в соцсетях наверное адский джипег на грани того чем довольны пользователи и сколько это занимает места, vk.com/putineveryday

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

[Нерон Лордов]

65536: не думаю, что много. Возможно, вполне хватит официальной справки от Эдоуби. Но ведь это надо читать, а зачем, если на каждую хитрую проблему у фотошопа найдется несколько обходных путей решения) Что касается Lab - это не сложно, просто немного не так, как все привыкли)

Answer 2

[Рост Осипов]

Здесь нужно подключить свои знания в области математики.
Ваше изображение: 70px x 70px состоящее из 16 квадратов 15px x 15px, находящихся друг от друга на расстоянии в 2px.

Когда Вы уменьшаете картинку в 2 раза (35px x35 px) - 16 квадратов 15px так же делятся на 2.

15/2=7.5px
2/2=1px

Ваша картинка выглядит размытой из-за того что при делении получилось не целое число и пиксели не встали на пиксельную сетку.
Чтобы избежать этого - Вам следует изначально держать в голове возможные варианты масштабирования иконки.
Вот например иконка 70px x 70px состоящая из 16 квадратов с размером 16px с разрядкой 2 px - при 2-кратном уменьшении дает четкую картинку так как:
16/2=8px
2/2=1px



Отличный способ - использование .svg. Векторный формат, остающийся четким при масштабировании.

Comments

[65536]

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

Answer 3

[Mercury13]

Мой совет работает для всех форматов, и растровых, и векторных. При рендеринге вектора или уменьшении растра использовать правильную гамму монитора (2,2 для Windows, сейчас на неё, насколько мне известно, перешёл и Мак).

Вот у нас два цвета: (0,5, 0,5, 0,5) и (1, 1, 1). Во сколько раз второй ярче первого? Вдвое? Нет, в 2^2,2 раза. Потому сильно размытая (размытая с гаммой 1) линия выходит тоньше не столь размытой.

Comments

[65536]

как гамма монитора влияет на пиксели в файле?

[Mercury13]

На пиксели в файле — никак. На пиксели на мониторе — ну, ты понимаешь.

[65536]

Mercury13: ну не я же потом на нее буду смотреть))

[Mercury13]

Если не ты — значит, использовать среднепотолочную гамму, а не замеренную колориметром на твоём мониторе.

И ещё — беру свои слова назад, на планшете выглядело дрянно (он сам масштабирует картинки, да ещё и матрица там ретиноподобная, но откровенно слабая). Посмотрел на настольном мониторе — всё верно там с гаммой, лучше не сделает ни PNG, ни SVG.

В TrueType-шрифтах именно для этого есть так называемый хинтинг (выравнивание горизонтальных и вертикальных прямых по пикселям).