() translation by (you can also view the original English article)
Новый iPad был выпущен в прошлом месяце, и, помимо всего прочего, он обладает невероятным дисплеем ретина с разрешением 2048 на 1536 пикселей. Практически сразу после того, как это было объявлено, основное внимание было уделено разработчикам приложений и их работе по масштабированию приложений до более высокого разрешения.
Возможно, это был неправильный фокус. Сравнительно немногое было обдумано с точки зрения веб, и как все будет выглядеть на новом дисплее ретина в преддверии анонса. Что дало нам в интернете удивительно четкое качество текста, но смехотворно ужасные, низкокачественные изображения. Пришло время для оптимизации, поэтому в этом уроке мы будем разрабатывать стратегию дизайна с учетом дисплея ретина.
Используем меньшее количество изображений
Это, вероятно, довольно очевидно, но некоторые могут этого и не заметить. При значительных улучшениях в CSS можно добиться минимального количества изображений в структуре сайта или даже вообще избавиться от них. Что дает таким сайтам огромное преимущество, когда дело доходит до совместимости с дисплеем ретина, потому что текст и CSS-графики будут масштабироваться без снижения качества. По этой же причине, текст выглядит заметно лучше на дисплеях ретина.
Apple очень сильно улучшила качество текста на дисплее ретина своего нового iPad
Мне не понадобилось делать никаких изменений в теме сайта, над которым я работал, чтобы он отлично выглядел на ретине; Отсутствие изображений означало, что мне не нужно ничего обновлять. Конечно, не любой сайт может полностью обойтись без изображений, но сведение их количества к минимуму поможет уменьшить усилия, необходимые для оптимизации под новый дисплей.
Как правило, есть один шаг в этой тактике: минимизируйте использование изображения там, где они действительно не нужны.
Так как это делает Apple
Естественно, веб-сайт Apple оптимизирован, чтобы выглядеть невероятно резким и четким на новых дисплеях. В дни, предшествующие объявлению iPad, Apple приступила к обновлению собственного веб-сайта, предлагая гибкие образы; Элементы, которые изменились в зависимости от того, просматриваете ли вы их на новом iPad или нет.
Метод Apple в принципе прост. Сайт загружается как обычно, но затем они используют JavaScript для замены соответствующих изображений, если вы просматриваете его на новом iPad. Если вы посетите сайт на новом iPad, вы получите оптимизированные изображения, в то время как любой другой браузер получит значения по умолчанию.
Одним из таких примеров этого является текст Apple на странице продукта iPad, используя следующий код в самом файле.
1 |
<hgroup class="headline"> |
2 |
<h1><img src="http://images.apple.com/ipad/home/images/overview_title.png" width="471" height="94" alt="Resolutionary" /></h1> |
3 |
<h2 class="first"><img src="http://images.apple.com/ipad/home/images/overview_intro_build.png" width="280" height="53" alt="The New iPad" /></h2> |
4 |
<h2 class="second"><img src="http://images.apple.com/ipad/home/images/overview_intro.png" width="490" height="53" alt="Introducing the new iPad. With the stunning Retina display. 5MP iSight camera. And ultrafast 4G LTE." /></h2> |
5 |
<h3><img src="http://images.apple.com/ipad/home/images/overview_price.png" width="135" height="24" alt="Starting at $499." /></h3> |
6 |
</hgroup>
|
Для простоты я не буду делиться их фактическими скриптами, но по существу скрипт сначала проверяет, находится ли браузер на устройстве с ретина дисплеем, а затем проверяет наличие 2x изображения (мы перейдем к ним через минуту) и, если оба предыдущих условия истинны, отображает изображение 2x.
Соглашение с суффиксом 2x означает, что копия «Retina» для файла image.png будет image_2x.png. Это происходит от iOS, которая автоматически отображает изображение @2x в родном приложении, если такое существует. К сожалению, мы, как веб-дизайнеры, не можем позволить себе роскошь автоматического поиска и отображения, поэтому нам нужно придумать методы эмуляции этого поведения с помощью наших собственных скриптов и запросов.
Однако это стоит дорого. Используя этот метод, конечный пользователь загружает как простые изображения, так и для ретина дисплея, что означает, что страница в итоге получается с увеличенным размером файла. Более того, скрипты Apple означают, что больше запросов отправляется в браузер и из него, что в свою очередь приводит к увеличению времени загрузки страницы. Конечно, если вы продолжите минимизировать использование изображения, эта проблема также будет уменьшена.
Учебник: использование медиа-запросов CSS
Хотя Apple использует JavaScript, в чем-то эффективный метод, но есть и альтернатива; Используя запросы медиа-контента CSS, чтобы удовлетворять условию стилизации с плотностью пикселей устройства.
Прежде чем мы перейдем к этому, важно отметить, что, в конечном счете, дисплей iPad по-прежнему имеет разрешение 1024x768 пикселей в пикселях CSS. Я позволю Дейву Хаятту объяснить.
Большинство авторов веб-сайтов традиционно считали пиксель CSS равным пикселю на устройстве. Однако, когда мы входим в этот новый мир с высоким DPI, где весь пользовательский интерфейс может быть увеличен, пиксель в CSS может оказаться равен нескольким пикселям на экране. Например, если я установил коэффициент увеличения 2x, тогда 1 пиксель CSS будет фактически представлен квадратом пикселов устройства 2×2.
Таким образом, метод, который мы используем, не будет нацелен на iPad на основе его разрешения, потому что он просто не будет работать. Разрешение iPad по-прежнему составляет 1024x768 пикселей в зависимости от браузера, и если мы нацелимся на это разрешение, то мы также зацепим и все предыдущие поколения iPad. Аналогично, таргетинг на новое разрешение 2048x1536 px с помощью медиа-запросов не окажет никакого влияния на новый iPad.
Вместо этого мы можем настроить таргетинг с помощью запроса min-device-pixel-ratio. Этот запрос указывает браузеру загружать определенный стиль, основанный на отношении пикселей устройства к вышеупомянутым «пикселям CSS». В случае iPad с Retina Display это два (1024:2048 и 768:1536 упрощенные до 1:2).
Поэтому мы можем загрузить таблицу стилей «ретина», основанную на соотношении пикселей устройства.
1 |
<link rel="stylesheet" type="text/css" href="retina.css" media="only screen and (-webkit-min-device-pixel-ratio: 2)" /> |
Очевидно, мы используем префикс WebKit, так как браузер iPad - это Safari, браузер на основе WebKit, но также и потому, что медиа-запрос пока доступен только через WebKit. Так как таблицы стилей являются каскадными (что понятно из названия «CSS»), просто правильно упорядочив вышеуказанный тег, правила в этой таблице стилей будут перезаписаны для обычных устройств, указанных ранее.
Если вам не хочется помещать все в отдельную таблицу стилей, вы можете использовать встроенные медиа-запросы, чтобы указать части таблицы стилей только для устройств с дисплеем ретина, например так:
1 |
@media(-webkit-min-device-pixel-ratio: 2) { |
2 |
#element { |
3 |
background-image('image-2x.png');
|
4 |
}
|
5 |
}
|
Примечание. Хотя использование схемы имен «2x» может оказаться весьма полезным способом организации изображений, не считайте себя обязанными всегда так делать. Вы можете называть ваши изображения как угодно, и, в отличие от родных приложений, они не должны быть даже отдаленно похожими.
Конечно, использование этого медиа-запроса никак не связано с iPad. Фактически, такая же логика будет срабатывать при просмотре вашего сайта на любом устройстве с аналогичной плотностью пикселей, которая использует одинаковое соотношение пикселей CSS к устройству, включая iPhone 4 и iPhone 4S. Если вы хотите настроить таргетинг только на iPad, вы можете просто объединить запрос с соотношением пикселей и шириной, чтобы указать только устройства с ретина дисплеем, поддерживающие разрешение как у iPad.
Вывод
Дело не в том, что ваш сайт хорошо выглядит без оптимизации, а в том, что с ней он выглядит гораздо лучше. Вам нужно всего лишь посетить сайт, наполненный картинками, но не оптимизированный, чтобы понять, как ужасно выглядят не-ретина-изображения на новом iPad. И, в конечном счете, вам нужно фактически засвидетельствовать свои результаты. Если у вас нет доступа к новому iPad, я настоятельно рекомендую отправиться в Apple Store, чтобы взглянуть на него.
В то время как Apple продала миллионы единиц продукции, в большой схеме браузеров, это все еще маленькая проблема. Тем не менее, с потенциальным MacBook, оснащенным дисплеем ретина, который уже виден на горизонте летом этого года, включение в работу сейчас действительно может позже окупиться.
