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

Transcript

1. Оптимизация верстки
   для High-Density дисплеев
   Евгений Котельницкий
   Отдел CMS, NIX Solutions Ltd.
   

   View Slide

2. План
   1. Что такое Retina и HD дисплеи?
   2. Проблемы вёрстки под HD
   4. Рекомендации и приёмы вёрстки под HD
   5. Как тестировать?
   3. Методы и инструменты для вёрстки под HD
   

   View Slide

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 см)
   

   View Slide

4. Что такое Retina display?
   Т.е. порог – это значение в 300 ppi? Нет, все не так просто.
   Роль играет расстояние от экрана до глаз пользователя для каждого
   конкретного устройства.
   http://appleinsider.ru/analysis/retina-displej-v-mac-ipad-i-hidpi-nemnogo-matematiki.html#
   

   View Slide

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
   …
   

   View Slide

6. Введем несколько терминов
   CSS пиксели - абстрактная величина, используемая браузерами для
   точного отображения контента на страницах, вне зависимости от экрана.
   Он же «Device-independent pixel» (DIP).
   
   

   View Slide

7. Введем несколько терминов
   Соотношение сторон дисплея (device-aspect-ratio) – отношение
   ширины экрана к его высоте.
   Старые обычные мониторы – 4/3
   Широкоформатные мониторы – 16/9
   iPhone 5 – 40/71
   

   View Slide

8. Введем несколько терминов
   HTC Desire – 3/2
   Galaxy Nexus – 2/1
   HTC Butterfly – 3/1
   Соотношение пикселей (device-pixel-ratio) – отношение количества
   физических пикселей экрана к количеству абстрактных CSS-пикселей.
   Дисплей, у которого соотношение пикселей больше 1 теоритически
   можно считать HD-дисплеем.
   

   View Slide

9. Какие проблемы возникают на
   HD-дисплеях?
   Ломается ли структура сайта на таких устройствах?
   Нет, структура сайта на таком дисплее не ломается и остаётся той же, что и на
   обычных дисплеях.
   А в чём же проблема?
   Проблема в том, что растровые изображения, неподготовленные специальным
   образом, на HD-дисплеях выглядят размытыми и пикселизированными.
   

   View Slide

10. HTML масштабирование (изначально грузим большую картинку и атрибутами
    HTML задаем размер)
    Чтобы показать фотографию 200x300 пикселей на экране с увеличенной
    плотностью пикселов, необходимо загрузить картинку размером 400x600
    пикселей и уменьшить её, используя HTML атрибуты.
    
    Где использовать: на маленьких сайтах с несколькими изображениями.
    Плюсы метода:
     простота реализации
     кроссбраузерность
    Минусы метода:
     устройства с обычными экранами будут
    скачивать лишние мегабайты
     на обычных экранах четкость изображений
    может пострадать из-за алгоритмов сжатия
    Методы оптимизации изображений
    под HD-дисплеи
    

    View Slide

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);
    });
    }
    });
    Где использовать: для изображений в контенте.
    

    View Slide

12. Серверный метод: «отдаём» картинки для HD-устройств (в большем
    разрешении), например, на PHP.
    <br/>if (window.devicePixelRatio > 1) {<br/>setCookie('devicePixelRatio', window.devicePixelRatio);<br/>document.location.reload(true);<br/>}<br/>
    if (!empty($_COOKIE['devicePixelRatio'])) {
    // выводим картинки с большим разрешением
    }
    ?>
    Плюсы метода:
     Возможность полностью автоматизировать
    подготовку изображений
    Минусы метода:
     При первой загрузке будет задержка на
    редирект
     Необходимость в разработке на стороне
    сервера
    Методы оптимизации изображений
    под HD-дисплеи
    

    View Slide

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-дисплеи
    

    View Slide

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-дисплеи
    

    View Slide

15. Использование векторной графики .SVG
    Подходит для иконок, логотипов и простых
    иллюстраций.
    SVG-изображение в HTML:
    
    SVG-изображение на фоне:
    .image {
    background-image: url(example.svg);
    background-size: 200px 300px;
    }
    Плюсы метода:
     единый набор изображений для всех
    устройств
     простота реализации
     бесконечное масштабирование
    Минусы метода:
     не любую графику можно сделать
    векторной
     Не поддерживается старыми браузерами
     проблематично объединять в спрайты
    Методы оптимизации изображений
    под HD-дисплеи
    

    View Slide

16. Избавляемся от запросов, рисуем .SVG прямо в браузере.
    
    style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">
    
    Сервис для создания векторной графики с возможностью скопировать исходный код
    и вставить его на свой сайт: http://svg-edit.googlecode.com/svn/branches/2.6/editor/svg-editor.html#
    Методы оптимизации изображений
    под HD-дисплеи
    

    View Slide

17. Использование иконочных шрифтов
    Вариант 1 (символы внутри разметки HTML)
    Применяем нужный класс к определенному
    элементу страницы:
    a
    .some-icon {
    font-family: 'My-Icon-Font';
    }
    Плюсы метода:
     бесконечное масштабирование
     более универсальное решение, чем набор
    графических элементов
    Минусы метода:
     сложность реализации: отдельный
    символ шрифта к каждой иконке
    http://css-tricks.com
    Пример использования
    Вариант 2(символы внутри CSS)
    Используя псевдоэлемент :before с
    уникальным классом к каждой иконке:
    
    [class^="icon-"]:before {
    font-family: 'My-Icon-Font';
    }
    .icon-heart:before {
    content: 'h';
    }
    Методы оптимизации изображений
    под HD-дисплеи
    

    View Slide

18. Инструменты и приёмы для оптимизации
    сайтов под HD-дисплеи
    Retinajs (http://retinajs.com/)
    К примеру, на странице есть какая-то картинка:
    
    При открытии сайта на устройстве с HD-дисплеем, данный скрипт
    автоматически проверит, есть ли альтернативная картинка в формате:
    "/images/my_image@2x.png"
    Если такая картинка есть, скрипт заменит обычную картинку и добавит
    атрибуты размеров:
    
    

    View Slide

19. Инструменты и приёмы для оптимизации
    сайтов под HD-дисплеи
    Picturefill – JS библиотека, позволяющая отображать разные картинки в зависимости от
    ширины экрана и соотношения пикселей
    
    
    
    
    
    
    
    
    
    
    
    
    Плюсы метода:
     Экономим трафик
     Уменьшаем кол-во HTTP запросов
     Кроссбраузерное решение
    Минусы метода:
     Очень многословная разметка
    

    View Slide

20. Инструменты и приёмы для оптимизации
    сайтов под HD-дисплеи
    Онлайн калькулятор подсчёта плотности пикселей дисплея
    Для подсчёта Вам нужно знать:
     разрешение дисплея
     длина диагонали в дюймах
    http://pixeldensitycalculator.com/#
    

    View Slide

21. Инструменты и приёмы для оптимизации
    сайтов под HD-дисплеи
    «Экономный» способ сохранения .jpg изображений для HD-дисплеев
    1. Подготавливаем изображение в 2 раза больше требуемого
    2. Сохраняем как .jpg с высокой компрессией (качество 30 - 40%)
    3. Уменьшаем размеры изображения до нужных с помощью CSS или атрибутов HTML
    4. Внешнее качество такой картинки повысится, а размер останется примерно тем же
    Оригинальный размер
    Качество 80%
    Размер 10Kb
    Картинка в 2 раза больше
    Качество 40%
    Размер 11Kb
    Картинка в 2 раза больше
    Качество 80%
    Размер 60Kb
    

    View Slide

22. Как тестировать?
    • Иметь свои устройства с HD-дисплеями и на
    них тестировать 
    • Попросить устройство у друга  
    • Opera Mobile Emulator + Dragon Fly
    Как подключить Dragon Fly к OperaMobileEmulator:
    http://www.opera.com/dragonfly/documentation/remote/#
    

    View Slide

23. Вопросы?
    

    View Slide

24. Спасибо!
    

    View Slide