ThinkPHP #7: Оптимизация верстки для High-Density дисплеев

Transcript

1. Оптимизация верстки для High-Density дисплеев Евгений Котельницкий Отдел CMS, NIX Solutions Ltd.
2. План 1. Что такое Retina и HD дисплеи? 2. Проблемы вёрстки под HD 4. Рекомендации и приёмы вёрстки под HD 5. Как тестировать? 3. Методы и инструменты для вёрстки под HD
3. Что такое Retina display? Retina – это маркетинговое название дисплеев, используемых в устройствах Apple. Такие дисплеи отличаются высокой плотностью пикселов. Мы будем использовать более общее название – «HD-дисплей»! Модель PPI Разрешение Типичное расстояние просмотра iPod touch (45-е поколение), iPhone 4 / 4S 330 960×640 10 дюймов (25 см) iPod touch (5-е поколение), iPhone 5 326 1136×640 iPad 3 / 4 324 2048×1536 15 дюймов (38 см) MacBook Pro 15 (3-е поколение) 220 2880×1800 20 дюймов (51 см) MacBook Pro 13 (3-е поколение) 227 2560×1600 20 дюймов (51 см)
4. Что такое Retina display? Т.е. порог – это значение в 300 ppi? Нет, все не так просто. Роль играет расстояние от экрана до глаз пользователя для каждого конкретного устройства. http://appleinsider.ru/analysis/retina-displej-v-mac-ipad-i-hidpi-nemnogo-matematiki.html#
5. Введем несколько терминов Физические пиксели (device pixel или physical pixel) — привычные нам пиксели: самые маленькие элементы любого дисплея, каждый из которых имеет свой цвет и яркость. Плотность пикселей экрана (screen density) — это количество физических пикселей дисплея. Измеряется в пикселях-на-дюйм (PPI – pixels per inch). Nokia Lumia 710 – 252 ppi iPhone 5 – 326 ppi HTC Butterfly – 440 ppi LG Nexus 4 – 320 ppi …
6. Введем несколько терминов CSS пиксели - абстрактная величина, используемая браузерами для точного отображения контента на страницах, вне зависимости от экрана. Он же «Device-independent pixel» (DIP). <div width="2" height="2"></div>
7. Введем несколько терминов Соотношение сторон дисплея (device-aspect-ratio) – отношение ширины экрана к его высоте. Старые обычные мониторы – 4/3 Широкоформатные мониторы – 16/9 iPhone 5 – 40/71
8. Введем несколько терминов HTC Desire – 3/2 Galaxy Nexus – 2/1 HTC Butterfly – 3/1 Соотношение пикселей (device-pixel-ratio) – отношение количества физических пикселей экрана к количеству абстрактных CSS-пикселей. Дисплей, у которого соотношение пикселей больше 1 теоритически можно считать HD-дисплеем.
9. Какие проблемы возникают на HD-дисплеях? Ломается ли структура сайта на таких устройствах? Нет, структура сайта на таком дисплее не ломается и остаётся той же, что и на обычных дисплеях. А в чём же проблема? Проблема в том, что растровые изображения, неподготовленные специальным образом, на HD-дисплеях выглядят размытыми и пикселизированными.
10. HTML масштабирование (изначально грузим большую картинку и атрибутами HTML задаем размер) Чтобы показать фотографию 200x300 пикселей на экране с увеличенной плотностью пикселов, необходимо загрузить картинку размером 400x600 пикселей и уменьшить её, используя HTML атрибуты. <img src="example-400x600.png" width="200" height="300" /> Где использовать: на маленьких сайтах с несколькими изображениями. Плюсы метода:  простота реализации  кроссбраузерность Минусы метода:  устройства с обычными экранами будут скачивать лишние мегабайты  на обычных экранах четкость изображений может пострадать из-за алгоритмов сжатия Методы оптимизации изображений под HD-дисплеи
11. Методы оптимизации изображений под HD-дисплеи Определение плотности пикселей экрана с помощью JavaScript и подмена изображений Плюсы метода:  простота внедрения,  устройства с обычным дисплеем не скачивают лишние изображения,  контроль плотности пикселей на сайте Минусы метода:  Подмена изображений может быть заметна на устройствах с высокой плотностью пикселей $(document).ready(function(){ if (window.devicePixelRatio > 1) { var lowresImages = $('img'); images.each(function(i) { var lowres = $(this).attr('src'); var highres = lowres.replace(".", "@2x."); $(this).attr('src', highres); }); } }); Где использовать: для изображений в контенте.
12. Серверный метод: «отдаём» картинки для HD-устройств (в большем разрешении), например, на PHP. <script language="javascript"> if (window.devicePixelRatio > 1) { setCookie('devicePixelRatio', window.devicePixelRatio); document.location.reload(true); } </script> <?php if (!empty($_COOKIE['devicePixelRatio'])) { // выводим картинки с большим разрешением } ?> Плюсы метода:  Возможность полностью автоматизировать подготовку изображений Минусы метода:  При первой загрузке будет задержка на редирект  Необходимость в разработке на стороне сервера Методы оптимизации изображений под HD-дисплеи
13. Определение плотности пикселей экрана с помощью CSS media queries и подмена бэкграундов. Где использовать: на любых сайтах для подмены оформительных изображений – «бэкграундов». С помощью свойства min-device-pixel-ratio устанавливаем нужное соотношение между физическими и CSS-пикселями: @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min-device-pixel-ratio: 1.5) { .some-block { background-image: url(example@2x.png); background-size: 200px 300px; } } Методы оптимизации изображений под HD-дисплеи
14. Также можно комбинировать свойство min-device-pixel-ratio с другими свойствами медиа-очередей, например с min-width: @media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 320px), only screen and ( min--moz-device-pixel-ratio: 2) and (min-width: 320px), only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 320px), only screen and ( min-device-pixel-ratio: 2) and (min-width: 320px){ /* Mobile HD-display */ } Плюсы метода:  устройства не скачивают лишние изображения,  контроль плотности пикселей фоновых изображений Минусы метода:  утомительно внедрять, особенно на крупных сайтах Методы оптимизации изображений под HD-дисплеи
15. Использование векторной графики .SVG Подходит для иконок, логотипов и простых иллюстраций. SVG-изображение в HTML: <img src="example.svg" width="200" height="300" /> SVG-изображение на фоне: .image { background-image: url(example.svg); background-size: 200px 300px; } Плюсы метода:  единый набор изображений для всех устройств  простота реализации  бесконечное масштабирование Минусы метода:  не любую графику можно сделать векторной  Не поддерживается старыми браузерами  проблематично объединять в спрайты Методы оптимизации изображений под HD-дисплеи
16. Избавляемся от запросов, рисуем .SVG прямо в браузере. <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190"> <polygon points="100,10 40,180 190,60 10,60 160,180" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;"> </svg> Сервис для создания векторной графики с возможностью скопировать исходный код и вставить его на свой сайт: http://svg-edit.googlecode.com/svn/branches/2.6/editor/svg-editor.html# Методы оптимизации изображений под HD-дисплеи
17. Использование иконочных шрифтов Вариант 1 (символы внутри разметки HTML) Применяем нужный класс к определенному элементу страницы: <span class="some-icon">a</span> .some-icon { font-family: 'My-Icon-Font'; } Плюсы метода:  бесконечное масштабирование  более универсальное решение, чем набор графических элементов Минусы метода:  сложность реализации: отдельный символ шрифта к каждой иконке http://css-tricks.com Пример использования Вариант 2(символы внутри CSS) Используя псевдоэлемент :before с уникальным классом к каждой иконке: <span class="icon-heart"></span> [class^="icon-"]:before { font-family: 'My-Icon-Font'; } .icon-heart:before { content: 'h'; } Методы оптимизации изображений под HD-дисплеи
18. Инструменты и приёмы для оптимизации сайтов под HD-дисплеи Retinajs (http://retinajs.com/) К примеру, на странице есть какая-то картинка: <img src="/images/my_image.png" /> При открытии сайта на устройстве с HD-дисплеем, данный скрипт автоматически проверит, есть ли альтернативная картинка в формате: "/images/my_image@2x.png" Если такая картинка есть, скрипт заменит обычную картинку и добавит атрибуты размеров: <img src="images/icon-2@2x.png" width="256" height="256"/>
19. Инструменты и приёмы для оптимизации сайтов под HD-дисплеи Picturefill – JS библиотека, позволяющая отображать разные картинки в зависимости от ширины экрана и соотношения пикселей <div data-picture data-alt="Alt-text for image"> <div data-src="image-400.jpg" data-media="(max-width: 400px)"></div> <div data-src="image-400_x2.jpg" data-media="(max-width: 400px) and (max-device-pixel-ratio: 2.0)"> </div> <div data-src="image-800.jpg" data-media="(max-width: 800px)"></div> <div data-src="image-800_x2.jpg" data-media="(max-width: 800px) and (max-device-pixel-ratio: 2.0)"> </div> <!-- Fallback content for non-JS browsers --> <noscript> <img src="image.jpg"> </noscript> </div> Плюсы метода:  Экономим трафик  Уменьшаем кол-во HTTP запросов  Кроссбраузерное решение Минусы метода:  Очень многословная разметка
20. Инструменты и приёмы для оптимизации сайтов под HD-дисплеи Онлайн калькулятор подсчёта плотности пикселей дисплея Для подсчёта Вам нужно знать:  разрешение дисплея  длина диагонали в дюймах http://pixeldensitycalculator.com/#
21. Инструменты и приёмы для оптимизации сайтов под HD-дисплеи «Экономный» способ сохранения .jpg изображений для HD-дисплеев 1. Подготавливаем изображение в 2 раза больше требуемого 2. Сохраняем как .jpg с высокой компрессией (качество 30 - 40%) 3. Уменьшаем размеры изображения до нужных с помощью CSS или атрибутов HTML 4. Внешнее качество такой картинки повысится, а размер останется примерно тем же Оригинальный размер Качество 80% Размер 10Kb Картинка в 2 раза больше Качество 40% Размер 11Kb Картинка в 2 раза больше Качество 80% Размер 60Kb
22. Как тестировать? • Иметь свои устройства с HD-дисплеями и на них тестировать  • Попросить устройство у друга   • Opera Mobile Emulator + Dragon Fly Как подключить Dragon Fly к OperaMobileEmulator: http://www.opera.com/dragonfly/documentation/remote/#
23. Вопросы?
24. Спасибо!