$30 off During Our Annual Pro Sale. View Details »

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

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

thinkphp_com_ua

July 25, 2013
Tweet

More Decks by thinkphp_com_ua

Other Decks in Programming

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([email protected]);
    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/[email protected]"
    Если такая картинка есть, скрипт заменит обычную картинку и добавит
    атрибуты размеров:

    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