Разница в качестве изображения между IE и другими браузерами

Question

Мои изображения отображаются точно так, как они должны быть в браузерах, таких как Chrome, Firefox и Safari. Как только я открываю Internet Explorer и вижу результаты там, это дает мне довольно большую разницу.

Это хром:

Это Internet Explorer:

Изображения и 460 х 460 и стили CSS, добавленные к изображениям являются:

background: url(../../Icons/Sigma/Vernieuwen.png); 
background-position: left center; 
background-repeat: no-repeat; 
background-size: 100%; 
display: inline-block; 
height: 20px; 
width: 20px; 

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

Я попробовал изменить размер изображения в фотошопе до 20 x 20, но результат остается тем же.

Мой вопрос: есть ли способ дать IE тот же результат, что и Chrome?

Answer 1

Попробуйте использовать это:

img { 
    -ms-interpolation-mode: bicubic; 
} 

из this answer

Answer 2

вы не можете изменить это с помощью CSS. единственный способ - использовать небольшое изображение, изменить размер изображения до 20px x 20px, и он будет работать