Генератор css-спрайтов

css-sprites_02

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

Для решения проблемы существует методика, при которой все декоративные элементы оформления располагаются на одной картинке, и с помощью css правила(background-position) указываются координаты конкретного изображения. Итого — имеется одна картинка с разложенными на ней изображениями, а значит всего один запрос к серверу. Тем самым уменьшая время загрузки страницы.

Сервис от projectfondue позволяет загружать картинки zip-архивом, объединяет их в одно изображение и генерирует css-правила с координатоми каждой картинки внутри изображения.

http://ru.spritegen.website-performance.org/

 

Оптимизация изображений для веба

tinypng

Замечательный сервис, который творит чудеса, НО только с изображениями в формате PNG.
Сервис просто драматически сжимает картинки, при этом не убивая качество. Особенно понравился своей работой с прозрачностью.

https://tinypng.com/

 

Настройка анимации CSS3 Transitions

csstransitions

На данном ресурсе — можно наглядно подобрать алгоритм анимации CSS3 transitions. О некоторых интересных методиках использования CSS3 Transitions для снижения нагрузки на сайт — я напишу в следующей статье.

http://matthewlein.com/ceaser/

 

Типограф Лебедева

typograf

Первый эшелон в экранной типографике. Является незаменимым инструментом грамотных веб-разработчиков и верстальщиков.
Помимо привязки коротких союзов и предлогов к следующим за ними словам, конвертирует стрелочки, кавычки и прочее в спецсимволы HTML.

http://www.artlebedev.ru/tools/typograf/