< HomePage | Снимки
<- Понеделник, 2 Февруари 2009 | Начална страница | Сряда, 4 Февруари 2009 ->
Вторник, 3 Февруари 2009

В продължаващата оптимизация на проекта, по който работя, стигнах и до намаляването на броя картинки, които се зареждат от сървърите. На всички е ясно, че намаляването на броя заявки автоматично намалява и времето за зареждане на страницата. Тъй като повечето клиенти така или иначе са без кеш, javascript и css винаги ги слагам inline в документа и разчитам на mod_deflate, да свали размера, което той прави чудесно, но пък остава проблема с многото (> 3-4) картинки, които трябва да се зареждат.

Разбира се има решение и то е известно като CSS Sprites. Накратко тази техника позволява да сложите всички картинки в едно голямо изображение, след което за всяка картинка да създадете отделен css class където е посочен background-image с x/y отместване и ширина/големина.

Из нета ще намерите доста css sprites генератори, но повечето или не правят това, което трябва или го правят твърде сложно. Пък и кой има нервите да ползва някаква online утилка, когато функционалността може да се постигне в локален сто редов скрипт?

Написал съм си такъв скрипт и го споделям тук (public domain, правете каквото искате с него), като в него има основната функционалност, която в повече случаи трябва. Всички png файлове в текущата директория ги събира в един файл, създава css класовете и html файл с демонстрация как се използват. Ето изходния код на css sprites генератора, генерирана примерна страница и всички файлове използвани в проекта.

Приятно ползване.

[ Коментари: 1 ]
Коментари

Отдавна ползвам тази техника с преместването на изображението. Спестява премигването на over положението докато кешира картинките. Само където не използвам готови тулове, а си ги правя сам на фотошоп и си ги редя сам на css. Не си спомням къде го видях този метод за първи път, може би на сайта на apple, но от тогава все него си ползвам, когато имам бутони с променящи се картинки за over положения.

И като заговорих за apple сайта и понеже обичам да пипкам с FireBug-a по това, което гледам, много се кефя как са си направили главното меню, супер яко е!

Виж и това: http://www.apple.com/mac/ - хоризонталния скрол с продуктите. По същия метод е.

Написа Илиян Бетовски (www) на 10-Feb-2009 09:29


Valid XHTML 1.0! Valid CSS!