Пользователь
0,0
рейтинг
22 августа 2012 в 23:11

Разработка → Оптимизация графики для Retina-экранов перевод

После недавнего выпуска 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). Пример:
<div height="200" width="300"></div>

Такой блок на обычных экранах будет занимать область 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:


<img src="example@2x.png" width="200" height="300" />


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

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(example@2x.png);
  background-size: 200px 300px;
  /* Alternatively background-size: contain; */
  height: 300px;
  width: 200px;
}


Можно использовать псевдоэлементы :before или :after
.image-container:before {
  background-image: url(example@2x.png);
  background-size: 200px 300px;
  content:'';
  display: block;
  height: 300px;
  width: 200px;
}


Техника работает и при использовании спрайтов:
.icon {
  background-image: url(example@2x.png);
  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(example@2x.png);
  }
}


Где использовать: на сайтах или в приложениях, в которых применяется 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-изображение может быть как угодно масштабировано:

<img src="example.svg" width="200" height="300" />


То же самое получится с применением 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:

<img src="example.svg" data-png-fallback="example.png" />


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


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

Плюсы


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


Минусы


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


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



Популярный благодаря Twitter Botstrap способ, заключается в замене букв в шрифте на нужные символы с последующим их отображением на странице с помощью CSS. Существует множество иконочных шрифтов с символами на любой вкус, но можно также создать свой с помощью Fontello, Font Builder или даже Inkscape.

Наиболее распространенный способ использования иконочных шрифтов — это применение нужного класса к определенному элементу страницы:

<span class="icon">a</span>


А в стилях указывается нужный шрифт:
.icon {
  font-family: 'My Icon Font';
}


Таже можно использовать псевдоэлемент :before и параметр content с уникальным классом к каждой иконке:

<span class="glyph-heart"></span>


[class^="glyph-"]:before {
  font-family: 'My Icon Font';
}

.glyph-heart:before {
  content: 'h';
}


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

Плюсы


  • Бесконечное масштабирование
  • Кроссбраузерность
  • Более универсальное решение, чем набор графических элементов


Минусы


  • Нет точного сглаживания «до пикселя»
  • Сложность реализации: отдельный символ шрифта к каждой иконке
  • Способ основан на семантически некорректной разметке


Favicon


Favicon'ки все чаще используется вне браузера в качестве графического представления сайта или приложения. Чтобы оптимизировать favicon для Retina-устройств, необходимо подготовить .ico в двух размерах: 16x16 и 32x32 пикселей.

Взгляд в будущее


Существует специальный -Webkit-image-set от Apple, представленный весной, который позволяет использовать несколько вариантов одного изображения в CSS:
.image {
  background-image: -Webkit-image-set(url(example.png) 1x, url(example@2x.png) 2x);
  background-size: 200px 300px;
}


Но этот способ не распространяется на изображения внутри тега img.

Еще один инструмент — Picturefill, автор Scott Jehl. Это HTML и Javascript решение:

<div data-picture>
     <div data-src="example.png"></div>
     <div data-src="example@2x.png" data-media="(min-device-pixel-ratio: 1.5)"></div>

  <!-- Fallback content for non-JS browsers -->
  <noscript>
    <img src="example.png" >
  </noscript>
</div>


Несмотря на такую разметку, это вполне нормальное кроссбраузерное решение.

Еще одно амбициозное предложение — использование элемента picture, который позволяет использовать несколько адаптивных изображений, заменяющих друг друга в зависимости от размера и плотности пикселей экрана

Заключение


Как и многие другие большие изменения в веб-дизайне, поиск универсального решения для изображений на Retina-устройствах будет долгим. Можно сидеть и ждать его, а можно уже сейчас делать сайты, которые приятно посещать с любых устройств.
Перевод: Smashing Magazine: Reda Lemeden
@grokru
карма
405,0
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое Разработка

Комментарии (57)

  • +31
    @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) { ... }
    

    Вот так и кочует это объявление с одного сайта на другой, тогда как оно никогда не будет стандартизировано. Правильно будет писать вот так:

    @media only screen and (-webkit-min-device-pixel-ratio: 1.5),
           only screen and (min-resolution: 144dpi) { ... }
    

    Подробнее в блоге W3C: «How to unprefix -webkit-device-pixel-ratio».
    • +9
      Кстати говоря, даже -moz- префикс употреблён неправильно. В Файрфоксе оно работает так:

      @media (min--moz-device-pixel-ratio: 1.5) { ... }
      

      Так что используйте min-resolution, не ошибётесь.
  • –15
    Спасибо за статью! Очень вовремя. Но скажу честно, думал решение уже найдено, а оказались сплошные костыли. Буду пробовать, какое решение лучше подойдет для сайта.
    p.s. Технологии не успевают за Apple =)))))))
    • 0
      p.s. Технологии не успевают за Apple =)))))))
      • +15
        facepalm.jpg
    • +2
      На дворе 2001 год, IBM T220/T221 — это было 11 лет назад.
      • 0
        Все это прекрасно, но сколько у людей этих IBM T220/T221, а сколько девайсов с «ретиной»? Я об этом говорю.
        • 0
          Т.е. эти мониторы от IBM вообще ни как не повлияли на IT, а после массового распространения ретины в IT стали появляться подвижки и выход вот таких статей как эта.
        • НЛО прилетело и опубликовало эту надпись здесь
  • 0
    Как вариант ретинизации контента:

    <figure class="retina-optimized-content">
        <img src="image.jpg" class="image-1x" alt="Non-retina image" />
        <img src="image@2x.jpg" class="image-2x" alt="Retina image" />
    </figure>
    


    .retina-optimized-content img {
        max-width: 100%;
    }
    
    .retina-optimized-content .image-2x {
        display: none;
    }
    
    @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) {
        .retina-optimized-content .image-1x {
            display: none;
        }
    
        .retina-optimized-content .image-2x {
            display: inline;
        }
    }
    • +2
      Проблема в том, что картинка не грузится, только если скрыт её родитель. Скрытие самого <img> не предотвращает загрузки, так как некоторые сайты используют невидимые картинки для предзагрузки.
      • 0
        Если уж нужно так круто оптимизировать, то всегда есть content: url(); где можно подключать уже retina-версию. Вот тогда уж точно не будет лишней подгрузки. Но в этом варианте тоже свои минусы, в первую очередь в том что это самый несемантичный вариант решения :)
        • НЛО прилетело и опубликовало эту надпись здесь
          • 0
            Нет, я про то что сначала код задаётся в отдельном css, а потом уже линкуется с медиа-запросом. И код не должен быть загружен на тех устройствах которые не подходят под условия медиа-зарпоса.
      • 0
        Картинки, вставленные через тег img, будут загруженны даже если скрыт их родитель.
  • 0
    В оригинальном Twitter Bootstrap нет иконочных шрифтов. Там «glyphicons-halflings.png» + оффсеты, а иконки задаются так: <i class="icon-search"></i>. Иконочные шрифты используют форки Bootstrap'a, такие как Kickstrap например.
    • 0
      Полагаю, что автор первоисточника имел в виду Font Awesome бесплатный свободный (CC BY 3.0) шрифт со значками для употребления в стиле Twitter Bootstrap.
  • –4
    << Чтобы оптимизировать favicon для Retina-устройств, необходимо подготовить .ico в двух размерах: 16x16 и 32x32 пикселей.
    Простите, но favicon лучше сохранять в png
    • +5
      Если favicon сохранять в PNG, то Internet Explorer в Windows XP не станет отображать значок у закладки после того, как её перетащить и положить на рабочий стол.

      Кстати, уместно значок в формате ICO подготавливать в трёх размерах: 16×16, 32×32 и 48×48 — последний из которых имеет в виду режим «крупные значки» рабочего стола Windows.
      • –2
        Вы много знаете людей, которые перетаскивают закладку на рабочий стол? Я не знаю, зачем это может понадобиться, браузер открыт все время.
        Но в любом случае, можно хранить две иконки, в link — png, favicon — ico (т.е. будет файл favicon.ico и favicon.png, указанный в шапке). Если среди требований отсутствует IE6-8, то можно от ico отказаться.
  • –2
    Для поддержки растровой графики в IE 7, 8 и т.д. обычно используют библиотеку Raphael.JS. Она рисует по канве (canvas). Синтаксит Raphael.JS очень близок к SVG, есть несколько неплохих конвертеров из SVG.
    • +4
      То-то на сайте у Raphaël'я написано: «Raphaël ['ræfeɪəl] uses the SVG W3C Recommendation and VML as a base for creating graphics.». И, да, как можно использовать холст (canvas, а не «канва»...) для поддержки IE 7, 8, если они canvas не поддерживают? :)
  • –2
    Господа, а правильно ли я понимаю, что, фактически, retina-монитор отображает все так же, как монитор с плотностью пикселей меньше в 4 раза просто из-за того, что везде в обязательном порядке включен downsampling? В чем профит монитора сверх-высокого разрешения, если на него можно уместить даже меньше, чем на монитор «прошлого поколения»? :(
    • +6
      В четкости и плавности текста и графики
      • 0
        Просто прекрасно, но либо я неправильно понял статью, либо не понимаю принципа работы ретины, и прошу это разъяснить.

        Новые макбуки имеют хардварное разрешение (количество модулей, изменяющих свою светимость) в 2880х1800 пикселей, но при этом софтварное разрешение (пиксельная размерность экранного буфера) составляет 1440x900 пикселей — из-за downsampling в 4 раза.

        Если нельзя использовать хардварные пиксели по одиночке, а только группами по 2х2 пикселя, то чем это эффективно отличается от монитора с обычным разрешением 1440х900?
        • +1
          > то чем это эффективно отличается от монитора с обычным разрешением 1440х900?

          Для ПО/сайтов не оптимизированных под ретину — ничем. С точки зрения пользователя не изменится ничего, разве что текст станет более четким. Но при этом не обнаружится, что <irony>внезапно</irony> элементы интерфейса стали в 2 раза меньше.

          А вот оптимизированные под ретину — вполне себе используют полное разрешение.
          • –7
            Интересно, есть ли способ в Mountain Lion выключить эту «проверку на совместимость с Retina» — меня бы, например, целиком устроили элементы интерфейса в два раза меньше, и не думаю, что меня одного. Должен бы быть, по идее…
            • +1
              Нет, не устроили бы. Даже на zenbook с 168 ppi все выглядит очень мелким и надо ставить 125% (при том, что я в принципе люблю мелкий шрифт), если еще в 1.3 раза уменьшить, там вообще ничего не будет видно без лупы, даже с плюсовым зрением.
        • НЛО прилетело и опубликовало эту надпись здесь
          • 0
            Сам не пользовался сим, но, как понял из множества описаний, все, что генерируется автоматически, т.е. шрифты, векторная графика, градиенты, всякие там закругленные уголки, тени и прочее. В общем по сути все, кроме растровой графики.
        • 0
          Софтварное разрешение можно менять, максимально (без танцев с бубнами) — 1920х1200. Тоже даунсемплинг из 2880х1800, но в теории векторные элементы чётче, чем ан родных 1920х1200. Про растровую графику не знаю.
  • –1
    Вот это:
    «CSS-пиксели… для точного отображения контента на страницах, вне зависимости от экрана… 200x300 пикселей, а на Retina-экранах тот же блок получит 400x600 пикселей… на Retina-экранах плотность пикселей в 4 раза больше, чем на обычных:», по меньшей мере, безграмотно.

    CSS pixel это логический length unit равный 1/96 дюйма. Т.е. по своим свойствам тождественен 1pt (1/72 in), 1cm и пр.

    И «в 4 раза больше» есть зело оптимистичная оценка. Retina она разная бывает.

    «Обычный» экран имеет пиксели размерами 1/96 дюйма (96 DPI).
    Ретина на iPhone и ~ 320 DPI т.е. примерно 11 раз больше пикселей на дюйм;
    MacPro 220 DPI — в 5 раз больше;
    iPad — 264 DPI — в 7 раз.

    При переводе цифры надо проверять.
  • –5
    Как же хорошо быть человеком, который не особо видит разницы между обычными пикселями и «уменьшенными». Мне хватает и родных для 23" 1680 точек. Не то что бы я отрицал инновации, но с расстояния в почти метр я и так не замечаю жутких гигантских размеров пикселей в обычных мониторах, что в браузере, что в каком-нибудь Крузисе. Сомневаюсь, что смогу рассмотреть тот «четырехпиксельный» кружок из статьи на ретине.
    • +5
      Про физику с геометрией забывать не надо. Фрагмент экрана в 1/96in (1 пиксель у тебя) с расстояния метр имеет такой же угловой размер как и пиксель 1/192in на расстоянии пол-метра. Т.е. чем ближе экран устройства тем больше плотность пикселей на нем должна быть.

      image
      • 0
        Возможно, именно поэтому я и указал «почти метр»? Я сомневаюсь, что кто-то работает на 23" «вплотную», а не с аналогичный расстоянием до экрана. И — снова повторюсь для яблофилов и «веб-дизайнеров» — лично мне не видно разницы на таком расстоянии между размерами пикселей, и существующий меня вполне устраивает.
        Впрочем, я не отрицаю, что найдутся люди, которые будут серфить интернет с трехметрового экрана.
    • 0
      Отключите сглаживание шрифтов, и увидите разницу.
  • –1
    Не тех макбуках с ретина экранами, которые видел я, на глаз было именно 2880 на 1800 пикселей разрашение физически. На глаз всё очень мелко и компактно, никакого downsampling на глаз не видно. Любой желающий может загуглить скриншот из системы запущеной на таком экране.

    В связи с этим не совсем понятен вообще смысл статьи? Сделать страницы более четкими и плавными или все таки сделать страницы визуально не слишком мелкими?

    Объясните в чем там проявляется downsampling если даже установленная убунта находит экран. www.phoronix.com/image-viewer.php?id=apple_mbpr_linux&image=apple_rmbp_preview_lrg вот пруф.
    • +2
      Предвидел минусы от хейтеров, которым влом объяснить а только минусовать.

      images.anandtech.com/galleries/2078/Screen%20Shot%202012-06-11%20at%204.35.46%20PM.png

      вот интересная картинка. Судя по всем это режим Best и есть ничто иное как downsampling.
    • 0
      Возможно, когда вы видел MPB Retina, то там бы включён 5-ый режим в настройках дисплея — на таком работать с текстом очень сложно, т.к. всё очень мелко, но вам ничего не мешает включить стандартный 3-ий режим, тогда размеры всех элементов будут такими же, как на обычном ноутбуке.
  • 0


    Что Вы такое пишете? У элемента div нет таких атрибутов.
    • +1
      width и height, я имею в виду.
  • 0
    Есть такой вопрос, как отключить смазывание на MB Retina в Windows? Т.е. хочу использовать 1440х900, и чтобы пиксели не смазывались, а использовались 4 вместо одного. Весь интернет облазил, найти не могу :( Подобный эффект добивается в VirtualBox когда запускаешь винду в макосе, и в MacOS стоит 1440х900 или при запуске 2880х1800 и включение экранной лупы.
    • 0
      Поставьте Parallels, там будет то что вы хотите.
  • +2
    Ну и как быть с Хабром? :)
    Мы в тестовом режиме попробовали на Автокадабре внедрить «иконочный шрифт» — сперва понравилось, но потом началось: иконки нормально не выравнять (скачут по высоте из-за масштабирования), в каждом браузере выглядят по-разному (а в некоторых версиях оперы так вообще квадратики вместо иконок) и так далее — в итоге пришлось отказаться :( А так хотелось…
    • 0
      Лично я считаю что внешний вид, функциональность и производительность не должны ущемляться в пользу идеологии или технологии. Новые технологии использовать безусловно нужно, хотя-бы для поддержания имиджа но только в разумном сочетании с «look and feel».
    • 0
      SVG (если без заморочек вроде теней) или просто картинки с двойным разрешением. SVG на фоне лучше не давать Опере и IE10RP
    • +1
      В некоторых версиях браузера Opera при некоторых условиях (нелатинские — например, русские — буквы в имени пользователя Windows) вообще перестаёт работать @font-face.

      Поэтому все пользователи Оперы должны мучительно страдать до тех пор, пока не перейдут на другой, более нормальный браузер.
  • 0
    попробовал window.devicePixelRatio на последнем firefox — не пашет.
    Наверняка и остальное всё тоже не пашет на десктопных браузерах.
    Как свормировать картинку на канвасе с определённым PPI?
    • 0
      Safari 6 — пашет.
  • 0
    Надо будет посмотреть поподробнее на это всё. Единственное, я перед выбором — iPhone, по всей видимости, надо отсекать. Чёткость — замечательно, но качать по мобильной сети картинки, которые станут весить в 4 раза больше издевательство над мобильным каналом пользователя, мне кажется.
  • 0
    Apple, разработав Retina-экраны с двойной плотностью пикселей, утверждает, что человеческий глаз не способен различить бо′льшую плотность.

    Если это действительно так, почему в продуктах Apple до сих пор используется антиалиасинг? Например, при растеризации шрифтов. Ведь он нужен как раз для того, чтобы сгладить границы между пикселами, видимые человеческому глазу.
    Так что мне кажется, Apple несколько лукавит, делая подобные заявления.
    • НЛО прилетело и опубликовало эту надпись здесь
  • 0
    автор молодец! Спасибо огромное!

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.