Мы рады объявить о новой функции в нашей библиотеке Pixboost.js - Поддержка фоновых изображений CSS.

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

Если вы не знакомы с фоновыми изображениями CSS и хотели бы знать, как их оптимизировать с помощью Pixboost API, прочтите мой пост Оптимизация фоновых изображений CSS для Интернета. Учебник по оптимизации баннеров HERO .

Pixboost.js

Pixboost.js - это библиотека JavaScript, которую вы можете интегрировать в свой веб-сайт или приложение, чтобы использовать Pixboost API.

Он поддерживает любые библиотеки, которые имеют прямой доступ к DOM, такие как jQuery или Backbone.js. Он также отлично работает с обычным HTML / JS.

Основные возможности библиотеки:

  • Адаптивные изображения.
  • Ленивая загрузка
  • Гибкая интеграция с событиями DOM или JQuery

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

Также стоит отметить, что менеджеры контента могут использовать наш бесплатный инструмент Генератор сниппетов, который создает готовые к использованию фрагменты кода.

Давайте посмотрим на новую функциональность генератора фрагментов.

Использование генератора фрагментов с Pixboost.js

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

Вы можете использовать наш демо-ключ API здесь, чтобы проверить это.

Основная функциональность инструмента - предоставить фрагменты кода, которые можно вставить в исходный код.

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

В эту версию мы добавили новую опцию «Фоновое изображение». После того, как пользователь поставил галочку, сгенерированный фрагмент активирует правило CSS «background-image», чтобы применить изображение к элементу.

В настоящее время эта опция поддерживается только для режима вывода Pixboost.js, но не для необработанного HTML. Мы планируем очень скоро добавить функциональность для необработанного HTML.

Стоит отметить, что опция «Фоновое изображение» отлично работает с «Ленивой загрузкой», поэтому вы можете использовать фоновые изображения, если они не видны при начальной загрузке веб-страницы.

Прямое использование Pixboost.js

Библиотека Pixboost.js доступна на github.com, и вы можете найти раздел в README о фоновых изображениях. Здесь я покажу вам, как использовать эту функцию.

Шаг 1. Для использования библиотеки необходимо добавить следующий элемент скрипта:

Шаг 2. Самый простой способ использования фонового изображения:

В этом примере мы устанавливаем фоновое изображение для элемента div. Размер изображения будет изменен до 400 пикселей по высоте с сохранением соотношения сторон.

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

Шаг 3. Мы можем использовать разные преобразования для разных размеров экрана:

Шаг 4. Мы также можем установить разные изображения для разных размеров экрана:

Шаг 5. Если элемент не отображается при начальной загрузке, возможно, вы захотите включить отложенную загрузку (добавив data-lazy = ””):

Мы сделали все возможное, чтобы вещи оставались простыми и мощными одновременно.

Под капотом

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

Это сложно, потому что вы не можете использовать медиа-запросы так же, как в CSS. Итак, чтобы установить правильное изображение, нам нужно было оценить медиа-запрос каждой точки останова с помощью функции window.matchMedia ().

Чтобы сделать его еще лучше, мы также добавили прослушиватель событий к событию «при изменении ориентации», чтобы изображение выбиралось правильно в случае, если пользователь поворачивает их мобильный телефон или планшет.

Мы прилагаем все усилия, чтобы продолжать поддерживать браузеры IE9 +. IE9 не поддерживает window.matchMedia (), поэтому нам пришлось добавить еще один полифилл. Он крошечный (всего 777 байт) и включен в комплект. По-прежнему можно добавить только скрипт pixboost.min.js и все полифиллы по отдельности. Подробнее об этом методе здесь.

Заключение

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

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

Не стесняйтесь обращаться по адресу [email protected], если есть какие-либо функции, которые вы хотите увидеть на нашей платформе, или сказать Привет.

И, пожалуйста, РЕГИСТРАЦИЯ, если вы еще этого не сделали.