Нужно ли мне создавать изображения в два раза больше пикселей на дисплее сетчатки?

Я только что получил новый Macbook Pro с Retina, и я не понимаю, как атаковать мои PSD.

Если я разрабатываю сайт с 14pxразмером шрифта, должен ли я создавать его 28pxв Photoshop, чтобы увидеть, как он будет выглядеть в CSS на стандартном дисплее?

Или, если мой веб-сайт должен иметь 60pxвысокий заголовок, я должен сделать его 120pxв Photoshop?

Я думаю, я сбит с толку, потому что CSS остается прежним, но мне интересно, должен ли я удваивать все в Photoshop, чтобы получить то, как это будет выглядеть в CSS на дисплее без сетчатки?

Ответы (4)

Если вы спрашиваете:

«Я только что получил дисплей Retina и заметил, насколько размытой выглядит некоторая веб-графика, даже если она сохранена в реальном размере, в котором она используется. Следует ли сохранять изображения для Интернета в два раза больше, потому что там есть дисплеи Retina?»

Тогда это мой ответ:

Ты прав. Вы должны делать свои изображения для Интернета в два раза больше, чем они вам действительно нужны, но не потому, что теперь у вас есть дисплей Retina, а потому, что есть устройства с дисплеями Retina, подобные вашему, которые будут использоваться для просмотра веб-сайта, который вы создаете. Но вы должны установить размеры ваших изображений в CSS в фактическом размере (а не в двойном размере). Например

  • Вам нужна иконка 20x20
  • создайте его и сохраните как изображение 40x40
  • когда вы используете его на веб-странице, укажите с помощью CSS, что это изображение размером 20x20.

Изображение будет отображаться как изображение 20x20, но поскольку сетчатка имеет более высокую плотность, она будет использовать 4 «физических» пикселя (2x2) для отображения каждого из «обычных» пикселей.

Когда страница просматривается на экранах с обычной плотностью, браузеры будут уменьшать выборку изображения, чтобы они могли отображать каждый «обычный» пиксель, используя только один «физический» пиксель. Изображение по-прежнему будет 20x20. Разница будет (в большинстве случаев) незаметной.

Если разница заметна из-за артефактов, связанных с понижающей выборкой, я предлагаю использовать медиа-запросы в CSS для предоставления разных изображений в зависимости от разрешения дисплея.

Физический и обычный не являются стандартными терминами. Я их выдумал.

Я не думаю, что ОП спрашивает, как создавать изображения для дисплеев сетчатки, а вместо этого спрашивает, как создавать изображения на дисплее сетчатки для стандартных дисплеев.
Ага, понятно. Мой ответ по-прежнему актуален. При проектировании для Интернета (с использованием дисплея Retina или без него), поскольку дисплеи Retina существуют, графические элементы должны сохраняться в двойном размере (который будет указан в CSS) и/или предоставлять два разных изображения с помощью медиа-запросов. Никогда не знаешь, какой монитор или устройство может быть у посетителя.
Если вопрос звучит так: «Означает ли наличие дисплея Retina в системе, что Photoshop говорит мне, что мое изображение имеет размер 20x20, хотя на самом деле оно 40x40», я думаю, что ответ «нет».
Я думаю, что этот ответ вводит в заблуждение. Независимо от того, что OP решит спроектировать, тот факт, что они теперь используют дисплей сетчатки, не должен влиять на размеры, в которых они создают изображения. Если вы хотите проектировать для сетчатки при использовании дисплея сетчатки, вы выбираете точно такие же размеры, как если бы вы не использовали дисплей сетчатки. Если вы просто хотите проектировать для экранов без сетчатки при использовании дисплея сетчатки, вы выбираете точно такие же размеры, как если бы вы не использовали дисплей сетчатки.
Отредактировал мой ответ. Тем не менее, хорошей практикой является сохранение изображений для Интернета в два раза больше, чем они будут использоваться (или использовать разные изображения для разных разрешений).
Лучше иметь два набора изображений для Интернета и выбирать, какой из них использовать, на основе фильтра CSS. Обслуживание изображений четырехкратного размера (удвоение изображения в обоих направлениях фактически учетверяет пиксели изображения) является пустой тратой полосы пропускания и обработки браузера, особенно когда вы имеете дело с мобильными устройствами, у которых нет дисплеев Retina.

Я думаю, вы спрашиваете о том, как проектировать при использовании дисплея Retina, а не о том, как проектировать для дисплеев Retina. Вам не нужно ничего менять в выбранных размерах.

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

Mac OS X масштабирует все, что вы видите за кулисами, поэтому, когда вы создаете изображение размером 100x100 пикселей в фотошопе, оно фактически занимает на вашем дисплее 200x200 пикселей. Если вы удвоите пиксели самостоятельно, у вас будет изображение размером 200x200 пикселей, отображаемое с разрешением 400x400 пикселей, что не является вашей целью.

Если вам нужны доказательства этого, попробуйте создать изображение размером 100x100 в фотошопе, а затем используйте CtrlShiftCmd4его, чтобы сделать снимок экрана. Теперь CtrlVв новом слое снимок экрана будет в два раза больше изображения.

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

Просто чтобы попытаться прояснить мою точку зрения:

Мне интересно, должен ли я удвоить все в Photoshop, чтобы получить то, как это будет выглядеть [...] на дисплее без сетчатки ?

Чтобы создать что-то, что выглядит так, как если бы это было на экране без сетчатки, вы производите именно то, что делали раньше.

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

Но я хочу сказать, что вам придется сделать это, даже если вы не используете дисплей сетчатки прямо сейчас.

Но разве вы не хотите экспортировать 16x16значок 32x32для Mac? Думаю, я немного смущен тем, как это работает.
@Johannes Да, чтобы полностью использовать разрешение сетчатки, но, по моему мнению, вы сказали «для Mac», если вы решите поддерживать сетчатку, которую вы хотите экспортировать с 2-кратным разрешением, независимо от того, работаете ли вы на дисплее сетчатки, обычном дисплей или Osbourne 1 . ОП не спрашивает о выборе размеров для сетчатки, они спрашивают, нужно ли изменить их поведение сейчас, когда они проектируют на ней.
@Johannes Однако, чем больше я повторяю это, тем больше я подозреваю, что теперь он может захотеть разработать дизайн для сетчатки, потому что теперь он у него есть. Но я действительно думаю, что было бы легко запутаться в том факте, что когда вы создаете изображение 100x100 в фотошопе, ваш экран отображает его в размере 200x200, поэтому я решил, что это недоразумение. Ах хорошо..

Вы правы — на данный момент нет простого способа обойти дисплеи сетчатки, кроме как удвоить разрешение ваших PSD и работать с вдвое большим количеством пикселей.

На самом деле это намного проще, чем кажется, и хорошо подходит для неразрушающего рабочего процесса (например, использование полигонов Photoshop для стандартных фигур, векторов для сплошных значков и составных фигур, реализация эффектов слоя и режимов наложения, использование смарт-объектов для растровой графики). так далее). Я большой сторонник того, чтобы избегать растеризации, если у вас нет другого выбора, просто в случае подобных случаев, когда вашу работу необходимо масштабировать или изменить размер — всегда хорошо быть готовым к этим вещам!

Что касается реализации CSS, см. ответ cockypup для более подробной информации.

Удачи, тут ничего нет. :)

Может быть того же размера с разрешением 150 dpi, он будет готов.

Привет и добро пожаловать в GD! На самом деле это не существенный ответ, который очень помогает ОП. Пожалуйста, не стесняйтесь редактировать свой ответ, чтобы он был более информативным. В противном случае велика вероятность, что ваш ответ будет удален как некачественный.
Спасибо @Isaiaseg. Это именно то, для чего я пытался получить подтверждение и не смог найти. Как будто это было совершенно очевидно. Я ценю, что вы поделились этим. В нем говорится, что вы можете удвоить размер изображения либо удвоив его размер в пикселях, чтобы 100 x 100 пикселей стали 200 x 200 пикселей, либо удвоив его разрешение, чтобы 72 dpi стало 144 dpi. Я надеюсь это имеет смысл. Спасибо еще раз!
Нужно ли мне создавать изображения в два раза больше пикселей на дисплее сетчатки?
СпросиСетьПолитика конфиденциальности1y, 0v