Увеличение быстродействия сервера в условиях WEB2 - склейка картинок

Большенство программистов не особо задумываются о производительности добавляя еще пару смайликов в web-интерфейс.
Вот небольшой анализ процесса загрузки трех смайлов:

Поодиночная загрузка картинок:

• все картинки в сумме занимают 601+604+607 = 1812 байт
• с заголовками ответов сервера: 850+853+856=2559 байт
• плюс заголовки get-запросов на загрузку картинок: 578*3=1734 байт
• количество конектов к серверу: 3

И того ваш сервер принял 1734 байт и отдал 2559, при этом браузер открыл три сессии, а ваш сервер все отработал.

Теперь склеиваем три смайла в один gif и смотрим статистику.

Загрузка склееной картинки:

• чистый размер картинки 960 байт
• с заголовком ответа: 1209 байт
• заголовок get-запроса: 587 байт
• количество конектов к серверу: 1

Три картинки конечно роли не играют, но когда ваше решение содержит сотни графичесих элементов и вопрос контроля конектов, которые тратятся даже на проверку актуальности кэша, стоит очень серьезно, данный подход может пригодится. (коннектов то мало осталось, все уже на AJAX ушли )
Разрезать картинку на три состовляющих на клиенте особо труда не составляет, все делается через CSS:

<style type=”text/css”>
img.smiles{
width:16px;
height:16px;
background: url(combined_smiles.gif);
}
img.s1 {background-position:-32}
img.s2 {background-position:-16}
img.s3 {background-position:-0}
</style>

<img src=”px.gif” class=”smiles s1″ />
<img src=”px.gif” class=”smiles s2″ />
<img src=”px.gif” class=”smiles s3″ />

px.gif - наш старый добрый прозрачный пискель размером в 10 раз меньше чем заголовки сервера.

Вот на такие мысли натолкнула заметка Combine Images to Save HTTP Requests