soft-arhiv.com


Instantsprite.com - Онлайн сервис для создания CSS спрайтов.








Для чего нужны CSS спрайты?
Не секрет, что во многом на скорость загрузки сайта влияет количество обращений браузера пользователя к серверу, на котором располагается сайт. Ведь сайт это не только HTML документ. Для его полноценной работы необходимо загрузить CSS файлы (таблицы стилей), JS файлы (JavaScript библиотеки) и конечно же графические элементы (фотографии, графические элементы верстки сайта и т.д.).

Как известно именно графические элементы сайта составляют до 90% и более от общего размера страницы, а их общее количество на странице может доходить до нескольких десятков и более. В результате, браузеру пользователя нужно каждый раз посылать отдельный запрос, что бы скачать каждый отдельный графический элемент WEB страницы, что в свою очередь очень негативно сказывается на общей скорости загрузки сайта, в браузере пользователя.
Использование спрайтов при создании сайтов позволяет избежать этой проблемы, так как почти все графические элементы WEB страницы находятся в одном графическом файле. Так же использование спрайтов при создании веб сайтов позволяет значительно снизить нагрузку на сервер, где находится сайт.

Как это работает?
C помощью онлайн сервиса Instantsprite.com пользователь загружает все стандартные графические элементы, используемые на сайте (иконки, графические кнопки, логотипы, элементы верстки и т.д.).
В настройках сервиса можно указать отступ между элементами ( в пикселях), тип получаемого файла (png, gif), положение элементов в файле (вертикальное, горизонтальное, диагональное). Одновременно с этим сервис показывает внешний вид будущего спрайта (картинки), что несомненно очень удобно.


Настройка параметров создаваемого спрайта




В самом низу можно видеть генерируемый код для работы с готовым спрайтом. Он состоит их двух частей. CSS код, который необходимо вставить в таблицу стилей ващего сайта, и HTML код, который нужно вставить в то место WEB страницы, где вы хотите увидеть нужный графический элемент.


CSS и HTML код для работы со спрайтом




Очевидно, что применение CSS спрайтов на сайтах с большим количеством графических элементов верстки и навигации, позволяет значительно повысить скорость их работы, и снизить нагрузку на сервер. Несомненно, это положительно скажется на посетителях которые как известно закрывают страницу, если она не открывается в течении нескольких секунд. Так же "быстрые" сайты не обходят своим вниманием и поисковые роботы, давая таким сайтам дополнительные бонусы в выдаче, по сравнению с их более медлительными соседями.

*Обзор подготовлен для сайта Soft-Arhiv.com с использованием русификатора Instant Sprite, который позволяет работать с сервисом instantsprite.com в удобном русскоязычном интерфейсе, а так же при выключенном доступе в сеть Интернет.
Адрес обзора: http://soft-arhiv.com/publ/6-1-0-29


рейтинг: 4.7/5 из 3


Instantsprite.com - Онлайн сервис для создания CSS спрайтов. Total votes:3. Рейтинг: 4.7 из 5



Похожие статьи и обзоры





Комментарии и отзывы: 4


1. Rush
16.07.2013

Согласен чем меньше на странице загружаемых дополнительно элементов, тем быстрее она отобразится в браузере.
2. Exel
03.01.2014

А мне интересно, будут ли работать спрайты в шаблонах с "резиновым" дизайном? Ведь как я понимаю размещение каждого элемента на веб странице строго зафиксировано.
3. Volodya
10.12.2014

Отличный сайт, рад что еще остались сайты предлагающие что-то полезное, а не выплескивающие на посетителя тонну рекламы.

Сейчас верстаю шаблон для сайта с кучей мелких графических элементов. Запихнул все их в спрайты, разместил на сайте, немного повозился с центровкой изображений относительно текста, но все прекрасно работает во всех браузерах. Супер! Сам бы долго возился.
4. Olejka
22.12.2014

Простой и удобный генератор спрайтов, но...
Мне кажется что при теперешних скоростях Интернет, возиться со спрайтами ради мизерной оптимизации, что бы выиграть долю секунды при загрузке сайта просто смешно.
Ответ:
Да, в настоящее время скорости Интернет соединения хватает с запасом, и использование спрайтов ускоряет загрузку на доли секунды, но все это при идеальных условиях обмена данными между сервером и браузером пользователя.

А теперь представим, что есть сайт с хорошей посещаемостью, допустим 10 тыс. посетителей в день. На данном сайте используется 30 графических элементов дизайна. Получаем 300 тыс. дополнительных обращений к серверу, только из-за того, что на сайте не используются спрайты. При хорошей загруженности сервера эта дополнительная нагрузка неминуемо вызовет серьезные задержки в загрузке сайта, не говоря уже о том, что такой сайт будет потреблять значительно больше системных ресурсов, чем сайт оптимизированный.

Я полагаю, многие не раз замечали, как долго иногда открываются некоторые сайты из-за того, что сервер сильно перегружен. И скорость Интернет соединения пользователя тут никак не поможет. Единственный выход, оптимизировать работу сайта и сервера. Так вот спрайты один из важных шагов в такой оптимизации.





Имя*
Email (скрыт)
Код*

Рейтинг@Mail.ru


Хостинг от uCoz

Copyright © Софт - Архив 2008 - 2016 Вадим Самойлов
Вход