Pull to refresh

qpimg — динамическое создание CSS спрайтов

Reading time 2 min
Views 3K
При разработке сайтов все чаще и чаще приходиться использовать технологию CSS спрайтов, дабы уменьшить кол-во изображений загружаемых на странице. Создание и редактирование таких изображений является не простой задачей, на которую тратится довольно таки много времени: изначально нужно скомпоновать изображения в графическом редакторе, а после описать позиционирование и размеры каждого элемента в файле стилей (CSS). Редактирование элементов и изменение их размеров может повлечь глобальный пересмотр спрайта, вплоть до полного его пересоздания.



При использовании кэширования данных (браузером) на стороне клиента отладка спрайтов так же добавляет «пустой» работы. Необходимо каждый раз изменять имена css-файлов и изображений, чтобы отдать браузеру новые версии данных.

qpimg — php5-библиотека для динамического создания CSS спрайтов (CSS sprites). Она и решает вышеперечисленные проблемы.

Пример


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

Результат объединения изображений

Основные моменты/преимущества qpimg


  • qpimg позволяет описывать неограниченное количество карт (карта – это совокупность изображения-спрайта и соответствующего ему css-файла). Параметры каждой карты описываются в едином конфигурационном php-файле. Это дает возможность разработчику динамически управлять картами во время разработки сайта;
  • гибкие настройки параметров каждого объекта на карте;
  • названия объектов (css-селекторы) задаются независимо от названия их файлов;
  • qpimg позволяет назначать фоновые изображения, как для пользовательских css-селекторов (например, «элемент списка», «div-объект с конкретным ID» и т.д.), так и использовать «собственные» qpimg-правила для формирования пользовательских css-селекторов;
  • возможность включения в карту удаленных изображений хранящиеся на других сайтах;
  • объединение css-файлов различных карт в единый css-файл (и отдача его пользователю), но использование при этом отдельных спрайтов (изображений);
  • нет необходимости формировать/корректировать css-файлы и изображения вручную;
  • существует возможность создавать карты «на лету» (во время выполнения скриптов сайта). Это позволяет объединять группу динамически изменяемых (но не часто) изображений на странице в единую карту. Примером может послужить страница продукции/товаров, в которых добавление элементов происходит реже, нежели просмотр страниц с этими товарами.

Подробнее ознакомиться с библиотекой, посмотреть примеры, а также скачать библиотеку Вы можете на сайте qpimg.
Tags:
Hubs:
+49
Comments 29
Comments Comments 29

Articles