Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > images оптимизация

Автор: Dima85 28.10.2010, 00:02

Начитавшись статей по оптимизации сайта решил многие маленькие картинки впихнуть в одну и в дальнейшем ее поднимать на нужное расстояние в верх, пример:

Код


***
#people {
background:transparent url(/images/img.gif) no-repeat scroll 0 -38px;
line-height:18px;
margin-left:5px;
padding-left:15px;
}

#menu {
background:transparent url(/images/img.gif) no-repeat scroll 0 -188px;
line-height:10px;
padding-left:1px;
}

#folder {
background:transparent url(/images/img.gif) no-repeat scroll 0 -155px;
padding-left:1px;
}
***

Вопрос: Как ведет себя apache сервер просматривая такой css файл. Тоесть в данном случае он 1 раз сделает коннект к img.gif или 3 раза?

Автор: Violator 28.10.2010, 00:20

конечно один
в противном случае в чем бы была оптимизация если бы грузились 3 спрайта? smile

Автор: Dima85 28.10.2010, 00:31

Просто несколько лет назад ставил подобный эксперимент и насколько я помню просматривая логи apache, я там видел несколько коннектов к одному и тому же рисунку. Хотя возможно я и ошибаюсь.

Violator, ну можно еще и так оптимизировать:

Код


#people, #folder, #menu {
background:transparent url(/images/img.gif) no-repeat scroll 0 0;
}

А потом уже к каждому id через background-position выставлять нужный пиксель. Только нужно ли это?

Автор: Violator 28.10.2010, 01:04

В том же firebug можете зайти в закладку сеть и посмотреть какие файлы подтягиваются.

Цитата(Dima85)

Violator, ну можно еще и так оптимизировать:

Это оптимизация ксс-кода, если файл ксс будет меньше то нужно
При заливке ксс на сайт его можно сжать например с помощью YUI Compressor или CSS Tidy, что существенно уменьшит его вес.
Что касается рисунков, то желательно делать их спрайтами и управлять с помощью background-position. Загрузка страницы будет намного быстрее если грузить один спрайт чем несколько мелких рисунков. К плюсам спрайта еще можно отнести такой случай - когда например на a:hover вешают изменение background-image, не будет задежки с отрисовкой рисунка

Автор: Dima85 28.10.2010, 09:42

Спасибо.

Автор: magelan 29.10.2010, 01:27

В приведенном цсс апач может и 3 раза дернуться. Хотите оптимизации делайте ее везде:

Код


#people, #menu, #folder {
background:transparent url(/images/img.gif) no-repeat scroll;
}
#people {
background-position: 0 -38px;
line-height:18px;
margin-left:5px;
padding-left:15px;
}
#menu {
background-position: 0 -188px;
line-height:10px;
padding-left:1px;
}
#folder {
background-position: 0 -155px;
padding-left:1px;
}

Добавлено через 5 минут и 45 секунд
У такой оптимизации есть одна очень неприятная особенность - печать бэкграундов по дефаулту у браузеров выключена