Как подготавливать графику для мониторов 4k?

Question

[Алексей]

Впервые столкнулся с проектом, в требованиях которого необходимость учесть отображение страниц сайта на дисплеях 4k.
Как тут обстоят дела с подготовкой/нарезкой графики? Тут так же нужно учитывать плотность пикселей? Нужно подготавливать графику в @2x, @3x или как?
Или может подскажете дельную статью, касающуюся именно веб-диза и 4к.
И еще просьба, у кого есть такие дисплеи или imac с ретиной, зайти сюда www.mydevice.io (сайт безопасный, не реклама, показывает данные по вашему экрану) и прикрепить к сообщению скрин раздела My screen.
Спасибо!

Answer 1

[Fixid]

4к бывает разное

My screen
Sizes

CSS device-width : 1920px+
CSS device-height : 1080px+
JS screen.width : 5760px
JS window.innerWidth : 5750px
JS body.clientWidth : 5733px
JS screen.availWidth : 5760px

Pixel ratio

CSS pixel-ratio : 1
JS pixel-ratio : 1.0000

Resolution

Resolution (dpi) : 96.00dpi
Resolution (dppx) : 1.00dppx
Resolution (dpcm) : 37.80dpcm

Misc

Root font size : 16px
Orientation :
Device Aspect-Ratio : 5.33

Comments

[Алексей]

Вот я вижу кого-то плотность 96, а у кого-то 192. Получается, грубо говоря, точка в 1px размоется на экранах с большей плотностью пикселей?

[Fixid]

Вполне возможно, но вряд ли это будет видно на 40" и меньше

[DevMan]

Алексей: с чего ей размываться?
1px - он и в африке 1px. при любой плотности.

[Алексей]

DevMan: я неверно сформулировал. Я к тому, что иконка в 16px не будет выглядеть (например) одинаково четко на телефоне с 192ppi и на телефоне с 441ppi. Поэтому и нарезку иконок делают @2x, @3x. Я не знаю как обстоит дело с 4к дисплеями, поэтому и возник этот вопрос тут. Будет ли одна и та же иконка выглядеть так же четко на 4к дисплеях как и на FHD?

[Николай Шабалин]

DevMan: тут дело не в конкретном пикселе, а в их количестве на дюйм - плотность.

[DevMan]

Николай Шабалин: это к автору комента, который не может выразить свои мысль, а не ко мне.

[Николай Шабалин]

Алексей: с 4К дисплеями дела обстоят точно также как и на любом другом устройстве. 4К можно растянуть на 32", а можно и на 52", в конечно итоге вам нужно знать плотность и pixel-ratio устройства. В целом используйте SVG, а если нету возможности, то по старинке нарейзайте 1x, 2x, 3x, 4x - картинки.

[DevMan]

Алексей: с мониторами дело обстоит точно так же как и с телефонами.
единственный момент, что в отличие от телефона, монитор может быть установлен в hidpi или нет.

Answer 2

[Дмитрий]

iMac 27'' retina
https://www.dropbox.com/s/fq24qt1h08thu33/%D0%A1%D...