qpimg - php5-библиотека для динамического создания CSS спрайтов (CSS sprites). Использование CSS спрайтов является одним из эффективных методов клиентской оптимизации
... [More]
веб-страниц.
Зачем нужен qpimg?qpimg позволит уменьшить общее время загрузки вашего сайта, а также снизить нагрузку на web-сервер, используя технологию CSS спрайтов.
Какие проблемы решает qpimg?
Проблема: Длительное время загрузки страницы Решение При наличии большого количества изображений на странице (иконки, заголовки, декоративные элементы) общее время загрузки страницы значительно увеличивается. Это происходит из-за того что браузер одновременно может выполнять 2-4 запроса к серверу. Остальные же файлы становятся в очередь на загрузку.
Смотреть зависимость времени загрузки страницы от кол-ва изображений на ней. qpimg создает одно изображение (спрайт) из нескольких, при этом браузер будет выполнять только один запрос к серверу. Объем же данного изображения будет приблизительно равен общему объему исходных изображений. Это значительно ускорит скорость загрузки страницы для клиента и сократит количество соединений с сервером (это критично для высоконагруженных проектов). Проблема: Создание и модификация спрайтов Решение Ручное создание спрайта не самая простая задача. Для этого необходимо правильно скомпоновать изображения в графическом редакторе, а после в стилях (CSS) описать координаты каждого изображения на спрайте. Так как в любом проекте происходят изменения и дополнение, то частое (в частности при разработке) пересоздание спрайтов вручную может стать проблемой. qpimg динамически пересоздает спрайты, основываясь на информации из конфигурационного файла. Конфигурационный файл создается всего один раз, после чего добавление, изменение и удаление изображений происходит практически мгновенно. Это особенно удобно для разработчиков, которым проще сконфигурировать файл, чем шаманить в графическом редакторе.
Еще теории?скорость формирования спрайтов; использование data:URI; что получается в итоге; глоссарий / структура; обо всем этом читаем тут. ПримерПример работы скрипта можно посмотреть тут. Например, в Firefox для указанной страницы просмотрите "Информация о странице" -> "Мультимедиа". В появившемся списке можно будет увидеть перечень используемых на странице изображений (всего их будет 4).
В данном примере показано, как 18 изображений преобразуются в 3 спрайта. Первый спрайт содержит статические изображения. Второй спрайт содержит фоновые изображения, повторяющиеся по горизонтали. Третий спрайт содержит фоновые изображения, повторяющиеся по вертикали.
Качество данных изображений может отличаться от исходных изображений и спрайтов.
Преимущества qpimgqpimg позволяет описывать неограниченное количество карт (карта – это совокупность изображения-спрайта и соответствующего ему css-файла). Параметры каждой карты описываются в едином конфигурационном php-файле. Это дает возможность разработчику динамически управлять картами во время разработки сайта; гибкие настройки параметров каждого объекта на карте; названия объектов (css-селекторы) задаются независимо от названия их файлов; qpimg позволяет назначать фоновые изображения, как для пользовательских css-селекторов (например, «элемент списка», «div-объект с конкретным ID» и т.д.), так и использовать «собственные» qpimg-правила для формирования пользовательских css-селекторов; возможность включения в карту удаленных изображений хранящиеся на других сайтах; объединение css-файлов различных карт в единый css-файл (и отдача его пользователю), но использование при этом отдельных спрайтов (изображений); нет необходимости формировать/корректировать css-файлы и изображения вручную; существует возможность создавать карты «на лету» (во время выполнения скриптов сайта). Это позволяет объединять группу динамически изменяемых (но не часто) изображений на странице в единую карту. Примером может послужить страница продукции/товаров, в которых добавление элементов происходит реже, нежели просмотр страниц с этими товарами. Как быстро стартанутьСкачать qpimg [Less]
Copyright
©
2013
Black Duck Software, Inc.
and its contributors, Some Rights Reserved. Unless otherwise marked, this work is licensed under a
Creative Commons Attribution 3.0 Unported License
. Ohloh
®
and the Ohloh logo are trademarks of
Black Duck Software, Inc.
in the United States and/or other jurisdictions. All other trademarks are the property of their respective holders.