CSS спрайты. Создание и использование спрайтов

Спрайт - это одно большое изображения, которое в себя включаем несколько графических элементов используемых на сайте. То есть, все иконки, элементы интерфейса и другое, объединяют в одну картинку. Затем, с помощью CSS, эту картинку задают в качестве фонового изображения и благодаря background-position позиционируют ее, чтобы отобразить требуемый участок спрайта.

Для чего применяют спрайты? Дело в том, что применение спрайтов сильно ускоряет время загрузки веб-страницы, т.к. каждое изображение загружается не по отдельности, а в виде одной картинки (спрайта).

О том, как можно создать спрайт и применить его на практике, вы узнаете из данного видеоурока.

Смотреть видеоурок

В этом уроке я рассказал, как можно создать спрайт в фотошопе, но на самом деле, для этих целей есть целые сервисы. Если вам интересно узнать о них, то пожалуйста напишите об этом в комментариях.

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

  • 16.12.2015 12:31

    Интересно узнать про сервисы по спрайтам !

  • Спасибо за полезный урок!
    Александр, а могли бы вы рассказать, как сделана отметка о том, что статья содержит видеоурок на миниатюре к вашим постам? Интересно, как это можно реализовать с WordPress. Может быть это специальный плагин?
    Поделитесь, пожалуйста.

    • Наталия,
      Смотрите дальше статьи… Об этом у Александра также есть видеоурок:
      Всплывающие подсказки на jQuery… Ну, а миниатюра делается легко в Фотошопе 🙂

    • Геннадий, мой вопрос был связан именно с реализацией на WordPress, а не с тем, как нарисовать картинку.