Как сделать спрайт картинку

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

2020-02-10
- 14
- Февраля
  2015

Доброго времени суток. 🙂
Если вы являетесь вебмастером и любите сами что-то создать и сверстать, то сегодняшний урок будет не плохим дополнением к Вашим знаниям. Каждый сайт использует изображение в своем дизайне. Одни используют много, другие совсем мало. Сейчас много вебмастеров используют 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. Содержимое которого выглядит примерно так:

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

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

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

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

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

CSS-спрайты

До того, как в CSS появился псевдокласс :hover , создание ролловера — элемента, который меняет свой вид при наведении курсора — реализовывалось через язык JavaScript. Сейчас это делается намного проще, но есть один недостаток: если в состоянии :hover (т. е. при наведении курсора на элемент) должно появиться какое-то фоновое изображение, то оно начинает загружаться в момент наведения курсора, а не при общей загрузке страницы.

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

Что такое спрайты CSS

CSS-спрайт — это один графический файл, который содержит много различных изображений. В нем могут быть собраны, к примеру, все графические элементы интерфейса, такие как иконки, кнопки и прочее. Также в спрайты часто объединяют фоновые картинки вместе с их вариациями для состояния :hover . Типичные примеры спрайтов:

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

Спрайт со значками соцсетей и их вариациями для :hover Спрайт с элементами интерфейса

Преимущества CSS-спрайтов

CSS-спрайт содержит в себе фоновые изображения для различных состояний элементов, и загружается он целиком при загрузке веб-страницы. Это исключает подтормаживание ролловера при первичном наведении курсора на элемент.
Сокращается количество обращений к серверу. Ведь для загрузки каждой маленькой иконки требуется отдельный запрос, а чем меньше обращений, тем лучше. Для загрузки спрайта понадобится всего один запрос на сервер.
Еще одно преимущество хранения множества картинок в спрайте заключается в том, что если у них похожая палитра цветов, то одно большое изображение будет весить меньше, чем отдельные маленькие картинки в сумме.
Всё это в целом положительно влияет на скорость загрузки сайта.

Как создать спрайт из картинок

В классическом случае спрайты создаются в редакторе изображений. Мелкие картинки последовательно размещаются на большом полотне (нередко с прозрачным фоном), которое затем сохраняется как графический файл.

Ручной способ создания спрайтов — занятие довольно долгое. Поэтому, когда использование спрайтов стало набирать обороты, появились онлайн-сервисы по автоматическому созданию спрайт-листов, например, Spritegen, RetinaSpriteGenerator и другие. Вы загружаете необходимые изображения в отдельных файлах на сайт, и для вас генерируется спрайт, который вы сразу можете скачать на компьютер.

Как пользоваться спрайтами CSS

Теперь пора узнать, как использовать CSS-спрайты на практике. Мы покажем вам небольшой пример с использованием спрайта, содержащего значки социальных сетей (мы показывали его выше). В обычном состоянии ссылки значок соцсети будет цветным (верхний ряд спрайта), а при наведении курсора он будет становиться серым (как в нижнем ряду).

HTML-разметка выглядит следующим образом:

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

Переходим к CSS. Первым делом запишем общие стили для всех ссылок:

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

Первая наша ссылка имеет класс .facebook . Зададим позиционирование для ее фона. Иконка Facebook находится точно в левом верхнем левом углу спрайта, поэтому определить ее позицию будет легко — left top :

Идем дальше: позиционируем фон для ссылки на Twitter. Иконка Твиттера расположена справа от Facebook и примыкает к ней, не создавая пустых промежутков. Нам необходимо переместить спрайт влево на столько пикселей, чтобы скрыть иконку Facebook и полностью заполнить область ссылки иконкой Twitter. Поскольку ширина каждой иконки равна 100 пикселям, то мы и сдвигаем фон влево на 100 пикселей. Вертикальное позиционирование мы пока нигде не меняем, а оставляем значение top :

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

Результат работы данного кода показан на скриншоте ниже:

Теперь разберемся с поведением фоновых картинок при наведении курсора на ссылку. Нам нужно смещать спрайт по вертикали вверх таким образом, чтобы в область просмотра попадала иконка из нижнего ряда спрайта. Здесь всё довольно просто и решается одним правилом CSS, а именно присвоением значения bottom свойству background-position-y :

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

Результат работающих спрайтов смотрите на демонстрации ниже (для более красивой подачи примера мы сделали сдвиг фона более плавным при наведении курсора):

Если вам стало интересно, то вот и строка, которая отвечает за плавность изменения иконок (не волнуйтесь, чуть позднее мы будем изучать CSS-анимацию, и в частности свойство transition ):

Итак, теперь вы знаете, что такое спрайты CSS и чем они могут быть полезны. Помимо предотвращения задержек при загрузке фоновых картинок, использование спрайтов помогает снизить нагрузку на сервер. Кроме того, это удобный способ хранить все графические элементы интерфейса в одном месте.

Вот мы и разобрали основные методы стилизации ссылок. Рекомендуем вам дополнительно попрактиковаться, чтобы закрепить полученные знания. А следующая глава нашей книги посвящена CSS-анимации, реализация которой стала возможна благодаря свойствам, появившимся в CSS3. И в первом уроке мы разберем свойство трансформации — transform.

Как сделать css спрайты

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

Статья должна идти в рубрику ускорение и оптимизация, так как использование спрайтов ускоряет загрузку страницы, за счет того, что одна картинка, даже большего размера, грузиться быстрее, чем несколько — меньшего. Это происходит потому, что создается меньше обращений к серверу.

Для тех, кто не в теме, то спрайт выглядит так:

То есть, применительно к вебу – это одна картинка с множеством элементов, каждый из которых показывается в нужном месте сайта за счет позиционирования.

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

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

Итак, я создал простенький спрайт иконок в фотошопе. Особо не заморачивался, но сделал по паре каждой из видов, для того, чтобы показать не только, как пользоваться спрайтом, а и то, как можно использовать спрайты для создания псевдоанимации.

Создание css спрайта – html разметка

Теперь нужно набросать html – разметку. Ничего необычного. Ненумерованный список:

Подписывайтесь на обновления

Вместо «#» — вписывайте адреса своих аккаунтов. Дописывайте title ссылкам. И переходим к добавлению стилей!

Создание css спрайта – css разметка

Задаем стили контейнера:

. socseti <
width: 270px;
height: 150px;
margin:200px auto;
background: url(../images/bg-soc.png) no-repeat;
padding: 15px;
>

Описываем стили для текста и ненумерованного списка, который флоатим по левому краю (стандартная процедура для менюшек и подобных элементов)

. socseti ul <
overflow: hidden;
width: 246px;
margin:20px auto;
>

. socseti ul li <
float: left;
margin-left:2px;
>

. socseti ul li : last-child <
margin-right: 2px
>

Теперь начинается самое интересное. Зададим общие стили для ссылок:

. socseti ul li a <
display: block;
width: 59px;
height: 59px;
>

Как вы могли заметить, я немного ошибся при создании спрайта и поэтому получился идиотский размер 59×59 px — но это не повлияло на визуальное восприятие. Продолжим…
Зададим фоновое изображение первой ссылке.

a. tvitter <
background: url(../images/css-sprite-iconok2.png) -59px -59px no-repeat;
transition: .3s;
>
a. tvitter : hover <
background: url(../images/css-sprite-iconok2.png) -59px 0 no-repeat;
transition: .3s;
>

На фон ссылки я ставлю большое изображение (спрайт нарисованный в фотошопе). Но за счет того, что у ссылок заданный размер 59х59 px, то показывается лишь часть от общей картинки.

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

Например, вы могли заметить, что на спрайте первым элементом идет иконка социальной сети «Вконтакте», а первой иконкой в меню соц. иконок — «Твиттер». То есть, если мои иконки имеют ширину 59px, то мне необходимо подвинуть фон на -59px. А также, я хочу чтобы цвет менялся с серого на цветной. Для этого мне нужно опустить фон на 59px. Что и показано здесь:

a. tvitter <
background: url(../images/css-sprite-iconok2.png) -59px -59px no-repeat;
transition: .3s;
>

Для того, чтобы при наведении изменялись стили класса, необходимо задать псевдокласс hover. Что я и делаю тут:

a. tvitter : hover <
background: url(../images/css-sprite-iconok2.png) -59px 0 no-repeat;
transition: .3s;
>

А для того, чтобы картинка меняла положение — изменил координаты отображения.

Свойство transition — используется для задания скорости изменения положения. Я поставил 0,3 секунды.

Аналогичным способом необходимо задать положение для остальных элементов спрайта, двигая его на 118 рх для отображения RSS — иконки, и вернуть в 0 px для отображения иконки «ВК».

Надеюсь статья была вам полезна, и теперь вы будете использовать css спрайты для своих сайтов. Завтра я постараюсь проанализировать на сколько быстрее грузится сайт при использовании этой технологии.

Источники:

https://gnatkovsky.com.ua/kak-delat-sprajty-ili-vse-kartinki-sajta-v-odnoj.html
https://idg.net.ua/blog/uchebnik-css/ispolzovanie-css/sprites
https://smartlanding.biz/kak-sdelat-css-sprajt.html

голоса

Рейтинг статьи