qpimg - php5-библиотека для динамического создания CSS спрайтов (CSS sprites). Использование CSS спрайтов является одним из эффективных методов клиентской оптимизации веб-страниц.
Зачем нужен qpimg?
qpimg позволит уменьшить общее время загрузки вашего сайта, а также снизить нагрузку на web-сервер, используя технологию CSS спрайтов.
Какие проблемы решает qpimg?
| Проблема: Длительное время загрузки страницы | Решение |
| При наличии большого количества изображений на странице (иконки, заголовки, декоративные элементы) общее время загрузки страницы значительно увеличивается. Это происходит из-за того что браузер одновременно может выполнять 2-4 запроса к серверу. Остальные же файлы становятся в очередь на загрузку. Смотреть зависимость времени загрузки страницы от кол-ва изображений на ней. | qpimg создает одно изображение (спрайт) из нескольких, при этом браузер будет выполнять только один запрос к серверу. Объем же данного изображения будет приблизительно равен общему объему исходных изображений. Это значительно ускорит скорость загрузки страницы для клиента и сократит количество соединений с сервером (это критично для высоконагруженных проектов). |
| Проблема: Создание и модификация спрайтов | Решение |
| Ручное создание спрайта не самая простая задача. Для этого необходимо правильно скомпоновать изображения в графическом редакторе, а после в стилях (CSS) описать координаты каждого изображения на спрайте. Так как в любом проекте происходят изменения и дополнение, то частое (в частности при разработке) пересоздание спрайтов вручную может стать проблемой. | qpimg динамически пересоздает спрайты, основываясь на информации из конфигурационного файла. Конфигурационный файл создается всего один раз, после чего добавление, изменение и удаление изображений происходит практически мгновенно. Это особенно удобно для разработчиков, которым проще сконфигурировать файл, чем шаманить в графическом редакторе. |
Еще теории?
- скорость формирования спрайтов;
- использование data:URI;
- что получается в итоге;
- глоссарий / структура;
- обо всем этом читаем тут.
Пример
Пример работы скрипта можно посмотреть тут. Например, в Firefox для указанной страницы просмотрите "Информация о странице" -> "Мультимедиа". В появившемся списке можно будет увидеть перечень используемых на странице изображений (всего их будет 4).
В данном примере показано, как 18 изображений преобразуются в 3 спрайта. Первый спрайт содержит статические изображения. Второй спрайт содержит фоновые изображения, повторяющиеся по горизонтали. Третий спрайт содержит фоновые изображения, повторяющиеся по вертикали.
Качество данных изображений может отличаться от исходных изображений и спрайтов.
Преимущества qpimg
- qpimg позволяет описывать неограниченное количество карт (карта – это совокупность изображения-спрайта и соответствующего ему css-файла). Параметры каждой карты описываются в едином конфигурационном php-файле. Это дает возможность разработчику динамически управлять картами во время разработки сайта;
- гибкие настройки параметров каждого объекта на карте;
- названия объектов (css-селекторы) задаются независимо от названия их файлов;
- qpimg позволяет назначать фоновые изображения, как для пользовательских css-селекторов (например, «элемент списка», «div-объект с конкретным ID» и т.д.), так и использовать «собственные» qpimg-правила для формирования пользовательских css-селекторов;
- возможность включения в карту удаленных изображений хранящиеся на других сайтах;
- объединение css-файлов различных карт в единый css-файл (и отдача его пользователю), но использование при этом отдельных спрайтов (изображений);
- нет необходимости формировать/корректировать css-файлы и изображения вручную;
- существует возможность создавать карты «на лету» (во время выполнения скриптов сайта). Это позволяет объединять группу динамически изменяемых (но не часто) изображений на странице в единую карту. Примером может послужить страница продукции/товаров, в которых добавление элементов происходит реже, нежели просмотр страниц с этими товарами.
