Масштабирование изображений и их качество

[Bugert]

Столкнулся с проблемой - в Мозилле и IE картинки, уменьшенные средствами css выглядят ужасно, в лесенке. Свойство 

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

Погуглил, но так и не нашел решения данного вопроса. Будто бы он никого и не волнует? Как же тогда быть? Делать множество копий картинки нужного размера под каждое разрешение экрана?

[npofopr]

А можно пример?

[Bugert]

Например, вот - http://bugert.meximas.com/ . Картинки в слайдере покрываются лесенкой (для картинки задан width в процентах и она масштабируется в зависимости от ширины родителя при разных @media). Но я что-то совершенно запутался, т.к. вот тут - http://bugert.meximas.com/new/ я задал все величины в процентах и картинка в Мозилле масштабируется без артефактов, хотя в IE беда.   

[npofopr]

Кто ж вас научил из 2000+px отображать на сайте только 70px? 

Используйте вектор, не надо мучать растр.

[Bugert]

Ничего не меняет от того, какого изначально картинка размера. Хоть я её сохраню в 100 на 70px. Лесенка от этого не убирается. И я и так создаю их в векторе, затем экспортирую в png. Может быть, подскажите, пожалуйста, в чем может быть дело?

 

Перезалил картинку, изменив ширину до 300px. Лесенка в IE и Firefox. Не имеет значения, какого картинка размера, потому что при масштабировании в этих браузерах она все равно портится. И меня интересует, как данную проблему решают?

Edited May 26, 2014 by Bugert

[npofopr]

Ничего не меняет от того, какого изначально картинка размера. Хоть я её сохраню в 100 на 70px.

тут весь ответ, если у вас и в Фотошопе лесенка, к примеру, то причем тут браузер?

 

Проблему решит, думаю, использование svg, тем более, что изначально у вас вектор.

[Bugert]

Спасибо. Покопаю в сторону SVG.

[npofopr]

Спасибо. Покопаю в сторону SVG.

 тут и копать нечего, вставляете как обычную картинку и все, вместо .png пишете .svg.

А для старых браузеров можно сделать, чтобы автоматом подставлялась .png. Modernizr это решает.