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

Віталий

10 років ago

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

spritepad.wearekiss.com

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

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

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

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

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

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

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 объединили. Так можно делать много раз для каждого изображения и это будет правильно.
Главным фактом будет то, что все стили грузятся с одного изображения - спрайта и с этого следует, что Ваш сайт загрузит, всего лишь одну картинку, а это на много меньше нагружает Ваш сайт.

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

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

Exit mobile version