Ретина LCD дисплей, что это такое, его устройство и преимущества.

  • Перевод

После недавнего выпуска Retina MacBook Pro и The new IPad, экраны с увеличенной плотностью пикселей начали активно входить в нашу жизнь. Что это значит для веб-разработчиков?

Для начала разберемся в терминологии.

Физические пиксели

Физические пиксели (device pixel или physical pixel) - привычные нам пиксели: самые маленькие элементы любого дисплея, каждый из которых имеет свой цвет и яркость.

Плотность экрана (Screen density) - это количество физических пикселей дисплея. Обычно измеряется в пикселях-на-дюйм (PPI: pixels per inch). Apple, разработав Retina-экраны с двойной плотностью пикселей, утверждает, что человеческий глаз не способен различить бо′льшую плотность.

CSS-пиксели


CSS-пиксели (CSS pixels) - абстрактная величина, используемая браузерами для точного отображения контента на страницах, вне зависимости от экрана (DIPs: device-independent pixels). Пример:


Такой блок на обычных экранах будет занимать область 200x300 пикселей, а на Retina-экранах тот же блок получит 400x600 пикселей.Таким образом, на Retina-экранах плотность пикселей в 4 раза больше, чем на обычных:

Соотношение между физическими и CSS-пикселями можно устанавливать так:
device-pixel-ratio, -o-device-pixel-ratio, -moz-device-pixel-ratio, -Webkit-device-pixel-ratio { … }

Или так:
device-pixel-ratio, -o-min-device-pixel-ratio, min--moz-device-pixel-ratio, -Webkit-min-device-pixel-ratio { … }

В Javascript добиться этого можно, используя
window.devicePixelRatio

Растровые пиксели



Растровые пиксели (bitmap pixels) - самые маленькие части, составляющие растровое изображение (PNG, JPF, GIF и т.д.) Каждый пиксель содержит информацию, о цвете и расположении в системе координат изображения. В некоторых форматах пиксель может содержать дополнительную информацию, например, прозрачность.

Кроме растрового разрешения, изображения в интернете имеют абстрактные размеры в CSS-пикселях. Браузер сжимает или растягивает изображении в соответствии с его CSS-шириной и -длиной. При отображении на обычном экране один растровый пиксель соответствует одному CSS-пикселю. На Retina-экранах каждый растровый пиксель умножается в 4 раза:

Оптимизация

Существует несколько способов оптимизации графики для отображения на Retina-экранах. Каждый имеет и плюсы, и минусы, необходимо в каждом конкретном случае выбирать, что имеет больший приоритет: производительность, простота реализации, поддержка браузерами или какие-то другие параметры.

HTML и CSS-масштабирование

Самый простой способ подготовить графику к Retina-дисплею - это просто разделить пополам физические размеры изображения. Например, чтобы показать фотографию 200x300 пикселей на экране с увеличенной плотностью пикселов, необходимо загрузить фото размером 400x600 пикселей и уменьшить его, используя CSS-аттрибуты или HTML-параметры. Таким будет отображение на обычном экране:

А таким на Retina:

Есть несколько способов реализации HTML и CSS-масштабирования:

HTML

Самый простой способ - просто задать параметры width и height тегу img:

Где использовать: на одностраничных сайтах с несколькими изображениями.

Javascript

Такого же результата можно добиться, используя Javascript для того, чтобы делить пополам размеры изображений для Retina-экранов. С использованием библиотеки jQuery это выглядит так:
$(window).load(function() { var images = $("img"); images.each(function(i) { $(this).width($(this).width() / 2); }); });

Где использовать: на сайтах с несколькими изображениями в контенте.

CSS (SCSS)

Также можно использовать изображение в качестве фона с необходимыми размерами (background-size) определенного div"а. Параметр background-size не поддерживается в IE 7 и 8.
.image { background-image: url([email protected]); background-size: 200px 300px; /* Alternatively background-size: contain; */ height: 300px; width: 200px; }

Можно использовать псевдоэлементы:before или:after
.image-container:before { background-image: url([email protected]); background-size: 200px 300px; content:""; display: block; height: 300px; width: 200px; }

Техника работает и при использовании спрайтов:
.icon { background-image: url([email protected]); background-size: 200px 300px; height: 25px; width: 25px; &.trash { background-position: 25px 0; } &.edit { background-position: 25px 25px; } }

Где использовать: на сайтах с ограниченным количеством фоновых изображений (например одним в качестве спрайта).

HTML и CSS-масштабирование: плюсы

  • Простота реализации
  • Кроссбраузерность

HTML и CSS-масштабирование: минусы

  • Устройства с обычными экранами будут скачивать лишние мегабайты
  • На обычных экранах четкость изображений может пострадать из-за алгоритмов сжатия
  • Параметр background-size не поддерживается в IE 7 и 8.

Определение плотности пикселей экрана



Возможно это самый популярный способ оптимизации графики для Retina-дисплеев. Используется CSS или Javascript.

CSS

В этом способе используется device-pixel-ratio, чтобы установить нужное соотношение между физическими и CSS-пикселями:
.icon { background-image: url(example.png); background-size: 200px 300px; height: 300px; width: 200px; } @media only screen and (-Webkit-min-device-pixel-ratio: 1.5), only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min-device-pixel-ratio: 1.5) { .icon { background-image: url([email protected]); } }

Где использовать: на сайтах или в приложениях, в которых применяется background-image для элементов дизайна. Не подходит для изображений внутри контента.

Плюсы

  • Кроссбраузерность

Минусы

  • Утомительно внедрять, особенно на крупных сайтах
  • Использование изображения контента в качестве фона семантически некорректно

Javascript

Того же результата можно добиться, используя window.devicePixelRatio:
$(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); }); } });

Существует специальный Javascript плагин Retina.js , который умеет делать все вышеописанное, но с дополнительными возможностями, такими как пропуск внешних изображений и пропуск внутренних, но не имеющих retina-копий.

Где использовать: на любых сайтах с изображениями в контенте.

Плюсы

  • Простота внедрения
  • Устройства не скачивают лишние изображения
  • Контроль плотности пикселей на сайте

Минусы

  • Retina-устройства скачивают оба варианта каждого изображения
  • Подмена изображений заметна на retina-устройствах
  • Не работает в некоторых популярных браузерах (IE и Firefox)

Масштабируемая векторная графика


Вне зависимости от используемого метода растровые изображения по своей природе остаются ограниченными в масштабировании. Тут нам может помощь векторная графика. SVG (Scalable Vector Graphics) формат на основе XML поддерживается большинством браузеров. Самый простой способ использования SVG-изображений - в теге img или CSS-параметрами background-image и content:url().

В этом примере простое SVG-изображение может быть как угодно масштабировано:

То же самое получится с применением CSS:
/* Использование фонового изображения */ .image { background-image: url(example.svg); background-size: 200px 300px; height: 200px; width: 300px; } /* Использование content:url() */ .image-container:before { content: url(example.svg); /* width and height do not work with content:url() */ }

Для поддержки IE 7 или 8 и Android 2.x потребуется использование заменяющих PNG-изображений. Это можно легко сделать с помощью Modernizr :
.image { background-image: url(example.png); background-size: 200px 300px; } .svg { .image { background-image: url(example.svg); } }

Для лучшей кроссбраузерности, чтобы избежать проблем растеризации в Firefox и Opera, следует сделать каждое SVG- изображение соответствующим его родительскому HTML-элементу.

В HTML можно реализовать аналогичное с помощью нужного data в теге a:

С использованием jQuery и Modernizr:
$(document).ready(function(){ if(!Modernizr.svg) { var images = $("img"); images.each(function(i) { $(this).attr("src", $(this).data("png-fallback")); }); } });

Где использовать: на любых сайтах, подходит для иконок, логотипов и простых векторных иллюстраций.

Плюсы

  • Единый набор изображений для всех устройств
  • Простота реализации
  • Бесконечное масштабирование

Минусы

Иконочные шрифты



Популярный благодаря

В 2010 году Apple изменила наше представление о дисплеях для мобильных – iPhone 4 получил экран с уникальной на тот момент технологией Retina. Шесть лет спустя купертиновцы представили еще одну совершенно новую разработку для дисплеев – . Чем они отличаются друг от друга – и что выбирать нам, обычным пользователям?

Вконтакте

Что такое Retina-дисплей?

Retina (рéтина) - маркетинговый термин Apple, в переводе с английского означает «сетчатка». Он подразумевает под собой следующее: плотность точек-пикселей на экране высока настолько, что человеческий глаз неспособен различить на картинке отдельные пиксели. При этом за названием «Retina» не скрываются конкретные характеристики – например, определенное количество пикселей или точное разрешение дисплея.

Первым смартфоном с Retina-дисплеем стал iPhone 4. Он получил разрешение 960 × 640 пикселей, чего было более чем достаточно для 3,5-дюймового дисплея - ведь на один дюйм там приходилось 326 пикселей (показатель PPI, pixel per inch).

Кстати, на самом деле дисплеи Apple разрабатывались не на основе PPI, а на основе параметра pixel-per-degree (PPD, пиксель на градус). Он лучше определяет способность человеческого глаза различать детали на определенном расстоянии. При создании этого показателя принимаются в расчет разрешение экрана и угол обзора. Показатель PPD у iPhone 4 составлял 57.

Когда в 2012 году вышел первый MacBook Pro с Retina-дисплеем, он получил рекордное по тем временам разрешение 2 880 × 1 800 пикселей на 15,4-дюймовом экране. Показатель PPI при этом оказался даже ниже, чем у iPhone 4 (220 против 326), но PPD был выше - 79.

Наглядное сравнение разрешения iPhone 3Gs (обычный дисплей) и iPhone 4s (ретина-дисплей):

Сегодня практически все устройства Apple обладают Retina-дисплеем. Потребителю это ровным счетом ничего не говорит о том, сколько именно пикселей на дюйм (или градус) он получит — ведь экран Apple Watch очень отличается от монитора iMac. Но это и не важно - ведь надпись «Retina» означает, что вы не разглядите на экране пикселей , т.е. будете наслаждаться качественной картинкой при любых обстоятельствах. Многим ли нужно больше?

Более подробно о технологии

Что такое True Tone-дисплей?

В отличие от терминов вроде HD, 4К, Retina и т.п., «True Tone» не имеет ничего общего с количеством пикселей на экране. Его сфера ответственности - цвета и контраст . Главная задача - сделать так, чтобы идеально белый цвет всегда оставался идеальном белым, при любом внешнем освещении. А чем более «белым» будет дисплей, тем он будет и более контрастным.

Вы замечали, что свет утром имеет немного красноватый оттенок, а в середине дня - желтоватый? Нет? Логично – ведь наш мозг специально «отфильтровывает» оттенки.

Современные экраны хорошо отражают свет, но наш мозг этого не замечает и по-прежнему пытается фильтровать то, чего нет. В результате страдает наше восприятие цветов на экране. True Tone компенсирует это путем добавления на дисплей теплых оттенков. Мозг с радостью фильтрует картинку – и мы получаем «настоящий» белый цвет, «как лист бумаги формата А4».

Более подробно о технологии True Tone мы рассказывали .

Retina дисплеи и недавно появившиеся Retina HD дисплеи - часто упоминаются при обсуждении продуктов Apple. В этой статье постараемся определить различия данных типов дисплеев, и стоят ли эти дисплеи тех денег, которые за них просят.

Что такое Retina диспдей? Или, какое определение является точным для дисплеев с таким названием?

Retina дисплей - это больше маркетинговый ход, чем технический термин, но и определение данному понятию можно дать: это экран, использующийся в вычислительном устройстве, который имеет высокую плотность пикселей, при которой человеческий глаз не может разглядеть отдельные пиксели. Другими словами, предполагается, что человек не сможет увидеть разницу между фотографией картины, показанной на экране Retina, и самой картиной. Но это только в теории.

Retina - это собственность Apple. Другие компании могут производить экраны с такими же техническими характеристиками, но назвать их Retina, они не смогут. Это товарный знак.

Какое разрешение у Retina дисплея?

Разрешения экранов приводятся в формате "число пикселей" Х "число пикселей". Но ключевым моментом для Retina дисплеев является плотность пикселей (количество пикселей на дюйм). При одинаковых разрешениях экранов (в пикселях) но разных размерах (в дюймах) плотность пикселей будет разной.

Но, даже с точки зрения плотности пикселей, нет единой цифры, котороя квалифицировала экран как Retina, так как при определении Retina дисплеев учитывается, внимание, расстояние экрана от глаз.

На деле, чаще можно встретить следующие показатели плотности пикселей для различных типов устройств:

  • 326ppi - смартфоны
  • 264ppi - планшеты
  • 220ppi - ноутбуки

Есть ли экраны с характеристиками лучшими, чем у Retina дисплеев?

Есть. Есть экраны, которые обладают большей плотностью пикселей. Сама компания Apple, с момента запуска iPhone 6, предлагает использовать улучшенный экран Retina HD. Но многие Android устройства превосходят по данному показателю устройства Apple, например LG G3 - 534 пикселя на дюйм.

Но, если вспомнить наше предыдущее определение Retina, то увеличение плотности пикселей - довольно спорное предприятие, ведь человеческий глаз уже не видит разницы при таких высоких показателях ppi. Об этом говорили сами Apple. Но выпуск iPhone 6 можно расценивать как признание того, что все-таки разницу ощутить можно.

Разница между Retina и Retina HD.

Термин Retina HD - относится только к экранам новых смартофонов Apple. Так чем же превосходит Retina HD своего предшественника:

  • Более высокое разрешение
  • Больший контраст
  • Более широкий угол обзора благодаря технологии dual domain pixels
  • Еще, если смотреть на экран в очках, то изображение на экране будет ярче, чем на предыдущих моделях.

Retina Display – фирменная технология компания Apple, на базе которой создаются дисплеи для всех новых мобильных устройств. Компания продвигает эту технологию как современное чудо, равного которому не было, и обещает в этих экранах, кроме отличной передачи цветового баланса, еще и огромную плотность пикселей. В принципе, сейчас ведется интеллектуальная война между технологиями Retina и OLED от Samsung. Что более интересно, так это то, что Retina – хорошо всем знакомая технология TFT + IPS. Плюс засилие брэнда, разумеется.

TFT, или LCD – экраны, построенные на базе свойств жидких кристаллов. Эти кристаллы являются жидкостью, которая при определенном воздействии могжет превращаться в кристалл, а потом опять становиться жидкой. Эту жидкость синтезируют на предприятиях, строя на ней различные LCD экраны. Принцип работы монитора довольно прост, если описывать его на пальцах. Имеется два поляризационных фильтра, через которые проходит свет. Один из них имеет вертикальную решетку вырезов, второй – горизонтальную. Между фильтрами находится «аквариум» с жидкими кристаллами. Разумеется, он очень тонкий, закрытый, а внутри, кроме кристаллов, находятся дорожки для прохождения электрического тока. Сами кристаллы не воспроизводят цвет, но отражают его. Когда на сетку подается ток, кристалл поворачивается и меняет направления света. Для монохромных дисплеев этого уже хватает. Когда поляризирующие пластины имеют одно направление, то на выходе фильтра свет задерживается и получается черная точка, иначе – белая. Цвет создается с помощью цветных светофильтров, на каждый из которых попадает луч от кристалла.

Для LCD мониторов придуманы различные «улучшители» передачи, к примеру, IPS и TN. С помощью первой технологии организуется большой угол обзора картинки на экране, а также более естественные цвета. Вторая технология выглядит поуже и похуже, зато работает намного быстрее. Объединить их невозможно. Понятие TFT, вообще говоря, относится к транзисторной технологии на тонкой пленке, где каждый из них усиливает свойства отдельного пикселя по скорости и контрастности. В TN жидкие кристаллы расположены перпендикулярно экрану, в IPS – параллельно. Для пользователя же важно то, что глаз не видит отдельных пикселей при плотности свыше 300 dpi, а технология Retina этого уже добилась.

Осталось только немного рассказать о том, чем, в принципе, отличаются от LCD-базовых особенностей OLED технологии. В них используется рабочее тело, которое само, без инициирующего света, может создавать свечение, вследствие чего на такой технологии можно получать гораздо более тонкие мониторы. Кроме того, OLED мониторы намного экономнее используют энергию и могут дольше работать без подзарядки. Еще пока неизвестно, какая технология победит в дальнейшем, но уже сейчас размеры устройств от Samsung растут и увеличивают свою плотность на дюйм, из-за чего Retina кажется технологией позапрошлого дня. Но у Apple еще найдутся козыри в рукаве – как всегда.

  • Разработка мобильных приложений
    • Перевод

    После недавнего выпуска Retina MacBook Pro и The new IPad, экраны с увеличенной плотностью пикселей начали активно входить в нашу жизнь. Что это значит для веб-разработчиков?

    Для начала разберемся в терминологии.

    Физические пиксели

    Физические пиксели (device pixel или physical pixel) - привычные нам пиксели: самые маленькие элементы любого дисплея, каждый из которых имеет свой цвет и яркость.

    Плотность экрана (Screen density) - это количество физических пикселей дисплея. Обычно измеряется в пикселях-на-дюйм (PPI: pixels per inch). Apple, разработав Retina-экраны с двойной плотностью пикселей, утверждает, что человеческий глаз не способен различить бо′льшую плотность.

    CSS-пиксели


    CSS-пиксели (CSS pixels) - абстрактная величина, используемая браузерами для точного отображения контента на страницах, вне зависимости от экрана (DIPs: device-independent pixels). Пример:


    Такой блок на обычных экранах будет занимать область 200x300 пикселей, а на Retina-экранах тот же блок получит 400x600 пикселей.Таким образом, на Retina-экранах плотность пикселей в 4 раза больше, чем на обычных:

    Соотношение между физическими и CSS-пикселями можно устанавливать так:
    device-pixel-ratio, -o-device-pixel-ratio, -moz-device-pixel-ratio, -Webkit-device-pixel-ratio { … }

    Или так:
    device-pixel-ratio, -o-min-device-pixel-ratio, min--moz-device-pixel-ratio, -Webkit-min-device-pixel-ratio { … }

    В Javascript добиться этого можно, используя
    window.devicePixelRatio

    Растровые пиксели



    Растровые пиксели (bitmap pixels) - самые маленькие части, составляющие растровое изображение (PNG, JPF, GIF и т.д.) Каждый пиксель содержит информацию, о цвете и расположении в системе координат изображения. В некоторых форматах пиксель может содержать дополнительную информацию, например, прозрачность.

    Кроме растрового разрешения, изображения в интернете имеют абстрактные размеры в CSS-пикселях. Браузер сжимает или растягивает изображении в соответствии с его CSS-шириной и -длиной. При отображении на обычном экране один растровый пиксель соответствует одному CSS-пикселю. На Retina-экранах каждый растровый пиксель умножается в 4 раза:

    Оптимизация

    Существует несколько способов оптимизации графики для отображения на Retina-экранах. Каждый имеет и плюсы, и минусы, необходимо в каждом конкретном случае выбирать, что имеет больший приоритет: производительность, простота реализации, поддержка браузерами или какие-то другие параметры.

    HTML и CSS-масштабирование

    Самый простой способ подготовить графику к Retina-дисплею - это просто разделить пополам физические размеры изображения. Например, чтобы показать фотографию 200x300 пикселей на экране с увеличенной плотностью пикселов, необходимо загрузить фото размером 400x600 пикселей и уменьшить его, используя CSS-аттрибуты или HTML-параметры. Таким будет отображение на обычном экране:

    А таким на Retina:

    Есть несколько способов реализации HTML и CSS-масштабирования:

    HTML

    Самый простой способ - просто задать параметры width и height тегу img:

    Где использовать: на одностраничных сайтах с несколькими изображениями.

    Javascript

    Такого же результата можно добиться, используя Javascript для того, чтобы делить пополам размеры изображений для Retina-экранов. С использованием библиотеки jQuery это выглядит так:
    $(window).load(function() { var images = $("img"); images.each(function(i) { $(this).width($(this).width() / 2); }); });

    Где использовать: на сайтах с несколькими изображениями в контенте.

    CSS (SCSS)

    Также можно использовать изображение в качестве фона с необходимыми размерами (background-size) определенного div"а. Параметр background-size не поддерживается в IE 7 и 8.
    .image { background-image: url([email protected]); background-size: 200px 300px; /* Alternatively background-size: contain; */ height: 300px; width: 200px; }

    Можно использовать псевдоэлементы:before или:after
    .image-container:before { background-image: url([email protected]); background-size: 200px 300px; content:""; display: block; height: 300px; width: 200px; }

    Техника работает и при использовании спрайтов:
    .icon { background-image: url([email protected]); background-size: 200px 300px; height: 25px; width: 25px; &.trash { background-position: 25px 0; } &.edit { background-position: 25px 25px; } }

    Где использовать: на сайтах с ограниченным количеством фоновых изображений (например одним в качестве спрайта).

    HTML и CSS-масштабирование: плюсы

    • Простота реализации
    • Кроссбраузерность

    HTML и CSS-масштабирование: минусы

    • Устройства с обычными экранами будут скачивать лишние мегабайты
    • На обычных экранах четкость изображений может пострадать из-за алгоритмов сжатия
    • Параметр background-size не поддерживается в IE 7 и 8.

    Определение плотности пикселей экрана



    Возможно это самый популярный способ оптимизации графики для Retina-дисплеев. Используется CSS или Javascript.

    CSS

    В этом способе используется device-pixel-ratio, чтобы установить нужное соотношение между физическими и CSS-пикселями:
    .icon { background-image: url(example.png); background-size: 200px 300px; height: 300px; width: 200px; } @media only screen and (-Webkit-min-device-pixel-ratio: 1.5), only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min-device-pixel-ratio: 1.5) { .icon { background-image: url([email protected]); } }

    Где использовать: на сайтах или в приложениях, в которых применяется background-image для элементов дизайна. Не подходит для изображений внутри контента.

    Плюсы

    • Кроссбраузерность

    Минусы

    • Утомительно внедрять, особенно на крупных сайтах
    • Использование изображения контента в качестве фона семантически некорректно

    Javascript

    Того же результата можно добиться, используя window.devicePixelRatio:
    $(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); }); } });

    Существует специальный Javascript плагин Retina.js , который умеет делать все вышеописанное, но с дополнительными возможностями, такими как пропуск внешних изображений и пропуск внутренних, но не имеющих retina-копий.

    Где использовать: на любых сайтах с изображениями в контенте.

    Плюсы

    • Простота внедрения
    • Устройства не скачивают лишние изображения
    • Контроль плотности пикселей на сайте

    Минусы

    • Retina-устройства скачивают оба варианта каждого изображения
    • Подмена изображений заметна на retina-устройствах
    • Не работает в некоторых популярных браузерах (IE и Firefox)

    Масштабируемая векторная графика


    Вне зависимости от используемого метода растровые изображения по своей природе остаются ограниченными в масштабировании. Тут нам может помощь векторная графика. SVG (Scalable Vector Graphics) формат на основе XML поддерживается большинством браузеров. Самый простой способ использования SVG-изображений - в теге img или CSS-параметрами background-image и content:url().

    В этом примере простое SVG-изображение может быть как угодно масштабировано:

    То же самое получится с применением CSS:
    /* Использование фонового изображения */ .image { background-image: url(example.svg); background-size: 200px 300px; height: 200px; width: 300px; } /* Использование content:url() */ .image-container:before { content: url(example.svg); /* width and height do not work with content:url() */ }

    Для поддержки IE 7 или 8 и Android 2.x потребуется использование заменяющих PNG-изображений. Это можно легко сделать с помощью Modernizr :
    .image { background-image: url(example.png); background-size: 200px 300px; } .svg { .image { background-image: url(example.svg); } }

    Для лучшей кроссбраузерности, чтобы избежать проблем растеризации в Firefox и Opera, следует сделать каждое SVG- изображение соответствующим его родительскому HTML-элементу.

    В HTML можно реализовать аналогичное с помощью нужного data в теге a:

    С использованием jQuery и Modernizr:
    $(document).ready(function(){ if(!Modernizr.svg) { var images = $("img"); images.each(function(i) { $(this).attr("src", $(this).data("png-fallback")); }); } });

    Где использовать: на любых сайтах, подходит для иконок, логотипов и простых векторных иллюстраций.

    Плюсы

    • Единый набор изображений для всех устройств
    • Простота реализации
    • Бесконечное масштабирование

    Минусы

    • Нет точного сглаживания «до пикселя»
    • Не подходит для сложной графики из-за больших размеров файла
    • Нет встроенной поддержки в IE 7, 8 и в ранних версиях Android

    Иконочные шрифты



    Популярный благодаря