исправление размытых изображений в браузерах, используемых mac retina

Question

Я делаю игру вроде как cookie-кликер, и я хочу, чтобы изображения выглядели 8 бит. Я использую macbook pro retina, который имеет четыре пикселя для каждого пикселя на обычном экране. В Chrome и Safari вместо каждого пикселя, представленного 2x2 пикселями, я получаю кучу размытых капель ... У меня нет этой проблемы в FireFox. Существует один сайт под названием pixeljoint.com, который сделан для пиксельного искусства, и у меня нет размытой проблемы. Всякий раз, когда я открываю одно из изображений с PixelJoint на новой вкладке, изображение возвращается к размытому. Я слышал, что проблема в том, что изображения масштабируются до того, как они отображаются на хроме и сафари, но я не уверен.

Вот две картинки, чтобы показать, что я говорю о:

Я также хотел бы отметить, что изображения являются нормальными .gif файлы.

Я знаю, что вы можете преобразовать файл GIF на СВГ с this link

и файл SVG выглядит отлично на сетчатке.

Все, что я хочу знать, это то, как PixelJoint делает пиксели такими гладкими.

Answer 1

Я понял, вам нужно использовать CSS!

<style> 
img {image-rendering: optimizeSpeed;image-rendering: -moz-crisp-edges;image-rendering: -webkit-optimize-contrast;image-rendering: optimize-contrast;image-rendering: pixelated; -ms-interpolation-mode: nearest-neighbor; } 

.mobile-span{display:inline-block;} 
.tablet-span{display:none;} 
.tablet-large-span{display:none;} 
.clear{clear:both;} 
.right{text-align:right;} 
</style> 

Я нашел это в исходном коде, поэтому, я думаю, именно так PixelJoint делает это.