CSS-спрайты: оптимизация графики для web-страниц

10.04.2015

Иногда на web-странице нужно отобразить большое количество небольших фотографий, например, товаров в каталоге интернет-магазина. Если количество фотографий превышает некоторый предел, то вместо каких-то из них показывается только рамка. Перезагрузка страницы не всегда помогает отобразить их все . Может получиться так, что после перезагрузки страницы пропадают фотографии, которые отображались на ней до этого. На первый взгляд кажется, что проблема с браузером (кэшем), низкой скоростью Интернет-канала, неоптимизированной графикой, прокси, программами защиты от спама и т.п . Эти факторы, конечно, оказывают влияние не количество отображенных фотографий на странице, но проблема на самом деле заключается в другом.

Для отображения одной фотографии при помощи тэга <img> или свойством стиля “background” на сервер посылается один запрос. Значит, для отображения 700 фотографии (которых нет в кэше) на сервер отправится 700 http-запросов, что равносильно небольшой DoS-атаке на него! В ответ на это сервер посылает в браузер ответ, мол, дружище, запросы на фотографии я получил, но вот отгрузить смогу лишь некоторые из них, так что лови рамки, товарищ.

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

Для работы данного механизма используется CSS-свойство ”background”:

<style>
  .sprite{ background-image:url(адрес изображения)}
  .image { }
</style>

  <div class=”sprite image” style=” width:X1px;height:Y1px;background-position:-Xpos1px  - Ypos1px”>Спрайт 1</div>
  <div class=”sprite image” style=” width:X2px;height:Y2px;background-position:-Xpos2px  -Ypos2px”>Спрайт 2</div>
  <div class=”sprite image” style=” width:X3px;height:Y3px;background-position:-Xpos3px  -Ypos3px”>Спрайт 3</div>

Идея, как видно, проста, но вручную прописывать параметры спрайта (ширину, высоту и смещение в исходном графическом листе) затруднительно. Можно воспользоваться on-line генераторами CSS-спрайтов, в которые нужно загрузить нужные изображения, а они уже сами выдадут необходимый программный код. Но это подойдет для статичных графических карт, когда заранее известно, какие спрайты и когда будут использоваться. Если же неизвестно, какие фотографии и когда потребуются пользователю, то необходимо генерировать графические листы “на лету,” в зависимости от запроса. В этом случае алгоритм будет таким:

Отправить на сервер запрос для генерации графического листа (с помощью, например, графической библиотеки GD php).
Вернуть получившееся изображение в браузер.
Создать при помощи javascript новые слои <div> (при помощи метода appendChild ) или воспользоваться уже имеющимися для отображения в них нужных фотографий.

<?php

  print '<style>';
  print '.sprite{background-image:url(drawsprite.php?’.$Query.’)}';  // класс графического листа
  
	/* $Query – строка запроса. 
  drawsprite.php – скрипт,  который обработает запрос и сформирует графический лист
  */

  print '.image { }';// класс спрайта
  print '</style>';
?>

  <div  class=”sprite image” style=” width:Xpx; height:Ypx; background-position:-Xpospx  -Ypospx”>Изображение 1</div>

Отрицательные значения позиционирования удивляют, но таков механизм позиционирования – двигается не окно кадра, а фон. Если нужно показать в кадре изображение справа от текущего, то фон сдвигается влево. Отсюда и отрицательные значения.

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

Для реализации этого алгоритма необходима генерация графического листа в зависимости от запроса.

Изначально все минифотографии были разного размера, но не превышали области 70*70px. При помощи скрипта пакетной обработки в FireWorks все минифотографии были приведены к одному размеру 70*70px, что существенно упрощало программный код для получения нужной фотографии из графического листа. Делается это просто: задаём размер холста и нужный фон, выделяем на нём всё, центрируем по вертикали и горизонтали:

  fw.getDocumentDOM().setDocumentCanvasSize({left:0,  top:0, right:70, bottom:70}) 
  fw.getDocumentDOM().selectAll()
  fw.getDocumentDOM().align("center vertical", true)
  fw.getDocumentDOM().align("center horizontal", true)

Копируем код в блокнот, cохраняем его с расширением jsf, открываем в Fireworks и сохраняем как команду. Затем запускаем пакетную обработку и через пару часов (FireWorks не эффективно работает с большим количеством фотографий в пакете) 5000 фотографии были приведены к нужному формату.

В функцию скрипта, где происходит запрос на выборку записей, прописываем показанные выше CSS-классы. Графический лист в моём случае представляет собой двумерный массив 10*y, где 10 – количество изображений в строке, а y – количество строк с изображениями, в зависимости от количества записей в выборке. В функцию отображения записей таблицы дописывается код выборки нужной фотографии.

При формировании очень большого графического изображения с шириной 700px я столкнулся с тем, что после выборки определенной фотографии остальные пошли со смещением на одну. Увеличил ширину изображения до 1400px и всё отлично заработало.

Возникает вопрос, а сколько фотографий можно загрузить таким способом? Достаточно, более двух тысяч фотографий объемом 10 Мб грузились как игрушка. При этом размер файла получился 1400*7000 px. Далеко не предел.

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

Оглавление ←→