Качество специально уменьшеной картинки — самообман?

Question

[krasnblj]

Есть изображение 400х400 px. Уменьшаю до 200х200, сохраняю в максимальном качестве. Полученная картинка выглядит хуже, чем исходное (400х400) изображение с добавлением width=200px.

Я как-то неправильно сохраняю в 200х200, это самообман или панацея для небольших изображений?

Answer 1

[Александр Таратин]

Зависит от того, как картинку уменьшаете и в чем.
Вероятно у браузера фильтрация лучше оказалась.
Какой формат изображения? jpeg?

Comments

[Sergey Lerg]

В зависимости от картинки нужно использовать bicubic sharper или nearest neighbor.

Answer 2

[Алексей Николаев]

Попробуйте уменьшать шагами (сперва до 350х350, потом до 300х300 и т.п.). Дело в том, что при уменьшении неизбежно появляются искажения, т.к. изображение растровое. Если уменьшать пошагово, количество искажений можно свести к минимуму (связано с алгоритмом масштабирования изображений, причем чем меньше шаг, тем качественнее в итоге будет уменьшенный вариант). А в браузере механизм рендеринга (в первом случае, когда изображение 400х400) работает с не уменьшенной картинкой, что и обеспечивает более высокое качество.

P.S. Также существуют специализированные программы для уменьшения изображений

Answer 3

[bromzh]

Когда ты пишешь width=200px, то ты просто задаёшь стиль для элемента. Естественно, что браузер не загрузит картинку меньшего размера, ведь он ничего не знает, что на "том конце". Он делает запрос, загружает данные. И загрузит он естественно картинку, размером 400х400. Потом браузер применяет стиль, т.е. уменьшает элемент img в соответствии с заданными правилами, заполняя этот элемент твоей картинкой. Таким образом, он грузит оригинал, а потом на лету его изменяет при рендере.
Когда ты изменяшь размер картинки в графическом редакторе, ты желаешь необратимые изменения с самой картинкой. Естественно, качество её тоже изменится. И браузер будет грузить с сервера изображение уже не 400х400, а 200х200.

Comments

[krasnblj]

Я это понимаю, спасибо. Вопрос в интерполяциях PS и браузера.

[bromzh]

@krasnblj: А, ну тут уже вопрос, по каким алгоритмам сжимает браузер и фотошоп. Плюс, когда ты сохраняешь картинку - это одно. Там уже идёт зависимость от формата. Для показа (если я правильно понимаю) формат не играет роли, это просто набор пикселей, которые уменьшаются каким-то алгоритме при рендере.

Answer 4

[Александр]

Судя по тегу, речь идёт о сохранении из Фотошопа.
Попробуйте увеличить качество изображения при сохранении.
Если 400*400 было в 60, то для 200*200 попробуйте поставить 80.

Comments

[krasnblj]

Ползунок качества выкручиваю до максимума.

Answer 5

[Виталий Емельянцев]

А вы на каком экране смотрите? Зависит это еще от dpi вашего экрана. Например, на retina-display разницу вы заметите невооруженным глазом очень сильную. Изображение 400х400 уменьшается вашим браузером под стиль 200х200, но потом растягивается под экранные пиксели, исходя из dpi. И на retna-display оно растянется ровно в 2 раза как раз под 400х400 экранных пикселей.

Answer 6

[Const V]

Покажите пример. Вслепую почти ничего нельзя посоветовать

Answer 7

[htmleater]

Простая теория: картинка имеет по 400 пикселей по ширине и высоте. Браузер забирает эту картинку и впихивает в бокс 200х200, тупо выкидывая половину пикселей при рендере. Отсюда потеря деталей, лестницы, муар.
При увеличении картина обратная - браузер добавляет отсутствующее кол-во пикселей с усреднённым цветом., что непременно приводит к мылу.

В Фотошопе можно смягчить ухудшение качества если ресайзить не сразу в 100%, а в несколько шагов, процентов по 15.
Программы-ресайзеры используют различные алгоритмы изменения размеров, что позволяет уменьшить деградации картинок (а они будут в любом случае).