Вредоносное ПО (malware) - это назойливые или опасные программы,...
Продолжаем серию статей про настройку динамических поисковых кампаний (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.
Элемент |
Описание |
Идентификатор отеля. Обязательный элемент. |
|
Название отеля. Обязательный элемент. |
|
URL страницы предложения. Обязательный элемент. |
|
Destination name |
Местоположение отеля (не более 25 символов). Обязательный элемент. |
Цена предложения. Число и код валюты в кодировке ISO 4217. Используйте точку (.) в качестве десятичного разделителя. Рекомендуемый элемент. |
|
Количество звезд. Целое число от 1 до 5. |
|
Пользовательская оценка, число. Используйте точку (.) в качестве десятичного разделителя. |
|
Максимально возможная оценка, целое число. По умолчанию 5. |
|
Услуги отеля. Укажите значения через точку с запятой: бар; бассейн; бесплатный Wi-Fi. |
Значения с запятой заключите в кавычки ("").
Как подготовить фид для «Недвижимости»Список предложений о продаже недвижимости рекламодателя содержится в элементе . Каждое товарное предложение (квартира) описывается отдельным элементом .
В одном фиде можно передавать информацию о жилых комплексах разных застройщиков. Для этого укажите в каждом правовую информацию о застройщике в элементе .
Элемент |
Описание |
Обязательный элемент. |
|
Тип сделки. Значение — только «продажа». Обязательный элемент. |
|
Набор элементов, описывающих местоположение объекта. Во вложенных тегах — детали информации об адресе объекта. |
|
Название населенного пункта. Обязательный элемент. |
|
sub-locality-name |
|
Ближайшая станция метро. Если станций несколько, каждая должна быть указана в отдельном элементе. Во вложенных тегах укажите подробную информацию. |
|
time-on-transport |
Время до метро в минутах на транспорте. |
Обязательный элемент. |
|
Обязательный элемент. |
|
Набор элементов, описывающих стоимость объекта. Во вложенных тегах — цена и валюта, в которой указана стоимость: |
|
Название жилого комплекса. По этому элементу квартиры объединяют в ЖК. Если название ЖК неизвестно, укажите улицу и номер дома (например, Пушкинская, 25). Обязательный элемент. |
|
Информация о застройщике. Во вложенных тегах укажите подробную информацию. |
|
Полное название юридического лица застройщика. Обязательный элемент. |
|
Общая площадь. Значение и единица измерения площади передаются во вложенных тегах. |
|
Единица площади помещения. Элемент используется, если цена указана за единицу площади. Возможные значения: «кв. м»/«sq. m». |
|
Фиды с предложениями об аренде недвижимости не принимаются.
продажа жилая квартира 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
Как сформировать фид для «Автомобилей»
Элемент |
Описание |
Идентификатор товарного предложения. Обязательный элемент, если нет элемента vin. |
|
Марка автомобиля. |
|
Наименование модели. Обязательный элемент. |
|
Наименование модификации. Обязательный элемент. |
|
Обязательный элемент. |
|
Обязательный элемент. |
|
Тип кузова. Обязательный элемент. |
|
Год выпуска. Обязательный элемент. |
|
Цена автомобиля. Обязательный элемент. |
|
Валюта, в которой указана цена. |
|
VIN-номер (17 символов). |
Пример фида:
Ford Fusion 1.4d AT (68 л.с.) http://www.auto.ru/1 http://picture.auto.ru/1.jpg Хэтчбек 5 дв. красный в наличии растаможен 2015 575000 UAH XWBCA41ZXDK259205
Как подготовить фид для «Авиабилетов»
Элемент |
Описание |
URL страницы предложения. Обязательный элемент. |
|
Обязательный элемент (для смарт-баннеров). |
|
Цена предложения. Число и код валюты в кодировке ISO 4217. Используйте точку (.) в качестве десятичного разделителя. |
|
Идентификатор пункта назначения. Обязательный элемент. |
|
Идентификатор пункта отправления. |
|
Destination name |
Название пункта назначения. Обязательный элемент. |
Название пункта отправления. |
Для добавления фида в Яндекс.Директ перейдите в интерфейсе по ссылке «Фиды» внизу под кампаниями.
Затем нажмите «Добавить фид».
Как добавить фид по ссылкеДля размещения на сайте размер фида не должен превышать 512 Мб. Один раз в сутки фид скачивает робот и импортирует в Яндекс.Директ. При генерации динамических объявлений робот проверяет фид для отбора товарных предложений по заданным фильтрам один раз в сутки или чаще, если это возможно.
Файл должен быть доступен по протоколу HTTP, HTTPS или FTP. Для доступа используйте авторизацию.
Если в ссылках в фиде указаны UTM-метки, которые не подходят для отслеживания рекламной кампании, рекомендую удалить их. Для этого установите флажок «Автоматически удалять UTM-метки». Добавить новые UTM-метки можно на странице редактирования группы объявлений.
Как добавить файл с фидомВыберите необходимый для загрузки файл. Размер загружаемого файла не должен превышать 512 Мб. При обновлении файл скачивается роботом, и новые данные импортируются в Яндекс.Директ.
Вы можете разместить фид в архиве, созданном с помощью алгоритма сжатия ZIP (расширение.zip) или GNU ZIP (расширение.gz).
Если при добавлении фида произошла ошибка (например, размер / формат / ссылка на фид не соответствуют требованиям), вы увидите статус «Ошибка загрузки». Для просмотра отчета об ошибках перейдите по ссылке «Подробнее».
Как происходит валидация фидаВалидация — комплексная проверка соблюдения требований.
Условия проверки при чтении файла:
- все обязательные элементы присутствуют;
- все названия элементов корректные;
- каждый элемент присутствует не более одного раза.
При невыполнении любого из этих условий файл отклоняется.
ВыводМы рассмотрели все варианты и форматы фидов для настройки динамических кампаний в Яндекс Директ.
Напомню, для правильного создания фида:
Совет: чем больше полей заполнено в фиде, тем лучше система сможет определить нужного пользователя.
В следующей статье я расскажу, как настроить кампании с таргетингом на содержание сайта и на фид страниц.
Изображения давно известны как самые трудоемкие аспекты адаптивного веб-дизайна. Сегодня, мы увидим как можно использовать элемент picture в качестве решения проблемы адаптивных изображений прямо сейчас.
Во-первых, сама проблемаВремена дизайна сайтов с фиксированной шириной и полным соответствием макету давно позади. В нынешнее время широкоформатных мониторов, интернет-телевидения, планшетов и смартфонов различных размеров наш дизайн должен принимать в расчет любые разрешения – от 320 пикселей и до 7680.
Все эти разрешения предъявляют требования к изображениям – они должны растягиваться и уменьшаться, чтобы соответствовать всему разнообразию требований. Это может оказаться проблемой, т.к. за исключением векторной графики, большинство изображений имеет фиксированную ширину в пикселях, которая не изменяется.
Так что же делать?
Нынешнее, самое распространенное решениеКак правило, вы найдете следующее в CSS коде практически любого адаптивного сайта:
img { max-width: 100%; height: auto;}
img { max - width : 100 % ; height : auto ; } |
Этот код использует настройку max-width: 100%; для того, чтобы убедиться в том, что изображение не будет выдаваться за пределы родительского контейнера. Если родительский контейнер станет меньше ширины изображения, изображение будет уменьшаться вместе с ним. Настройка height: auto; присутствует для того, чтобы при уменьшении сохранялись пропорции изображения.
Одно «резиновое» изображение для всех устройств
Это решает проблему в одном ключе, позволяя нам показывать одно изображение при разных обстоятельствах. Но, оно не позволяет нам показывать разные изображения для различных обстоятельств.
Новое решение: тэг picturepicture — это новый элемент, который должен стать частью HTML5. Он значительно ускорит процесс размещения адаптивных изображений аналогично принципам работы элементов audio и video. Он позволит задавать несколько элементов source, каждый из которых будет указывать на различные файлы изображений вместе с условиями, при которых они должны загружаться.
Он позволит вам загружать различные изображения в зависимости от:
Результатов медиа-запроса, например, высота окна просмотра, ширина, ориентация
Плотность пикселей
Что означает, что вы можете:
Загружать изображения соответствующих размеров, с максимальной отдачей используя имеющуюся ширину канала.
Загружать изображения с различной обрезкой и пропорциями в соответствии с изменением разметки для экранов разной ширины.
Загружать изображения с высоким разрешением для экранов с высокой плотностью пикселей.
Разные изображения загружаются в зависимости от обстоятельств
Как работает элемент picture?Основные шаги для работы с элементом picture это:
Создание открывающих и закрывающих тэгов picture.
Внутри этих тэгов создайте элемент source для каждого запроса, который вы хотите произвести.
Добавьте атрибут media вашему запросу для таких вещей как высота окна просмотра, ширина, ориентация, и т.д.
Добавьте атрибут srcset с соответствующим именем файла изображения для загрузки.
Добавьте дополнительные имена файлов вашему srcset атрибуту, если вы хотите поддерживать экраны с высокой плотностью пикселей, например Ретина.
Добавьте элемент img в качестве запасного варианта.
Вот несложный пример, который проверяет, если окно просмотра меньше 768 пикселей, и в случае соответствия загружает изображение меньшего размера:
< picture > < source srcset = "smaller.jpg" media = "(max-width: 768px)" > < source srcset = "default.jpg" > < img srcset = "default.jpg" alt = "My default image" > < / picture > |
Вы заметите, что синтаксис, использованный в атрибуте media точно такой же, как и тот, к которому вы привыкли, составляя медиа запросы на CSS. Вы можете использовать такие же проверки, значит, вы можете создать запросы для max-width, min-width, max-height, min-height, orientationи так далее.
Вы можете использовать эти проверки для того, чтобы загружать альбомную или портретную версии изображения в зависимости от ориентации устройства, и вы также можете добавить запросы размеров. Например:
< picture > < source srcset = "smaller_landscape.jpg" media = "(max-width: 40em) and (orientation: landscape)" > < source srcset = "smaller_portrait.jpg" media = "(max-width: 40em) and (orientation: portrait)" > < source srcset = "default_landscape.jpg" media = "(min-width: 40em) and (orientation: landscape)" > < source srcset = "default_portrait.jpg" media = "(min-width: 40em) and (orientation: portrait)" > < img srcset = "default_landscape.jpg" alt = "My default image" > < / picture > |
Код выше загружает уменьшенную, обрезанную для альбомной ориентации версию изображения для устройства с соответствующей ориентацией. Он загружает увеличенную версию того же изображения для устройств с большим экраном.
Если устройство имеет портретную ориентацию, он загружает изображение, обрезанное соответствующим образом: в меньшем размере – для небольших устройств и увеличенное изображение для устройств с более высоким разрешением.
Если вы хотите предоставлять версии изображений с различным разрешением для экранов с более высокой плотность, вы можете это сделать с помощью добавления дополнительных имен файлов атрибуту srcset. Например, давайте посмотрим на первый пример кода выше с добавлением поддержки разрешения экрана «Ретина 2х»:
< picture > < source srcset = "smaller.jpg, smaller_retina.jpg 2x" media = "(max-width: 768px)" > < source srcset = > < img srcset = "default.jpg, default_retina.jpg 2x" alt = "My default image" > < / picture > |
Медиа запрос обрабатывается в первую очередь, таким образом, вы можете контролировать размеры изображения на экране. Затем, проверяется плотность пикселей экрана и если высокая плотность поддерживается и разрешена настройками пользователя, будет загружена версия изображения с более высоким разрешением.
Использование picture сегодняшний деньСейчас родная имплементация picture находится в разработке для браузеров Chrome, Firefox и Opera.В будущем, мы скорее всего, увидим более широкую поддержку и в остальных браузерах. Но, на сегодняшний день поддержка только ожидается.
Пока что, вам не нужно ждать, если вы хотите начать использовать picture прямо сейчас. Вам всего лишь нужно использовать Picturefill 2.0 — полизаполнение предоставляемое разработчиками из Filament Group .
После того, как вы скачаете файл picturefill.js в свой проект, он может применяться всего лишь загрузкой его в секцию head вашего сайта:
|
Также есть возможность загружать скрипт асинхронно для большей эффективности, о чем вы можете прочитать в документации Picturefill . Вместе с загрузкой этого скрипта, элемент picture будет работать так, как я описал, с небольшими ограничениями. ] -- > < source srcset = "smaller.jpg" media = "(max-width: 768px)" > < source srcset = "default.jpg" > < ! -- [ if IE 9 ] > < / video > < ! [ endif ] -- > < img srcset = "default.jpg" alt = "My default image" > < / picture >
Android 2.3
Также как IE9, Android 2.3 не видит элементы source внутри тэгов picture. Однако, он распознает атрибут srcset, когда тот присваивается обычному тэгу img. Убедитесь в том, что вы включаете запасной элемент img с дефолтным именем файла в атрибуте srcset для Android 2.3 или любого другого браузера со схожей проблемой.
Требуется JavaScript и родная поддержка медиа запросов
Так как это решение реализовано на JavaScript, соответственно, оно нуждается в JavaScript для корректной работы в браузере. Picturefill 2.0 не предоставляет решений для “no-js”, потому что в противном случае, множество изображений стало бы появляться на страницах, когда родная поддержка будет реализована. Однако, вы можете использовать Picturefill 1.2 если возможность “no-js” важна для вас.
Следующим требованием Picturefill является родная поддержка медиа запросов, для того чтобы запросы в атрибуте media работали. Все современные браузеры поддерживают медиа запросы, в то время как IE8 и ниже является единственным не поддерживающим браузером с небольшой остаточной базой пользователей .
Возможны дополнительные HTTP запросы
Для браузеров, имеющих родную поддержку srcset, но не поддерживающих picture, возможно заданное имя файла в запасном элементе img может быть запрошено до того, как более подходящее изображение будет определено в элементе img. Эта проблема временная и она решится тогда, когда родная поддержка picture будет реализована.
- Не найдено описание для элемента "yml_catalog". Возможно неверно указан корневой элемент.
- Фатальная ошибка: Ошибка парсинга XML: Error parsing XML feed: Unknown tag: XML tag "b" (строка...
- Отсутствует обязательный элемент picture
- Ошибка спецификации XML. Приведите прайс-лист в соответствие с техническими требованиями выбранного формата...
- No required offers"s parameter
Ошибка видимо из-за того, что XML совсем не формируется, либо вы сообщили Яндексу неверную ссылку на YML. Для поиска причин ошибки откройте ссылку на ваш YML в браузере.
В процессе формирования YML, произошла какая-то ошибка. PHP выкинул сообщение об ошибке, а он это делает в тэге "b". Откройте исходный код YML, по номеру строки вы легко найдете текст PHP ошибки. Если не знаете, что она значит - поищите в Google. Уверен, вы найдете и рекомендации по устранению этой ошибки.
По правилам Яндекс.Маркета, у товара в экспорте должна быть картинка, хотя бы одна. Товары без картинок не экспортируются. Проверьте, что в настройках модуля в поле "Кол-во картинок товара" присутствует число больше нуля. И проверьте, чтобы у товаров в магазине базе были картинки.
Ошибка вызвана тем, что в YML-экспорте присутствуют посторонние тэги. Это происходит, если вы экспортируете что-то в тэг keywords. Яндексу этот тэг не нужен. Укажите в настройках модуля "Брать тэг keywords из поля" = "Не выгружать"
Ошибка сообщает, что в YML не найден обязательный параметр товарного предложения. Для одежды, обуви и аксессуаров цвет и размер товара должен присутствовать в YML. По строке, где возникла ошибка, вы можете узнать, у какого именно товаре не указан цвет и/или размер. Для этого товара в OpenCart надо указать атрибут или опцию, которая будет экспортирована модулем в YML. Этот атрибут или опцию отметьте галкой в настройках модуля.
- При открытии YML в браузере ошибка 500 или 502 "Bad Gateway", или просто белый экран.
- Ошибка синтаксического анализа XML: корневой элемент не найден
- Ошибка "Maximum execution time of 30 seconds exceeded"
- В экспорте присутствуют не все товары.
Скрипт, формирующий YML был завершен с ошибкой. Настройки вашего сайта таковы, что ошибки не показываются. Вам необходимо включить отображение ошибок. Включить ошибки в настройках магазина в админке OpenCart скорее всего будет недостаточно. Отображение ошибок надо включать в файлах.htaccess и php.ini . Но и этого может быть недостаточно. Хостинг сайта может быть так настроен, что файлы эти могут не влиять на вывод ошибок. Правильнее всего - обратиться с технической поддержке хостинга.
Скрипт, формирующий YML был завершен с ошибкой. При этом YML был сформирован не полностью - нет закрывающих тэгов. Загляните в исходный код YML. Если в конце есть сообщение об ошибке - ищите текст ошибки в Яндексе или Гугле. Если сообщения об ошибке нет - смотрите предыдущий пункт.
PHP-скрипту по-умолчанию отводится 30 секунд на выполнение. Если за 30 секунд скрипт не сформировал
YML, то скрипт был принудительно завершен. Разумеется, YML при этом не сформировался, либо сформировался не полностью.
Дело в том, что экспорт всей товарной базы - довольно ресурсоемкая операция. Особенно много времени занимает масштабирование картинок для Яндекса,
ведь Яндекс принимает картинки размером не менее, чем 600x600 пикселей. К счастью, OpenCart сохраняет масштабированные картинки в кэш изображений.
При повторном экспорте картинки будут быстро браться уже из кэша. Пока кэш изображений не сформирован полностью, скрипт экспорта в YML
может работать долго. Попробуйте позапускать скрипт несколько раз, сформируется кэш, скрипт будет работать быстрее, попадая в лимит времени.
Если это не помогло, время формирования YML по-прежнему велико (из-за того, что у вас очень много товаров), то можно попробовать
увеличить параметр max_execution_time в файле настроек PHP php.ini.
Если и этого мало (ваш хостинг слабоват для Интернет-магазина с такой товарной базой), то можно попытаться формировать YML-экспорт, запуская скрипт
через php-cli .
Может быть несколько причин, по которым не все товары присутвуют в YML-экспорте. Общая причина - настройки модуля и содержимое товарной базы.
В OpenCart один товар может показываться в нескольких категориях, а в формате YML товар может принадлежать
лишь к одной категории. Модуль экспорта привязывает товар к первой попавшейся категории. Поэтому может оказаться, что в некоторых категориях
товаров нет, и эти категории не будут присутствовать в экспорте, хотя товары присутствовать будут, правда в других категориях.
В ocStore есть главные категории
, и можно привязывать товары только к главным категориям. Для этого в настройках модуля поставьте галку
"У товаров есть главные категории". В этом случае вы получите более детальную классификацию товаров в YML-экспорте, но товары, у которых
главная категория не проставлена, вобще не будут экспортированы.
- Как не экспортировать товар, у которого количество нулевое?
В настройках модуля во вкладке "Склад и доставка" ищите поле «Статус "Нет в наличии"». В этом поле отметьте Все статусы товара. Чтобы отметить несколько элементов списка, при клике мышью держите клавишу Ctrl.
Разработка на языках
: PHP, JavaScript, node.js.
Базы данных
: MySQL, PostgreSQL, MongoDB.
Доработка CMS
: OpenCart, PrestaShop, Wordpress.
Интеграция с
: платежными системами, ВКонтакте, Facebook, Яндекс.
В девелоперских сборках браузеров Chrome, Firefox и Opera появилась поддержка нового элемета picture , призванного решить ряд проблем возникающих при разработке адаптивных дизайнов. Давайте рассмотрим его подробнее.
Новый элемент picture , решает следующие задачи, встающие перед разработчиком адаптивных веб-приложений (я воспользуюсь классификацией, предложенной pepelsbey на одной из недавних конференций по фронтенду):
...
Элемент picture не рендерит никакой контент, а лишь является справочным контейнером для вложенного в него тега img .
Поэтому для большинства задач хватит сокращенной записи, совсем без использования picture
Давайте рассмотрим как решаются вышеозначенные проблемы с помощью нового элемента. Все файлы примеров можно найти в этом репозитории github.com/fetis/picture
Для тестирования примеров из данной статьи на десктопе вам понадобятся либо Firefox Nighlty (поддержка picture включается настройкой dom.image.picture.enable в about:config), либо Chrome Canary , либо Opera Developer . На мобильном устройстве новый элемент можно протестировать в Chrome Beta
Ретина У нас есть изображение 400х300 пкс, которое мы хотим также красиво показывать при двукратной и трехкратной плотности пикселей. Для этого готовим еще 2 картинки, размерами 800x600 и 1200х900 и пишем следующий код2x и 3x это дескрипторы плотностей пикселей , они говорят браузеру, что вот эти картинки были подготовлены для вот этой плотности, если хочешь, можешь использовать. Обратите внимание, они не заставляют бразуер использовать эти картинки, а только подсказывают ему. Окончательное решение остается за ним в зависимости от других условий, например, текущего соединения.
Атрибут src в данном случае служит источником картинки для плотности < 2 и фолбеком на случай, если браузер не поддерживает новый элемент.
Адаптивность Представим раскладку, в которой есть единственная контрольная точка (breakpoint) 700пкс. При размере вьюпорта более 700 пкс мы показываем справа сайдбар и размер нашего изображения должен быть 75% от ширины экрана. В противном случае сайдбар располагается в конце страницы и изображение должно быть растянуто на всю ширину. Это реализуется следующим кодом400w, 800w, 1200w - это дескрипторы ширины , они подсказывают браузеру картинка какой ширины находится по данному URL и на основе этой информации браузер принимает решение какое изображение лучше всего подойдет в текущей ситуации. Как и в случае с ретиной информация носит рекомендательный характер и окончательное решение какое изображение грузить остается за браузером.
Одновременное использование дескрипторов плотности и ширины недопустимо.
В атрибуте sizes перечисляются размеры изображения для всех контрольных точек в нашем дизайне. Контрольные точки задаются в виде обычного медиавыражения, браузер берет первое, которое возвращает Истину и дальше цепочку не рассматривает. Для значения ширины используется новая единица длины vw , которая возвращает значение в процентах от ширины вьюпорта.
Если для картинки нет необходимости использовать контрольные точки, то запись можно сократить до такой sizes="100vw" . А для более сложных дизайнов можно использовать CSS-функцию calc() , например
sizes="(max-width: 30em) 100vw, (max-width: 50em) 50vw, calc(33vw - 100px)"
Самый сложный в поведении атрибут на мой взгляд. Если не указывать sizes , то браузер всегда выбирал самую большую картинку. В сочетании с width не работает, хотя казалось бы логичное сочетание и ряд других глюков. Возможно это особенности ранней реализации.
Как видите, мы уже покрыли 80% потребностей адаптивной верстки, а еще ни разу не использовали picture , настало время ему тоже вступить в игру.
Формат Использование различных форматов для изображений мало отличается от способов используемых для тегов video или audioМы указываем список источников и mime/type для каждого, а браузер уже выбирает первый, который знает. В качестве фолбека используется изображения из атрибута src .Кадрирование Когда мы показываем фото на меньшем экране иногда имеет смысл обрезать лишние детали, оставив только основную часть. С этой задачей нам поможет справиться атрибут media
В каждом атрибуте media мы задаем медиавыражение, при котором у нас будет меняться исходное изображение и, в отличие от предыдущих примеров, браузер будет обязан ему следовать. Обратите также внимание как кадрирование здесь сочетается с адаптивностью, чтобы растянуть изображение на всю ширину.РАФК А теперь все 4 метода в одном флаконе:) Возможно так будет выглядеть вставка картинок через пару лет (пример из блога Оперы)
Здесь используются 2 формата JPEG и WebP. При ширине экрана более 1280 пкс показывается полноразмерная картинка в половину вьюпорта. При ширине от 640 до 1279 показывается обрезанное фото на 60% ширины вьюпорта. При ширине экрана меньше 640пкс показывается обрезанная фотография на 100% ширины. Выбор под текущее DPI экрана производится на основе ширины исходных файлов.