Почему использование спрайтов лучше, чем обычные картинки?

использование спрайтов  в вебе

Добрый день, друзья. Вчера, когда я рассказывал о том, как использовать спрайты в вебе, я упоминал, что сайты, созданные на основе спрайтов, грузятся быстрее. Так как меньше запросов посылаются серверу и получается так, что одна картинка большего размера, грузиться быстрее, чем несколько — меньшего. (Как сделать CSS-спрайты и что это такое?)

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

После того, как странички были готовы, я залил их на сервер и проверил скорость загрузки в разных сервисах. О том, что получилось, и к каким результатам я пришел и будет эта статья!

Итак, я за часик нарисовал и написал html + css – код следующей странички:

использование спрайтов

Довольно простая структура, мне ведь главное проверить, какой из вариантов загрузится быстрее.

Страничка, созданная на основе обычных картинок, довольно проста и по ней нечего рассказывать. А во второй - я использовал такой спрайт:

как использовать спрайты

Вес папки с изображениями для странички со спрайтом - 80 кб, в то время как у второй - 64 кб. Далее я выбрал 2 сервиса для оценки скорости загрузки сайта и поочередно проверил страницы.

верстка спрайтами

Первым тестировалась страничка с обычными изображениями. Результат получился такой:

Скорость загрузки составила 5 миллисекунд - довольно не плохой результат. Но давайте посмотрим на показатели странички со спрайтами:

использование спрайтов css

Скорость загрузки 3.5 миллисекунды. А значит страничка, при использовании спрайтов, грузится быстрее! Но не будем полагаться на один сервис, протестируем еще на одном, причем, несколько раз, так как скорость загрузки может меняться от множества факторов. Поэтому проведем еще три теста:

На другом сервисе, первой будем тестировать страничку, на которой используются спрайты:

использование спрайтов

Как вы заметили, результаты примерно такие же, как и в прошлом тесте, средняя скорость загрузки 3 миллисекунды.

Скорость загрузки сайта без использования спрайтов тоже подтвердилась:

позиционирование спрайтов

Теперь можно уверенно говорить, что использование спрайтов ускоряет загрузку страницы. Хотя я использовал довольно маленькое изображение. Может быть при использовании более крупного спрайта, ситуация развернется в противоположную сторону. Но об этом в других статьях. А на сегодня все! До завтра!

P.s.: оставляйте комментарии о вашем опыте использования спрайтов

4 комментария

  1. aleksandr

    Спасибо за материал. Давно хочу использовать спрайты, но не было толчка для этого.

    1. dimadv7

      Рад помочь, если будут возникать сложности - пишите. Обязательно помогу

    2. dimadv7

      Будьте аккуратны, не копируйте с сайта код, там с кавычками проблема, лучше пользуйтесь исходником. Мне сегодня сообщил один парень об этом. Буду исправлять сегодня.

  2. aleksandr

    Спасибо! Буду разбераться.

Добавить комментарий