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

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

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

если вы используете Mac Retina, оба изображения будут размытыми, поэтому вам, возможно, придется загрузить его и открыть в режиме предварительного просмотра...

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

Я знаю, что вы можете преобразовать файл gif в svg с помощью этой ссылки

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

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


image blurry webpage retina-display retina
person Mashpoe    schedule 09.08.2015    source источник

Ответы (1)


arrow_upward
5
arrow_downward

Я понял, вам нужно использовать 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; }
</style>

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

person Mashpoe    schedule 10.08.2015