Комментарии 8
с индексом
@1xдля обычных дисплеев и@2x— для дисплеев, плотность пикселей которых в два раза выше. Обычно этих индексов достаточно. Но в некоторых проектах идут дальше и используют отдельную графику с индексом@3x
Плотность 3x имеют следующие устройства: iPhone 6 Plus - 8 Plus, Xs Max, 11 Pro Max - 13 Pro Max, iPhone 12, 13.
Так что говорить что 2x достаточно немного не корректно.
Может возникнуть вопрос по поводу 3x в старых iPhone, формально плотность экрана там меньше (где-то 2,5). В этих телефонах картинка рисуется исходя из плотности 3х, а затем при отображении на экране она масштабируется
Визуально разница в растровой графике между 2x и 3x, имхо, незначительна. По весу же - примерно в два раза больше. А так как iPhone - мобильные устройства, и на них неплохо было бы экономить трафик для повышения скорости загрузки через мобильную сеть, я поддержу, что 2x - достаточно и для экранов с более высокой плотностью пикселей.
Даже Apple в своих лендингах, используя изображения для вау-эффекта, останавливается на 2x.
А ещё много ноутов по windows где по-умолчанию включается масштабирование 125% и 150%. Поэтому я бы рекомендовал 2x картинку начиная уже с min-resolution: 1.5dppx или даже 1.25 dppx.
Для фоток переход 2х-3х дает не особо значительный прирост визуального качества (намного меньше, чем 1х-2х), и гораздо больше лишнего веса. Обычно это не оправдано.
Большой ppx однозначно полезен для иконок, но сейчас их стараются делать в SVG.
Так что всё верно написано — картинки 3х+ это либо для каких-то специфических случаев, либо если перфекционизм покоя не дает.
Почему 1х-картинки на ретине выглядят как дерьмо?
На не-ретине с бОльшим физичиским размером выглядит же нормально.
>> PPI — Pixels per Inch. Она показывает количество физических пикселей на квадратном дюйме экрана.
Откуда в русской трактовке появилось "квадратном" ? Ну режет глаз же...
Что нужно знать о вёрстке под ретину