—»     —»   Путь к адаптивным изображениям
  Раздел: Обработка изображений   Комментариев: 7  

Путь к адаптивным изображениям



Пару недель назад черновик редакторов W3C показал нам, что мы стали на еще один шаг ближе к рабочей спецификации для адаптивных изображений. Ансельм Ханнельманн (Anselm Hannemann) рассказывает о том, как получился черновой вариант спецификации, о проблемах, которые все нужно решить, а также о том, почему спецификация занимает важнейшее место.

Путь к адаптивным изображениям

29 августа 2012: дата, которая войдет в историю, так как именно в этот день мы получили официальную спецификацию для адаптивных изображений. Пару недель назад W3C опубликовала черновик редакторов для адаптивных изображений, который был написан Мэтью Маркесом (Mathew Marquis) и Адрианом Бэйтманом (Adrian Bateman).

После года обсуждений в сообществе разработчиков о наилучшем способе применения адаптивных изображений, W3C, наконец, облегчили всем задачу, попросив Мэта Маркеса и Filament Group написать спецификацию. В данной статье мы рассмотрим события, которые привели к такому решению, цели спецификации, а также изучим некоторые проблемы, которые все еще нужно решить.

Немного истории

Если вы не в курсе всех дебатов по поводу адаптивных изображений, то давайте немного ознакомимся с темой.
Многие люди (включая и наш ресурс) публиковали статьи на эту тему.

* Был сделан запрос на HTML-решение для адаптивных изображений к WHATWG в июле 2011 года.
* Тема исчезла до ноября 2011 года.
* Другие люди начали исследовать тему, и она стала популярной, даже без ответа от W3C/WHATWG.
* В феврале 2012 года W3C сформировала группу для дальнейшего обсуждения темы.
* В февраля 2012 года WHATWG обсудили другой подход, при помощи атрибута srcset, смутив всех, так как он сильно расходился с предложенным им вариантом. В мае 2012 это предложение стало публичным, что означало продолжение дебатов.
* После дальнейших обсуждений между W3C и WHATWG, в августе 2012 года все, наконец, стало ясно, и W3C предложили элемент «picture» включая srcset.

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

Первый черновик от W3C

Совсем недавно был выпущен первый черновик спецификации. Хорошие новости в том, что W3C, WHATWG и большинство подписчиков одобряют этот черновик, так что обсуждения в значительной степени продвинулись вперед.

Путь к адаптивным изображениям
Сверху: экран iPad2 при 132ppi разрешения. Можно видеть все пиксели.
Снизу: экран высокого разрешения на iPad3 выглядит гораздо более плавно.

Цель адаптивных изображений

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

* Реализовать соответствие различной ширине/высоте пикселя в HTML.
* Реализовать соответствие различной плотности пикселей (высокое разрешение/низкое разрешение).
* Позволяет пользователям увеличивать и уменьшать изображения (например, посресдством лайтбокса).
* Предоставлять браузерам пользователей информацию о том, какое изображение больше всего подходит клиенту. Это производится при помощи media queries (пока что не доступно).
* Предотвратить разломы в верстке и стилях.
* Предоставлять полноценное решение на клиентской стороне, которое включает в себя JS, но не требует самой библиотеки.
* Предоставлять различные вариации одного и того же изображения, в зависимости от размера и свойств окна просмотра (например, когда нужно отобразить черно-белое изображение для читателей E-ink).

Путь к адаптивным изображениям
Как работают экраны высокого разрешения. Слева 4-хпиксельное устройство при стандартном разрешении; Справа 16-пиксельное устройство, которое отображает изображение того же размера.

Как принять адаптивные изображения

Текущая спецификация позволяет вам сделать две вещи:

* Указывать различные разрешения одного и того же изображения при помощи атрибута srcset. Вам не нужно будет беспокоиться о media queries, и только лишь предоставить изображения 1х (нормального разрешения), 1.5х (более высокого разрешения) и 2х (для разрешения Retina). Клиентское приложение сделает все остальное.

* Использует различные изображения для разных разрешений. Вы указываете media queries, определяете разные разрешения или различные типы устройств, и подготавливаете определенные изображения для отдельных пользователей. Более детальная разработка, но требует больше усилий.

Элемент «picture» будет иметь следующий синтаксис:

<picture>
<source media="(min-width: 45em)" srcset="large-1.jpg 1x, large-2.jpg 2x">
<source media="(min-width: 18em)" srcset="med-1.jpg 1x, med-2.jpg 2x">
<source srcset="small-1.jpg 1x, small-2.jpg 2x">
<img src="small-1.jpg" alt="my alt-text" width="200" height="100">
</picture>

Это обычный пример того, как можно использовать адаптивные изображения. Как видно, новый элемент обратно-совместимый ввиду того факта, что вы можете интегрировать обычный элемент «img» в элемент «picture». Это означает, что у вас всегда будет откат для более старых версий браузеров, которые не поддерживают элемент «picture» и, более того, это позволяет нам использовать элемент «picture» уже сейчас. Тем не менее, мы бы не рекомендовали вам использовать синтаксис, указанный в первом черновом варианте.

Вы можете комбинировать srcset с media queries для того, чтобы указывать конкретные размеры экранов, и позволить пользовательским приложениям решить, пользователь получит изображения высокого или низкого разрешения. Это делает синтаксис невероятно гибким с точки зрения определения изображения, и очень близким к идеальному решению, касательно адаптивных изображений.

Путь к адаптивным изображениям
Размеры файлов, которые вам понадобятся при создании изображения для экранов с различной плотностью пикселей. Изображение должно отображаться в том же размере, независимо от того, на каком устройстве оно просматривается: увеличение плотности приводит лишь к повышению резкости изображения.

Требования к браузерам

Есть несколько вещей, необходимых для того, чтобы элемент «picture» работал. Они все относятся лишь к требованиям к браузерами, поэтому давайте отметим ключевые аспекты:

* Пользовательское приложение должно извлекать соответствующий данные в рамках одного запроса.

* Пользовательское приложение должно иметь возможность переписывать значения разработчика настройками пользователя (например, когда разработчик говорит скачивать изображение высокого разрешения, но пользователь выставил настройки на маленькое разрешение, приложение должно предоставлять ему изображения низкого разрешения).

Проблемы, на данный момент нерешенные

Так как первый черновой вариант вышел всего несколько недель назад, обсуждения все еще продолжаются, как на WHATWG, так и на W3C. К счастью, большинство главных проблем уже решено, как кажется. Большинство оставшихся нерешенными проблем очень тривиальны, поэтому нам не стоит здесь подробно их разбирать. Тем не менее, есть небольшое исключение:

Нам до сих пор не очень ясно, как определить альтернативный контент для элемента «picture». В рассылках одно решение заключается в текстовом откате внутри элемента (в виде дочерних элементов). Другое же заключается в простом использовании атрибута alt, как для элемента «picture», так и для элемента «source». Так как это может привести к серьезным проблемам с точки зрения доступности и удобства пользования, стоит подождать дальнейших действий и решений.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: адаптивный дизайн
Опубликовал Design FactoRy   Прочитано (раз): 4404   |   Оставлено комментариев: 7
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 3 октября 2012 @ 20:26
Написал: Rewis — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Если честно, то не верю в то, что этот способ будет актуален в ближайшие годы вообще, т.к не основная, но и не малая часть пользователей до сих пор используют браузеры устаревших версий. Но это не значит, что нужно остановиться на том, что есть и не двигаться вперед, наоборот надо ускорить движение вперед, еще больше вводить новых технологий и использовать на сайтах новые технологии и призывать пользователей к современному обновлению браузера. Если массово внедрять новые методы предоставления информации, то пользователям придется обновляться и так же жить в ногу со временем. winked
Комментарий #2: 3 октября 2012 @ 20:53
Написал: Design FactoRy — группа: Администраторы  
На сайте с: 21.07.2009   |   Публикаций: 3300   |   Комментариев: 500
ICQ: --- не указано ---
Rewis, что касается браузеров ... точнее их обновления. Как правило, мало-мальски осведомленный в интернет-технологиях юзер обновляет свои браузеры более-менее регулярно. Это касается Хрома, Файерфокса, Оперы или Сафари.

Пользователи-чайники или лентяи либо не умеют либо не хотят своевременно обновлять свой браузер. Считаю, что на таких людей не стоит ориентироваться в разрезе новых прогрессивных методов разработки.

И третья группа людей, которую я считаю уместным выделить - пользователи Эксплорера. По моим личным наблюдениям ИЭ используют:

- те же чайники, которые и не подозревают о существовании иных браузеров;
- те же лентяи, которым лень или влом скачать и установить бесплатный и более продвинутый эквивалент их окна в Сеть.

И опять же, вопрос ориентации на таких пользователей имеет ответ риторический.

Поэтому движение вперед всегда было, есть и будет. Ламер, лентяй и бездельник никогда не был ориентиром и целевым пользователем для любого разработчика. И спасибо именно таким разработчикам, которые методом проб и ошибок создают и предлагают нам что-то новое.

Ну и мы (наш сайт) стараемся не отставать ... все новое, что появляется в Сети мы регулярно выдаем в наш "эфир". А внедрять или не внедрять то или иное новшество - это уже решать каждому в отдельности, зависимо от его желания, потребностей и целесообразности ...
Комментарий #3: 4 октября 2012 @ 07:08
Написал: Rewis — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Design FactoRy, не в обиду, Ваша цель не понятна, еще и мой комент цитируете. Вы хотели мне объяснить кто чем пользуется или кто как называется, если пользуется ИЕ? Я, извиняюсь, но Вы наверное не поняли смысл моего комментраия. Но что касается ориентации разработчиков, то с Вами согласен, но основную роль все же играет ориентация заказчиков, которые в свою очередь, в большинстве случаев пытаются обхватить всю часть пользователей и современных, и не очень, поэтому опять создаются шаблоны на старых технологиях и опять все стоит на месте.
Ваш сайт конечно и выдает в "эфир" все что появляется в сети, но видимо Вас только это и волнует, т.к примерно два месяца назад писал админам послание с тем, что бы чуток поправили менюшку, которой не возможно воспользоваться из-за правого банера, но это осталось без внимания, а жаль.
Комментарий #4: 4 октября 2012 @ 12:29
Написал: Design FactoRy — группа: Администраторы  
На сайте с: 21.07.2009   |   Публикаций: 3300   |   Комментариев: 500
ICQ: --- не указано ---
Rewis, в каком браузере баннер перекрывает меню? Я лично только что просмотрел в 5-ти основных браузерах. Ничто не перекрывает меню.
Комментарий #5: 4 октября 2012 @ 17:50
Написал: Rewis — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Пардон, проверил еще раз, походу это блокировщик вырубает верхний баннер, а перекрывает меню баннер от Link Trade.
Комментарий #6: 5 октября 2012 @ 00:07
Написал: Design FactoRy — группа: Администраторы  
На сайте с: 21.07.2009   |   Публикаций: 3300   |   Комментариев: 500
ICQ: --- не указано ---
Rewis, Эксплорер?
Комментарий #7: 5 октября 2012 @ 06:26
Написал: Rewis — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Он родимый, такие проблемы только в IE возникают.
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц November по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Сентябрь 2017    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
252627282930