Поделитесь рецептами для retina-дисплеев

Как рендерить картинки в двух разрешениях: обычном и @2x.jpg для ретина дисплеев с помощью pthumb, phpthumon и прочих? Как решаете этот вопрос?

Мое решение не без недостатков: рендерить сразу в @2x, а потом через CSS переопределять размеры.

Роман Ильин

22 июля 2016, 09:00

3 231

Комментарии: 25

Григорий Коленько

22 июля 2016, 19:48

Media queries, тег pictureв, достаточно загуглить на хабре. Там это разжевано уже давно

Григорий Коленько

23 июля 2016, 10:51

Для иконок где возможно — лучше сгенерировать иконочные шрифты или svg спрайты

Волков Николай

25 июля 2016, 00:43

Лучше просто прогнать через специальные сервисы, вроде www.fontsquirrel.com/tools/webfont-generator
В итоге иконки будут в форматах, которые значительно легче, чем SVG, вроде WOFF2, т.к. в них не храненится значения для векторов в плоскости Z и т.д.

Іван Клімчук

23 июля 2016, 10:02

Если особо не париться по поводу размера, то можно просто в 2 раза увеличивать картинку. В случае небольших превью это не критично.

Григорий Коленько

23 июля 2016, 10:50

Ну как не критично. Количество трафика увеличивается в 2 раза. Немного запариться стоит. Да и учитывая, что для генерации ретина-спрайтов, к примеру, средств полно, времени такая оптимизация почти не занимает :)

Волков Николай

25 июля 2016, 00:40

Почему в 2? Разрешение ретина картинок в 2 раза больше по ширине и по высоте, поэтому в 4 может быть спокойно, к примеру для PNG

Григорий Коленько

25 июля 2016, 00:59

Не спорю. Увеличивать трафик на пустом месте совсем не по-феншую :)

Сергей Шлоков

23 июля 2016, 12:22

Для этих целей пригодится srcset.

Роман Ильин

23 июля 2016, 15:54

Прекрасно! Спасибо!

23 июля 2016, 14:30

Сами изображения подготавливаю с помощью phpThumbOn. А в коде вывожу вот так:

<img src="обычное изображение" data-retina="изображение для мониторов, поддерживающих ретину" alt="" />

Григорий Коленько

23 июля 2016, 21:35

У тебя ещё скрипт какой-то висит, который src подменяет? Зачем?

23 июля 2016, 22:51

Да, скрипт для подмены:

var $images = $("[data-retina]");
 
 if (window.devicePixelRatio > 1) {
 $.each($images, function() {
 var $this = $(this);
 
 $this.attr("src", $this.data("retina"));
 });
 }

Григорий Коленько

24 июля 2016, 02:58

Ну вот я и спрашиваю зачем делать на js? Тем более эта конструкция не будет работать с Ajax. Все устройства с ретина экранами поддерживают нативные возможности последнего стандарта html

Волков Николай

25 июля 2016, 00:39

А устройства без Retina все поддерживают?

Григорий Коленько

25 июля 2016, 00:57

Устройства без ретины просто покажут обычную картинку. Тег picture или srcset просто не отработают. Обратная совместимость есть.

Волков Николай

25 июля 2016, 01:05

Тег picture обработают, но как div, а srcset, проигнорируют, да. Кстати на счёт АЯКСа было сказано, что вариант на JS не отрабатывает… Это почему? Что мешает повесить на событие успеха выполнения запроса выполнение скрипта для замены картинок на ретине?

Григорий Коленько

25 июля 2016, 11:35

Понятное дело, что можно, но не в представленной тут реализации :)
Ну и мне не совсем ясно, зачем писать реализацию на js, если есть нативная.

Волков Николай

25 июля 2016, 11:44

Ну, как минимум скорость загрузки страницы, т.к. JS добавит ссылки на изображения и начнёт их грузить уже после того, как будет загружена страница. На тяжелых галереях или слайдерах самое оно. Плюс в слайдерах можно реализовать не просто подгрузку обычной/ретина версии, но и разрешение картинки под экран. Следовательно для экранов 1366х768 не будут грузиться под 1920х1080 картинкт, что может прилично съэкономить скорость готовности страницы

Григорий Коленько

25 июля 2016, 22:19

Картинки грузятся отдельным потоком. Скорость загрузки с подменой js'Ом ты только замедлишь.
По поводу загрузки под разные экраны. Поддерживает медиа-выражения. Там хоть пол десять экранов изображения пропиши. Никаких костылей. Все нативно.

Григорий Коленько

25 июля 2016, 23:55

<picture>
 <source srcset="mdn-logo-wide.png" media="(min-width: 600px)">
 <img src="mdn-logo-narrow.png" alt="MDN">
</picture>

**Поддерживает медиа-выражения…
Jevix вырезал

Волков Николай

25 июля 2016, 00:33

В скрипте плохой способ для проверки экрана:

if (window.devicePixelRatio > 1) {

Я бы порекомендовал написать отдельные функции и потом, где нужно их вызывать:

function isHighDensity(){
	return ((window.matchMedia && (window.matchMedia('only screen and (min-resolution: 124dpi), only screen and (min-resolution: 1.2dppx), only screen and (min-resolution: 48.8dpcm)').matches || window.matchMedia('only screen and (-webkit-min-device-pixel-ratio: 1.1), only screen and (-o-min-device-pixel-ratio: 2.4/2), only screen and (min--moz-device-pixel-ratio: 1.1), only screen and (min-device-pixel-ratio: 1.1)').matches)) || (window.devicePixelRatio && window.devicePixelRatio > 1.1));
}
    
    
function isRetina(){
	return ((window.matchMedia && (window.matchMedia('only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx), only screen and (min-resolution: 75.6dpcm)').matches || window.matchMedia('only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2)').matches)) || (window.devicePixelRatio && window.devicePixelRatio >= 2)) && /(iPad|iPhone|iPod)/g.test(navigator.userAgent);
}

if (isRetina()) {
//	Делаем, что надо
}

Волков Николай

25 июля 2016, 00:24

Лично я делаю так:
1) Для не ключевых картинок, вроде логотипа и т.п. Я вместо src картинки прописываю ссылку на какую-нибудь gif, где анимация загрузки. Далее, прописываю аттрибуты data-original и data-retina-original в которых значениями являются ссылки на картинки в обычном разрешении и в ретиновском (при этом для них для pthumb или др. ресайзеров я указываю, чтобы они на выходе качество процентов на 20-30 ниже давали, чем для обычных).
2) Подключаю JS скрипт LazyLoad, который загружает картинки уже после загрузки самой страницы (но он их берет из data-original и не в курсе про вариант для ретины).
3) Чтобы решить проблему прошлого пункта, пишется простой JS скрипт, который выполняется раньше LazyLoad и анализирует экран посетителя сайта и, если нужно, то тупо в data-original устанавливает значение из data-retina-original.
4) А для картинок, вроде Логотипа и т.п. Я первоначально делаю вдвое-втрое большего разрешения картинки.

Григорий Коленько

25 июля 2016, 00:28

У пользователя сломался js. Все. Он ничего не увидит :)

Волков Николай

25 июля 2016, 00:38

Давно я такого не видел :-) Но в таком случае есть маленькая проблема:
Вариант 1: Мы выставляем в src ссылки на картинки с вдвое большим разрешением. Это не айс, т.к. получается, что людям с обычным экраном нужно грузить прилично более тяжелые картинки
Вариант 2: Мы ставим обычные картинки, тогда людям с ретиной придется загружать обе версии картинок, т.к. браузеру по фиг на JS и он сначала загрузит обычные версии, а потом JS вместо них воткнет Retina версии.
Вариант 3: Использовать , но тут вопрос в поддержке браузерами.

Волков Николай

25 июля 2016, 00:39

Но тем не менее, я что-то об этом не задумывался, спасибо за мысль.

Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.

Поделитесь рецептами для retina-дисплеев

Комментарии: 25

Здесь упомянуты