Товарные фиды для динамических кампаний в Яндекс.Директ: элементы и примеры. Picture — новый элемент, которого нет


Продолжаем серию статей про настройку динамических поисковых кампаний (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).

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

    Как происходит валидация фида

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

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

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

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

    Вывод

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

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

  • Определите ваш тип бизнеса.
  • Настройте фид в зависимости от типа бизнеса.
    Совет: чем больше полей заполнено в фиде, тем лучше система сможет определить нужного пользователя.
  • Загрузите фид в аккаунт Яндекс.Директ.

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

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

    Новый элемент picture , решает следующие задачи, встающие перед разработчиком адаптивных веб-приложений (я воспользуюсь классификацией, предложенной pepelsbey на одной из недавних конференций по фронтенду):

  • Р етина, т.е. экраны с плотностью точек на дюйм 150 и выше, на которых обычное изображение выглядит размыто
  • А даптивность, задача изменения размеров изображения согласно вашим правилам, прописанным в дизайне в зависимости от размера вьюпорта.
  • Ф ормат, возможность использовать современные форматы, такие как WebP, если они поддерживаются браузером
  • К адрирование или Художественные цели. Обрезка маловажных частей изображения, при показе на устройствах с меньшим экраном.
    • Сложив первые буквы, получаем мнемонику РАФК Синтаксис Условно, расширенный синтаксис нового элемента выглядит так
    ...
    Элемент 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 экрана производится на основе ширины исходных файлов.

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

    Вначале о проблеме

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

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

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

    Текущее общепринятое решение

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

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

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

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

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

    Новое решение:

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

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

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

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

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

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

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

  • Создайте открывающий и закрывающий теги .
  • Внутри создайте элемент для каждого выражения, что хотите обработать.
  • Добавьте атрибут media , содержащий выражения для таких вещей как высота и ширина области просмотра, ориентация и т.д.
  • Добавьте атрибут srcset с соответствующим именем файла изображения для загрузки.
  • Добавьте дополнительные имена файлов к атрибуту srcset , если нужно поддерживать разную плотность пикселей, например для Retina дисплеев.
  • Добавьте резервный (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 IE9

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

    Android 2.3

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

    Требуется JavaScript и встроенная поддержка Media Query

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

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

    Возможны дополнительные HTTP-запросы

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    Тег Adaptive Images

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

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

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

  • < script> document.cookie = "resolution=" + Math .max (screen.width , screen.height ) + "; path=/" ;

    • Этот код должен загружаться раньше других скриптов.
    Последний шаг - конфигурация файла 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 в следующей статье попробуем внедрить И максимально автоматизировать процесс ресайза картинок.
    

    2024 © gtavrl.ru.