Picture — новый элемент, которого нет. Использование тэга HTML5 picture для адаптивных изображений

Особенностью гибких документов является непостоянный состав полей на различных изображениях. Поэтому при создании элемента следует иметь в виду, что объект(ы), описываемый данным элементом может отсутствовать на некотором изображении, поэтому найти его не удастся. Также возможно повреждение изображения при сканировании, такое как зачернение или, наоборот, осветление отдельных участков изображения, приводящее к утере информации. В таком случае объект, соответствующий элементу, также не будет найден. Программа FlexiLayout Studio позволяет при отсутствии элемента на изображении продолжить поиск других элементов. Для того, чтобы разрешить наложение описания на изображение в случае, если некоторый объект не найден, нужно сделать его необязательным.

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

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

Во всех остальных случаях объекты изображения следует описывать опциональными элементами.

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

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

Замечание. В отличие от простых элементов все групповые элементы по умолчанию обязательны.

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

Таким образом, элементы могут использоваться для идентификации документа (обязательные), поиска блоков (обязательные и необязательные) и для отбрасывания неверных гипотез (недопустимые элементы).

Выбор варианта использования элемента осуществляется в диалоге свойств элемента (вкладка General ).

Изображения обязательных и недопустимых элементов выделяются следующим образом.

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

Времена попиксельного (pixel perfect) и дизайна фиксированной ширины (fixed-width) ушли в прошлое. Теперь во времена широкоформатных мониторов, интернет телевидения, планшетов и смартфонов различных размеров наши дизайны должны удовлетворять любому устройству шириной от 320px до потенциальных 7680px.

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

Так что же нам делать?

Как правило, вы найдете этот код на любом сайте с адаптивные дизайном:

Img { max-width: 100%; height: auto; }

Здесь используется max-width: 100%; для гарантии того, что изображение никогда не выйдет за пределы ширины родительского контейнера. Если родительский контейнер сжимается до ширины, меньшей чем ширина изображения - последнее сжимается вместе с контейнером. Установка height: auto; нужна для сохранения пропорций.

Одно "жидкое" изображение под все случаи

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

Это новый элемент, который является частью HTML5.

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

Это позволит загружать разные изображения в зависимости от:

• Результатов media выражений, например высоты, ширины или ориентации видимой области
• Плотности пикселей

Это в свою очередь означает, что вы можете:

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

Основные шаги при работе с

Добавьте резервный (fallback) элемент .

Вот простой пример, где для случая, когда ширина видимой области меньше 768px - загружается уменьшенное (smaller) изображение:

Можно заметить, что синтаксис, используемый в атрибуте media является таким же, как и при использовании в CSS media queries. Вы можете использовать те же самые проверки, т.е. проверять max-width , min-width , max-height , min-height , orientation и т.д.

Эти проверки можно использовать для того, чтобы например загружать альбомную (landscape) или книжную (portrait) версию изображения в зависимости от ориентации устройства, к тому же можно одновременно проверять размеры в этих выражениях. Например:

Этот код загружает уменьшенную альбомную (landscape) версию изображения для устройств с малым экраном и соответствующей ориентацией. И увеличенную версию того же изображения для устройств с большим экраном.

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

Если вы хотите предоставлять изображения в другом разрешении для дисплеев с повышенной плотностью пикселей, это можно сделать, указав дополнительные имена файлов в атрибуте srcset . Давайте к примеру посмотрим на наш первый кусок кода с добавлением обработки для Retina 2x дисплеев:

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

Прямо сейчас встроенная поддержка Реализована в Chrome, Firefox и Opera. В будущем, вполне вероятно, мы увидим широкую поддержку и другими браузерами. Но до этого момента еще надо дожить.

Тем временем вам не нужно ждать, если хотите использовать Прямо сейчас. Просто воспользуйтесь Picturefill 2.0 ; polyfill от умных людей из Filament Group .

После скачивания файла picturefill.js в свой проект просто подключите его в шапке:

Есть также опция для асинхронной загрузки скрипта, о которой можно прочитать в документации Picturefill .

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

Picturefill отлично работает с разными версиями IE, однако IE9 не поддерживает элементы, которые используются внутри . Чтобы обойти это, оберните source элементы в теги с помощью условных комментариев; это сделает их видимыми для IE9, например:

Как и IE9, Android 2.3 не показывает элементы внутри Однако он понимает атрибут srcset при использовании в обычных тегах. Убедитесь в том, что всегда включаете резервный с именем файла по умолчанию в атрибут srcset для Android 2.3 и других браузеров, которые могут иметь такую же проблему.

Соответственно требуется, чтобы JavaScript был включен в браузере. Picturefill 2.0 не предоставляет «no-js» решения, ведь если это будет сделано, то когда браузер выкатит нативную поддержку Будет показываться уже несколько изображений. Однако, вы можете использовать Picturefill 1.2, если параметр «no-js» является для вас обязательным.

Другим требованием Picturefill является встроенная поддержка media query, чтобы позволить обрабатывать выражения в атрибуте media . Все современные браузеры поддерживают media-выражения, лишь IE8 и ниже не имеют их поддержки, что соответствует лишь малой части пользователей .

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

Это лишь временная проблема, и она пропадет как только выкатят встроенную поддержку Дополнительная информация

• Прочитайте подробнее о Picturefill 2.0 и скачайте его для своего проекта с этой страницы .
• Ознакомьтесь с полной информацией по элементу На сайте responsiveimages.org .

Пробуйте использовать В своем проекте уже сегодня!

Самый простой вариант "адаптировать" картинку - задать ширину 100% а высоту рассчитывать автоматически. Наше изображение никогда не будет шире родительского блока, при этом браузер будет ресайзить его с сохранением пропорций. Недостаток этого способа в том что и мобилке и дэсктопу отдаётся одна и таже, большая картинка. Будет лучше если на смартфон будет отправлена картинка меньшего размера. Таким образом мы экономим трафик посетителю и ускоряем загрузку страницы.

Adaptive Images интересное решение учитывая простоту установки и отсутствие заморочек с изменением разметки. Определяет размер экрана посетителя и вставляет на страницу нужное изображение.

В установке нет ничего сложного. Скачиваем дистрибутив с сайта http://adaptive-images.com/. Копируем файлы adaptive-images.php и.htaccess в корень сайта. Скорее всего в корне уже лежит файл.htaccess. В этом случае отредактируйте его но прежде сделайте копию на всякий случай. Если в вашем.htaccess файле есть раздел который начинается с

вставьте в этот раздел то, что содержится между # Adaptive-Images и # END Adaptive-Images. Если же такого раздела нет, то скопируйте содержимое целиком.
В раздел нужно вставить следующий JS код

Этот код должен загружаться раньше других скриптов.
Последний шаг - конфигурация файла adaptive-images.php. В переменной $resolution - указывается ширина экранов. Как правило задаются размеры указанные в медиа-запросах в CSS. $cashe_path путь к папке куда будут складываться изменённые изображения.

Теперь о том как всё это работает. Размер окна посетителя определяется JavaScript размещённом в разделе . Эта информация записывается в куки. Когда браузер встречает на странице тег и отправляет запрос на сервер чтобы получить изображение он отправляет куки. Веб-сервер Apache получив запрос на изображение смотрит есть ли у него какие нибудь специальные инструкции для файлов. В.htaccess у нас есть правило по которому сервер любой запрос на jpg, png или gif отправляет в adaptive-images.php. PHP файл ищет куки и узнаёт какой размер экрана. Дальше происходит сравнение значения из куки со значениями прописанными в переменной $resolution и выбирается лучшее значение. Предположим было выбрано значение 480px. Отресайзенная картинка должна находиться в папке /ai-cashe/480/. Если её там нет то будет запрошен исходный файл и если его ширина будет меньше ширины экрана то по посетителю отдадут исходный файл. Если размер больше, то файл уменьшается до нужного размера и посылается пользователю. Изменённая копия сохраняется, чтобы в следующий раз не ресайзить.

Просматривая возможные решения я обратил внимание что все они были предложены до элемента Этот новый элемент предлагает лучший вариант решения проблемы адаптивных картинок.

Adaptive Image - простой в настройке. Это хорошая альтернатива если нет желания заморачиваться с кучей файлов, создавая по три файла на каждую картинку. Хотя этот плюс может обратиться в минус. Часто уменьшая большие фотографии в конечном итоге лучше вырезать какую-то часть чем просто отресайзить. Ещё один минус Adaptive Image - нагрузка на сервер.

Кстати, если ваш на сайт работает на Drupal в следующей статье попробуем внедрить И максимально автоматизировать процесс ресайза картинок.

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

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

Товарные предложения, описанные не в соответствии со своим типом, отклоняются.

Любой XML-документ может содержать только один корневой элемент. Формат YML в качестве корневого использует элемент . Атрибут date элемента должен соответствовать дате и времени генерации YML-файла на стороне рекламодателя. Дата должна иметь формат YYYY-MM-DD hh:mm.

• Упрощенный тип описания
• Произвольный тип описания (vendor.model)

Базовый, более простой тип описания.

Пример: \n \n 1620.00\n 1800.00\n RUB\n 19\n \n false\n true\n false\n Антивирус ESET NOD32 Platinum Edition\n Eset\n NOD32-ENA-NS(BOX)-2-1\n Антивирус ESET NOD32 Platinum Edition - лицензия на 2 года NOD32-ENA-NS(BOX)-2-1\n Оплата: Наличные, Б/Н, пластиковые карты, кредит\n true\n Россия\n 18\n

Атрибуты элемента

Элементы, входящие в

Этот тип описания является наиболее удобным и универсальным, он рекомендован для описания товаров из большинства категорий.

Атрибуты элемента

Элементы, входящие в

Отели: фид «Отели и аренда жилья» Google Рекламы

Фид «Отели и аренда жилья» Google Рекламы в формате CSV должен использоваться для типа бизнеса «Отели» . Первая строка содержит названия столбцов, а следующие строки ― сами данные. Содержимое столбцов отделяется друг от друга запятой. Данные в фиде должны быть в кодировке UTF-8.

Примечание. Значения, содержащие запятую, нужно заключить в кавычки (\"\"). Например, \"Москва , центр\".

Автомобили: фид Авто.ру

Фид Авто.ру в формате XML должен использоваться для типа бизнеса «Автомобили» . Данные в фиде должны быть в кодировке UTF-8.

Список предложений о продаже недвижимости рекламодателя содержится в элементе . Каждое товарное предложение (квартира) описывается отдельным элементом .

В одном фиде можно передавать информацию о разных ЖК разных застройщиков. Для этого укажите в каждом правовую информацию о застройщике в элементе .

Внимание.

Мы не принимаем фиды с предложениями об аренде недвижимости.

Пример: \n продажа\n жилая\n квартира\n http://www.developer.ru/search18\n 2015-04-02T19:00:06+03:00\n \n Санкт-Петербург\n о. Васильевский\n 18-я линия В.О., 32\n \n Василеостровская\n 10\n 5\n \n \n \n 4780000\n RUR\n \n \n ЗАО \"Застройщик\" \n \n 13\n 15\n \n 63.00\n кв. м\n \n Северная фантазия\n http://www.developer.ru/images/plans/000001289.jpg\n

Атрибуты элемента

Элементы, входящие в

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

Авиабилеты: фид «Авиабилеты» Google Рекламы

Фид «Авиабилеты» Google Рекламы в формате CSV должен использоваться для типа бизнеса «Авиабилеты» . Первая строка содержит названия столбцов, а следующие строки ― сами данные. Содержимое столбцов отделяется друг от друга запятой. Данные в фиде должны быть в кодировке UTF-8.

Пример: Элементы, входящие в CSV

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

Другой бизнес: универсальный фид

Универсальный фид в формате CSV может использоваться в типе «Другой бизнес» . Первая строка содержит названия столбцов, а следующие строки - сами данные. Содержимое столбцов отделяется друг от друга запятой. Данные в фиде должны быть в кодировке UTF-8.

Элементы, входящие в CSV

Другой бизнес: фид «Путешествия» Google Рекламы

Фид «Путешествия» Google Рекламы в формате CSV может использоваться в типе «Другой бизнес» . Первая строка содержит названия столбцов, а следующие строки - сами данные. Содержимое столбцов отделяется друг от друга запятой. Данные в фиде должны быть в кодировке UTF-8.

Элементы, входящие в CSV

В таблице ниже описаны элементы фида, которые используются для создания смарт-баннеров.

Чтобы добавить фид, на странице со списком кампаний перейдите по ссылке Фиды . На странице Управление фидами нажмите кнопку +Добавить фид и выберите тип вашего бизнеса.

• Ссылка на файл
• Загрузить файл

Выберите необходимый для загрузки файл. Размер загруженного файла не должен превышать 512 Мб. При обновлении файл скачивается роботом, и новые данные импортируются в Директ.

Вы можете разместить фид в архиве, созданном с помощью алгоритма сжатия ZIP (расширение.zip) или GNU ZIP (расширение.gz).

Если произошла ошибка при добавлении фида (например, размер, формат фида или ссылка на него не соответствуют требованиям), вы увидите статус «Ошибка загрузки» и ссылку на отчет об ошибках.

При чтении файла проверяются следующие условия:

• присутствуют все обязательные элементы;
• все названия элементов являются корректными;
• каждый элемент присутствует не более одного раза.

При невыполнении любого из этих условий файл отклоняется.

Продолжаем серию статей про настройку динамических поисковых кампаний (Dynamic Search Ads). Ранее я писал про DSA для Google Рекламы . Сегодня рассмотрим элементы и примеры фидов для Яндекс.Директ.

Товарный фид — файл с данными о всех товарах на сайте и их атрибутах (уникальные идентификаторы, ссылки на товары и их изображения).

В сервисе доступны такие категории фидов:

Сформируйте фид в формате YML. Любой XML-документ может содержать только один корневой элемент.

Формат YML в качестве корневого использует элемент . Атрибут date элемента должен соответствовать дате и времени генерации YML-файла на стороне рекламодателя. Задайте дату в формате YYYY-MM-DD hh:mm .

http://www.надежнаятехника.рф/catalog/element/index.php?from=ya_market&utm_source=ya_market&utm_medium=cpc& 889.00 17000.00 UAH 1111 http://89.123.45.678/catalog/photo/19/6.JPG false false true Принтер НP Deskjet D2663 Серия принтеров для людей, которым нужен надежный, простой в использовании цветной принтер для повседневной печати... Необходима предоплата. true Япония

Для типа бизнеса «Отели» вы можете использовать фид «Отели и аренда жилья» Google Рекламы (формат CSV). Содержимое столбцов отделяется друг от друга запятой. Данные в фиде должны быть в кодировке UTF-8.

Значения с запятой заключите в кавычки ("").

Список предложений о продаже недвижимости рекламодателя содержится в элементе . Каждое товарное предложение (квартира) описывается отдельным элементом .

В одном фиде можно передавать информацию о жилых комплексах разных застройщиков. Для этого укажите в каждом правовую информацию о застройщике в элементе .

Фиды с предложениями об аренде недвижимости не принимаются.

продажа жилая квартира http://www.developer.ru/search18 2015-04-02T19:00:06+03:00 Санкт-Петербург о. Васильевский 18-я линия В.О., 32 Василеостровская 10 5 4780000 UAH ЗАО "Застройщик" 13 15 63.00 кв. м Северная фантазия http://www.developer.ru/images/plans/000001289.jpg

Пример фида:

Ford Fusion 1.4d AT (68 л.с.) http://www.auto.ru/1 http://picture.auto.ru/1.jpg Хэтчбек 5 дв. красный в наличии растаможен 2015 575000 UAH XWBCA41ZXDK259205

Для добавления фида в Яндекс.Директ перейдите в интерфейсе по ссылке «Фиды» внизу под кампаниями.

Затем нажмите «Добавить фид».

Для размещения на сайте размер фида не должен превышать 512 Мб. Один раз в сутки фид скачивает робот и импортирует в Яндекс.Директ. При генерации динамических объявлений робот проверяет фид для отбора товарных предложений по заданным фильтрам один раз в сутки или чаще, если это возможно.

Файл должен быть доступен по протоколу HTTP, HTTPS или FTP. Для доступа используйте авторизацию.

Если в ссылках в фиде указаны UTM-метки, которые не подходят для отслеживания рекламной кампании, рекомендую удалить их. Для этого установите флажок «Автоматически удалять UTM-метки». Добавить новые UTM-метки можно на странице редактирования группы объявлений.

Выберите необходимый для загрузки файл. Размер загружаемого файла не должен превышать 512 Мб. При обновлении файл скачивается роботом, и новые данные импортируются в Яндекс.Директ.

Вы можете разместить фид в архиве, созданном с помощью алгоритма сжатия ZIP (расширение.zip) или GNU ZIP (расширение.gz).

Если при добавлении фида произошла ошибка (например, размер / формат / ссылка на фид не соответствуют требованиям), вы увидите статус «Ошибка загрузки». Для просмотра отчета об ошибках перейдите по ссылке «Подробнее».

Валидация — комплексная проверка соблюдения требований.

Условия проверки при чтении файла:

• все обязательные элементы присутствуют;
• все названия элементов корректные;
• каждый элемент присутствует не более одного раза.

При невыполнении любого из этих условий файл отклоняется.

Мы рассмотрели все варианты и форматы фидов для настройки динамических кампаний в Яндекс Директ.

Напомню, для правильного создания фида:

В следующей статье я расскажу, как настроить кампании с таргетингом на содержание сайта и на фид страниц.