Почему изображения с низким разрешением кажутся размытыми на сайтах, просмотренных сетчатыми экранами?

Когда у меня есть изображение размером 500 х 500 пикселей, изображение выглядит резким на обычном дисплее (т. Е. Пиксели CSS 1: 1 на пиксели устройства). Но когда это изображение просматривается с дисплеем Retina, оно должно отображать каждый пиксель изображения в 4 пикселя сетчатки (разрешение в два раза выше). На экране сетчатки изображение также отображается на 500 x 500 пикселей CSS, но масштабируется до 1000 x 1000. Я не совсем понимаю, почему изображение выглядит размытым на экране Retina, так как физический размер остается тем же, учитывая, что оба монитора имеют одинаковый размер.Почему изображения с низким разрешением кажутся размытыми на сайтах, просмотренных сетчатыми экранами?

Является ли размытие результатом пространства между 4 пикселями?

Изображение из: http://coding.smashingmagazine.com/2012/08/20/towards-retina-web/

enter image description here

источник

2013-12-03 Youri Thielen

Нет; это потому, что браузер пытается масштабировать изображение, чтобы уменьшить острые края. – SLaks

Мне бы очень хотелось узнать ответ на этот вопрос. Я не знаю, почему Mac делают интерполяцию вместо простого удвоения пикселей (если это то, что они делают). Если бы они только удвоили пиксель, тогда существующие изображения не будут размыты на дисплеях Retina. –

При посещении страницы, браузер будет автоматически пытаться масштабировать изображение, поэтому оставив вас с небольшим размытием. Но решающая деталь заключается в том, как это делается; это не просто повторение пикселей, а интерполяция. - Oli Charlesworth

источник

2013-12-03 21:59:42 mxmxwo

Но решающая деталь заключается в том, как это делается; это не просто повторение пикселей, а интерполяция. –

Ваш результат будет зависеть от метода повторной дискретизации, используемого вашим конкретным браузером. Это «нечеткая» интерполяция изображения, которая обычно предпочтительнее для фотографического контента, но не настолько хороша для графики или контента с острыми краями. Общим алгоритмом является билинейная интерполяция, которая по умолчанию используется в Firefox.

Несмотря на отсутствие стандартных API-интерфейсов для контроля того, какой метод используется, Firefox предоставляет свойство image-rendering в CSS.

https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering

Это свойство также реализована в Webkit браузеров, использующих -webkit-optimize-contrast свойство.

Вышеупомянутая ссылка также содержит хороший обзор обоснования использования повторной выборки изображений.

источник

2013-12-03 22:05:08 nullability

Но почему это нужно передискретизировать? Простите меня за упрощение, но когда у меня 15-дюймовый экран с разрешением 1440 x 900 и 15-дюймовой сетчатой сетью с разрешением 2880 x 1800, физические размеры всех одинаковы, за исключением того, что разрешение 2880 x 1800 острее. Учитывая этот факт, пиксели изображения 500 x 500 могут отображаться на пикселях сетчатки 1000 x 1000, физический размер остается таким же, и все пиксели могут быть увеличены в четыре раза. Зачем нужна передискретизация? –

Я думаю, что он выглядит размытым, поскольку его ** относительно ** нерезкий по сравнению с текстом. Резкость должна быть такой же, как на дисплее без сетчатки справа? –

Да, это может быть частью этого. Для рендеринга шрифтов используется много трюков, чтобы текст выглядел более резким, например, с помощью субпикселей. Изображения не выиграют от этого. – nullability

Почему изображения с низким разрешением кажутся размытыми на сайтах, просмотренных сетчатыми экранами?

ответ

Смежные вопросы