Главная
Web-дизайн
Как делать спрайты или все картинки сайта в одной

Как делать спрайты или все картинки сайта в одной

Спрайты

Доброго времени суток. 🙂
Если вы являетесь вебмастером и любите сами что-то создать и сверстать, то сегодняшний урок будет не плохим дополнением к Вашим знаниям. Каждый сайт использует изображение в своем дизайне. Одни используют много, другие совсем мало. Сейчас много вебмастеров используют CSS чтобы создать стили и эфекты чтобы заменить как можно больше изображений. Например кнопка у которой фон градиент (переход одного цвета в другой)может использовать картинку с размером в 3кбЮ, а можно прописать CSS стили и сделать и градиент и закругления и тень. Такая кнопка загрузится намного быстрее и при правильных стилях, может выглядеть даже лучше изображения. НО не все можно заменить CSS. На своем сайте я старался больше использовать стили CSS, но и без изображений не обошлось.
На моем сайте не много изображений, но все же есть. Была поставлена задача, как можно лучше оптимизировать их загрузку. Чтобы уменьшить их вес я воспользовался сервисом сжатия картинок с расширением PNG и JPG.
Как это сделать смотрите ТУТ.
Это значительно уменьшает размер изображений иногда даже до 80%, но все же это еще не полное решение задачи. Как известно, при загрузке страницы все изображения грузятся поочередно, потом они сохраняться в кэш браузера и их загрузка моментальна, но все же первый раз это дополнительная нагрузка. И тут нам помогут - Спрайты.
Спрайт - это свод всех картинок сайта в одну. По сути у Вас будит одна картинка на которой разместятся все остальные с определенным отступом и в нужном порядке. Если Вы используете спрайт то Ваш сайт загружает всего лишь одно изображение.
Как лучше всего сделать спрайт и объединить все картинки в одну? По началу не имея особого опыта и имея навыки фотошоп, я составлял через слои спрайты и инструмент линейка помогал мне выщитать координаты каждого а говоря языком CSS - параметр background-position, который устанавливает значение отступа от верха спрайта и от левого края. Такой способ применим и многие несомненно пользуются ним до сих пор. Я тоже довольно много тратил на него время, но совершенно недавно открыл для себя неплохой сервис, который поможет любому вебмастеру с созданием спрайта.

spritepad.wearekiss.com

Вы спросите, в чем же удобство?
Удобство в том, что как только вы наберете спрайт, CSS с координатами составляется автоматически. Вам не надо тратить время на подсчеты и вычисления.
Чтобы иметь возможность в будущем подправить собственный спрайт, Вам нужно зарегистрироваться на этом сайте, что займет 1 минуту, введя всего лишь e-mail и пароль. После создаете спрайт и сохраняете его, теперь В любое время вы можете зайти и внести коррективы в свой файл. Сохранять можно много разных спрайтов, что есть несомненным плюсом.

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

Можно не регистрироваться, но потом нельзя внести коррективы и если вы закроете вкладку, восстановить уже не получится

для этого в верхнем правом углу нажимаем на кнопку Login/Register и вводим свой e-mail и пароль и нажать кнопку Register. Все, теперь чтобы войти в будущем, делаем тоже только нажимаем кнопку Login.

После можете приступить к созданию спрайтов. Перед вами будет примерно Вот такоая структура.

spritepad.wearekiss.com

Разберем по пунктам.

  • 1. New Spritemap - это кнопка создания нового спрайта.
  • 2. Load Spritemap - это кнопка загрузки сохраненных спрайтов.
  • 3. Save Spritemap - это кнопка сохранения Вашего спрайта.
  • 4. Map Size - это кнопка которой Вы можете задать размер будущего спрайта. Можете заранее ввести значение больше.ю потом сможете обрезать
  • 5. Download - эта кнопка позволит Вам скачать архив со спрайтом и css файлом в котором разметка по изображениям.
  • 6. Fit document - это кнопка автоматической обрезки спрайта. Нажав на нее границы автоматически уменьшаться до краев изображений, чтобы не было пустого, ненужного менста
  • 7. Поле куда нужно помещать Ваши изображения, просто перетащив изображение на данное поле.

Вы берете свои изображения и просто мышью перетаскиваете на поле, и располагаете так, как Вам это нужно, вертикально, горизонтально, или полностью заполнив всю площадь, также можно перемещать и передвигать вставленные элементы, выделив их мышью.
Когда все готово, сохраните на всякий случай нажав на Save Spritemap и введите имя сохраненного файла или же если Вы делали это раньше выберете тот, который нужно перезаписать. После этого можете скачать архив, нажав на Download.
В архиве, есть сам спрайт и Файл sprites.css. Содержимое которого выглядит примерно так:

.list, .search, .eye, .bullet{
	background: url(sprites.png) no-repeat;}
.list{
	background-position: -52px -39px ;
	width: 12px;
	height: 12px;}
.search{
	background-position: -128px -56px ;
	width: 22px;
	height: 46px;}
.eye{
	background-position: -166px -38px ;
	width: 17px;
	height: 9px;}
.bullet{
	background-position: -228px -33px ;
	width: 6px;
	height: 9px;}

Как видно, всем картинкам присвоены классы. Вы можете конечно же изменять все, но главное не запутайтесь с координатами.
Можно например создать div и присвоить например класс bgtop, а его фоном должно быть как раз изображение search. Теперь нужно прописать свои стили и сделать можно так.

.bgto{
background: url(sprites.png) no-repeat -128px -56px;
width: 22px;
height: 46px;
}

Как видно мы изменили и создали свой класс, а значение background и background-position объединили. Так можно делать много раз для каждого изображения и это будет правильно.
Главным фактом будет то, что все стили грузятся с одного изображения - спрайта и с этого следует, что Ваш сайт загрузит, всего лишь одну картинку, а это на много меньше нагружает Ваш сайт.

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

На этом все, спасибо за внимание 🙂




Если Вам был полезным мой труд, можете поддержать сайт, обменяться со мной текстовыми ссылками или посмотреть рекламку, что займет 2 минуты :)


Оцените статью
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
(3 голоса, в среднем: 5 из 5)

Опубликовано 4 комментария

  • Олег
    Комментариев: 1

    Огромное спасибо! То что нужно было)

  • Алексей
    Комментариев: 1

    А как сделать если требуется размножить картинку Допустим в спрайте есть определенная картинка и мне нужен из нее взять 1 пиксель и размножить как фон див блоку?
    делаю так background:url('image/pc.png')repeat 10px -145px;width:1px;height:1px; Но картинка не размножается

    • Виталий
      Комментариев: 269

      Смотрите. С спрайта так не сделать. Просто создайте картинку 1 на 1 пиксели и укажите ей repeat. То что сделали Вы работать не будет еще и по причине что вы указали width:1px;height:1px; Получается вы ограничили размер до одного пикселя и она повторилась лишь 1 раз 🙂 Если укажите width:100px;height:100px; тогда заполнит квадрат в 100 пикселей. Но тоже с отдельной картинки, в противном случаи, будет повторять весь спрайт.

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

Заполните поля ниже. Ваш e-mail не будет опубликован. Обязательные поля помечены *

Уважаемые пользователи! При добавлении комментариев на сайт Вам следует соблюдать правила указанные под формой отправки комментариев.

Соблюдайте добавления комментариев

Это не спам *

Нажмите, чтобы добавить код в комментарий