Включение HiDPI режима

Разработчикам Общение разработчиков
1

Подскажите пож. кто знает по модулю HiDPI: где и как происходит определение видеорежима на основании которого сайт начинает грузить картинки с двойным разрешением?

Монитор 2K, стоит разрешение 2560×1440, но картинки выводятся в низком разрешении.
Когда-то давно, еще до перехода на 4.10 и до обновления самого модуля HiDPI, на таком разрешении выдавались картинки в двойном разрешении.

Если разрешение монитора больше (более 3000), то выдаются уже HiDPI картинки. Хочу отрегулировать этот “порог”, может кто-то уже делал такое?

2

Перед отображением картинки в шаблоне картинке добавляется новый параметр srcset с путем до картинки с высоким разрешением и постфиксом 2x

design/themes/responsive/templates/addons/hidpi/hooks/common/image.pre.tpl

Дальше сам браузер уже это все дело обрабатывает

3

HiDPI не зависит от разрешения. Он зависит от DPI. У изображений в шаблоне для каждого DPI задается свой файл изображения. Браузер сам выбирает тот, который ему нужен.

Для проверка DPI изображений:
Если открыть инструменты разработчика в Chrome в мобильном режиме, то сверху будет переключатель DPI. Если его нет, то нужно его включить в опциях сверху-справа.

2 лайка
4

Шаблон параметр srcset подставляет, и там указан верный путь к 2x картинке, но при этом браузер подгружает 1x картинку:

image
image693×363 31.5 KB

Т.е. это браузер считает, что разрешение недостаточно для перехода на 2x?
А на основании чего он так считает? Где-то должно быть соответствие этого DPI и таблице изображений?

Я сейчас проверяю в Опере, и такая же ситуация в новом Edge, и речь про десктопный режим.
Сейчас попробую еще поставить Crome для эксперимента

5

Нашел где собака порылась:

Если поменять настройки масштабирования экрана системы в Win10 либо на 100%, либо на 150% - тогда все работает корректно, картинки грузятся в 2x.

image
image892×784 18.8 KB

А если оставить на 125% (как рекомендуется), тогда и есть такая проблема.
Только теперь непонятно кто виноват :slight_smile:

1 лайк
6

кем рекомендуется?

7

:slight_smile:
Наверное, Микрософтом, исходя из размеров экрана, разрешения…

Ну оно так и есть, если поставить 100% - то всё слишком мелкое, если 150% - наоборот - огромное. 125% тут как раз оптимально. Можно еще и промежуточные значения вводить, но на выдачу в браузере это не влияет.
Многие сайты выдают картинки в повышенном разрешении, и на текущем мониторе. А вот свой сайт на нашей CMS картинки выдает коряво.
Вот и хочу понять как и где что-то можно поправить.

8

Если взять 4K (3840 × 2160) дисплей и использовать для него FullHD (1920 × 1080) разрешение, то получится HiDPI потому, что:

  • 1920 * 2 = 3840
  • 1080 * 2 = 2160

Т. е. для одного 1 логического (CSS) пикселя используется 4 (2 × 2) физических пикселя.

9

Разобрался.
Для 4K дисплеев всё так и работает, и размеры изображения умножаются на 2.
Зато 2K дисплеи подпадают, как и обычные 1K - под стандартное разрешение, в результате картинки на таком 2K мониторе выглядят убого (смазанно).

Я модифицировал шаблон image.pre.tpl модуля hidpi, чтобы генерировались также и 2K превьюшки (размеры умножаются на 1.5) и в srcset добавлялся путь к этим превьюшкам:

{$width = $image_data.width * 1.5}
{$height = $image_data.height * 1.5}
{$image_data1.5x = $images|fn_image_to_display:$width:$height}
...
{$image_additional_attrs[$attr_name] = "{$image_data1.5x.image_path} 1.5x, {$image_data2x.image_path} 2x" scope=parent}

Теперь в srcset присутствуют два пути и браузер корректно выбирает что грузить на каком мониторе - на 2K грузятся картинки с постфиксом 1.5x, а на 4K - с постфиксом 2x

3 лайка