Изображение при изменении размера становится размытым, а не пиксельным

Question

Итак, я создаю простой интерфейс и хочу добавить к нему пиксельную графику.

У меня есть это изображение в 20px x 20px, и когда я изменяю его размер при помощи зеркала или в любом программном обеспечении, оно просто пикселируется, что хорошо:

http://prntscr.com/np1f02

Однако, когда я добавляю изображение с тегом и устанавливаю его ширину и высоту, как:

<img src={helmetSlot} style={{width: 64, height: 64}}/>

Это выглядит ужасно размыто: http://prntscr.com/np1flc

В чем причина этого? Как я могу предотвратить это?

РЕШИТЬ: Используемый рендеринг изображений: пиксельный; css proeprty чтобы это исправить. Никогда не знал о существовании этого имущества

Answer 1

рендеринг изображений: пиксельный; Сделал трюк

Answer 2

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

Пример: экспортируйте его с разрешением 128px x 128px. Тогда отображение его в 64 х 64 не должно быть проблемой.