My favorites | Sign in
Project Logo
                
Show all Featured downloads:
0.6.0_beta.zip
Show all Featured wiki pages:
Config HowToBegin
Feeds:
Groups:
People details
Project owners:
  andrei.bakulin

qpimg

qpimg - php5-библиотека для динамического создания CSS спрайтов (CSS sprites). Использование CSS спрайтов является одним из эффективных методов клиентской оптимизации веб-страниц.

Зачем нужен qpimg?

qpimg позволит уменьшить общее время загрузки вашего сайта, а также снизить нагрузку на web-сервер, используя технологию CSS спрайтов.

Какие проблемы решает qpimg?

Проблема: Длительное время загрузки страницы Решение
При наличии большого количества изображений на странице (иконки, заголовки, декоративные элементы) общее время загрузки страницы значительно увеличивается. Это происходит из-за того что браузер одновременно может выполнять 2-4 запроса к серверу. Остальные же файлы становятся в очередь на загрузку.

Смотреть зависимость времени загрузки страницы от кол-ва изображений на ней.
qpimg создает одно изображение (спрайт) из нескольких, при этом браузер будет выполнять только один запрос к серверу. Объем же данного изображения будет приблизительно равен общему объему исходных изображений. Это значительно ускорит скорость загрузки страницы для клиента и сократит количество соединений с сервером (это критично для высоконагруженных проектов).
Проблема: Создание и модификация спрайтов Решение
Ручное создание спрайта не самая простая задача. Для этого необходимо правильно скомпоновать изображения в графическом редакторе, а после в стилях (CSS) описать координаты каждого изображения на спрайте. Так как в любом проекте происходят изменения и дополнение, то частое (в частности при разработке) пересоздание спрайтов вручную может стать проблемой. qpimg динамически пересоздает спрайты, основываясь на информации из конфигурационного файла. Конфигурационный файл создается всего один раз, после чего добавление, изменение и удаление изображений происходит практически мгновенно. Это особенно удобно для разработчиков, которым проще сконфигурировать файл, чем шаманить в графическом редакторе.

Еще теории?

Пример

Пример работы скрипта можно посмотреть тут. Например, в Firefox для указанной страницы просмотрите "Информация о странице" -> "Мультимедиа". В появившемся списке можно будет увидеть перечень используемых на странице изображений (всего их будет 4).

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

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

Качество данных изображений может отличаться от исходных изображений и спрайтов.

Преимущества qpimg

Как быстро стартануть

Скачать qpimg









Hosted by Google Code