300 ppi? Нет, все не так просто. Роль играет расстояние от экрана до глаз пользователя для каждого конкретного устройства. http://appleinsider.ru/analysis/retina-displej-v-mac-ipad-i-hidpi-nemnogo-matematiki.html#
— привычные нам пиксели: самые маленькие элементы любого дисплея, каждый из которых имеет свой цвет и яркость. Плотность пикселей экрана (screen density) — это количество физических пикселей дисплея. Измеряется в пикселях-на-дюйм (PPI – pixels per inch). Nokia Lumia 710 – 252 ppi iPhone 5 – 326 ppi HTC Butterfly – 440 ppi LG Nexus 4 – 320 ppi …
2/1 HTC Butterfly – 3/1 Соотношение пикселей (device-pixel-ratio) – отношение количества физических пикселей экрана к количеству абстрактных CSS-пикселей. Дисплей, у которого соотношение пикселей больше 1 теоритически можно считать HD-дисплеем.
таких устройствах? Нет, структура сайта на таком дисплее не ломается и остаётся той же, что и на обычных дисплеях. А в чём же проблема? Проблема в том, что растровые изображения, неподготовленные специальным образом, на HD-дисплеях выглядят размытыми и пикселизированными.
размер) Чтобы показать фотографию 200x300 пикселей на экране с увеличенной плотностью пикселов, необходимо загрузить картинку размером 400x600 пикселей и уменьшить её, используя HTML атрибуты. <img src="example-400x600.png" width="200" height="300" /> Где использовать: на маленьких сайтах с несколькими изображениями. Плюсы метода: простота реализации кроссбраузерность Минусы метода: устройства с обычными экранами будут скачивать лишние мегабайты на обычных экранах четкость изображений может пострадать из-за алгоритмов сжатия Методы оптимизации изображений под 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); }); } }); Где использовать: для изображений в контенте.
на PHP. <script language="javascript"> if (window.devicePixelRatio > 1) { setCookie('devicePixelRatio', window.devicePixelRatio); document.location.reload(true); } </script> <?php if (!empty($_COOKIE['devicePixelRatio'])) { // выводим картинки с большим разрешением } ?> Плюсы метода: Возможность полностью автоматизировать подготовку изображений Минусы метода: При первой загрузке будет задержка на редирект Необходимость в разработке на стороне сервера Методы оптимизации изображений под HD-дисплеи
подмена бэкграундов. Где использовать: на любых сайтах для подмены оформительных изображений – «бэкграундов». С помощью свойства 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-дисплеи
с 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-дисплеи
иллюстраций. SVG-изображение в HTML: <img src="example.svg" width="200" height="300" /> SVG-изображение на фоне: .image { background-image: url(example.svg); background-size: 200px 300px; } Плюсы метода: единый набор изображений для всех устройств простота реализации бесконечное масштабирование Минусы метода: не любую графику можно сделать векторной Не поддерживается старыми браузерами проблематично объединять в спрайты Методы оптимизации изображений под HD-дисплеи
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-дисплеи
нужный класс к определенному элементу страницы: <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-дисплеи
К примеру, на странице есть какая-то картинка: <img src="/images/my_image.png" /> При открытии сайта на устройстве с HD-дисплеем, данный скрипт автоматически проверит, есть ли альтернативная картинка в формате: "/images/[email protected]" Если такая картинка есть, скрипт заменит обычную картинку и добавит атрибуты размеров: <img src="images/[email protected]" width="256" height="256"/>
сохранения .jpg изображений для HD-дисплеев 1. Подготавливаем изображение в 2 раза больше требуемого 2. Сохраняем как .jpg с высокой компрессией (качество 30 - 40%) 3. Уменьшаем размеры изображения до нужных с помощью CSS или атрибутов HTML 4. Внешнее качество такой картинки повысится, а размер останется примерно тем же Оригинальный размер Качество 80% Размер 10Kb Картинка в 2 раза больше Качество 40% Размер 11Kb Картинка в 2 раза больше Качество 80% Размер 60Kb
них тестировать • Попросить устройство у друга • Opera Mobile Emulator + Dragon Fly Как подключить Dragon Fly к OperaMobileEmulator: http://www.opera.com/dragonfly/documentation/remote/#