ГлавнаяГостевые посты › Что такое CSS спрайты и как их сделать?


Что такое CSS спрайты и как их сделать?


css спрайты

Здравствуйте, уважаемые читатели — Sozdaiblog.ru!

В этом посте Вы узнаете, что такое CSS спрайты и, как их сделать.

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

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

Как и почему это происходит?

Это происходит по двум основным причинам.

Во-первых, сервер загружает лишь один графический элемент, а не 5, 6 или 10. В этом случае сокращается число HTTP-запросов и повышается производительность и скорость загрузки сайта. Если бы картинки загружались по одной, то число HTTP-запросов было бы намного больше. При этом не имеет значение то, что сами изображения являются небольшими по объему и размеру.

Во-вторых, суммарный вес одного CSS спрайта в несколько меньше, чем вес всех отдельных картинок на Веб-странице.

При этом сам CSS спрайт часто называют «Sprite Sheet». Но, на мой взгляд, больше этот термин относится к CSS спрайтам, сделанным лишь из кнопок и иконок сайта.

После создания спрайта нужно посредством правил CSS грамотно вставить его в нужные места на сайте. При этом используются такие параметры CSS, как background-position, а также background-image.

То есть в background-image во всех случаях указывается одно и то же изображение спрайта. А вот в background-position в каждом случае надо указывать разные значения для того, чтобы CSS спрайт сдвигался на необходимую величину, и отображалась определенная картинка.

CSS спрайты можно легко сделать при помощи специальных онлайн-сервисов. Давайте кратко рассмотрим два таких сервиса.

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



1. Css-sprit.es

css спрайты



Здесь имеются 2 опции – стандартная загрузка и мультизагрузка. Вы выбираете необходимые файлы иконок, кнопок и так далее при помощи опции «Add New File».

Затем настраиваете формат конечного изображения (PNG, GIF или JPG) и язык стилей — CSS или SASS. Можно поставить галочку напротив «CSS Compression». В этом случае полученный фрагмент кода CSS будет сокращен и оптимизирован.

В опции «Rollover Effect» можно выбрать выходной эффект картинки (сепия, черно-белый и т.д.). В самом низу находится кнопка «Create CSS Sprite».  Она означает «Создать CSS спрайт».


2. Csssprites.com

css спрайты



Простой и функциональный генератор спрайтов. Выбирайте необходимое количество графических файлов, нажимая на кнопку «Need more», а затем жмете кнопку «Generate». Кроме того, можно открыть дополнительные опции. Там есть следующие настройки – отступы между изображениями, выравнивание элементов и фоновый цвет спрайта.

В завершении этого поста мне хотелось бы задать вопрос!

Используете ли  Вы CSS спрайты в своих Веб-ресурсах? Если да, то, какими сервисами пользуетесь для их создания?

На этом всё. Всего Вам наилучшего.

Автор поста: Инкогнито.

Сайт автора: В разработке.




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




6 комментариевА что думаете Вы?

  1. Сергей Москвитин

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

    [Ответить]

    Инкогнито ответил:

    Пожалуйста, Сергей! На самом деле таких сервисов очень много. Странно, что Вы раньше про них не слышали.

    [Ответить]

  2. Константин

    КЛАСС! Отличная вещь. Спасибо! Будем пробовать.

    [Ответить]

    Инкогнито ответил:

    Пожалуйста! Обращайтесь!

    [Ответить]

  3. Надежда Пинчук

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

    [Ответить]

    Денис Черников ответил:

    Надежда, спасибо не мне, а автору поста!)))

    [Ответить]

Оставить комментарий!

Вверх