Спрайты css: Как использовать CSS-спрайты для увеличения скорости загрузки веб-страниц

Sprites CSS уроки для начинающих академия

HTML5CSS.ru

ЛУЧШИЙ САЙТ ДЛЯ РАЗРАБОТЧИКОВ

❮ Назад Дальше ❯

Спрайты изображений

Спрайт изображений представляет собой набор изображений, помещенных в одно изображение.

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

Использование спрайтов изображений уменьшит количество запросов сервера и сохранит пропускную способность.

Спрайты изображений-простой пример

Вместо того, чтобы использовать три отдельных изображения, мы используем это одиночное изображение («img_navsprites.gif»):

С помощью CSS мы можем показать только ту часть изображения, которая нам нужна.

В следующем примере CSS указывает, какая часть изображения «img_navsprites.gif», чтобы показать:

Пример

#home {
    width: 46px;
    height: 44px;
    background: url(img_navsprites. gif) 0 0;
}

Пример объяснил:

• <img src="img_trans.gif"> — Только определяет небольшое прозрачное изображение, так как атрибут src не может быть пустым. Отображаемое изображение будет фоновым изображением, которое мы указываем в CSS
• width: 46px; height: 44px; — Определяет часть изображения, которое мы хотим использовать
• background: url(img_navsprites.gif) 0 0; — Определяет фоновое изображение и его положение (левый 0px, верхний 0px)

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

Спрайты изображений-создание списка переходов

Мы хотим использовать изображение спрайта («img_navsprites.gif») для создания списка переходов.

Мы будем использовать HTML список, потому что это может быть ссылка, а также поддерживает фоновое изображение:

Пример

#navlist {

#navlist li {
    margin: 0;
    padding: 0;
    list-style: none;
    position: absolute;
    top: 0;
}

#navlist li, #navlist a {
    height: 44px;
    display: block;
}

#home {
    left: 0px;
    width: 46px;
    background: url(‘img_navsprites. gif’) 0 0;
}

#prev {
    left: 63px;
    width: 43px;
    background: url(‘img_navsprites.gif’) -47px 0;
}

#next {
    left: 129px;
    width: 43px;
    background: url(‘img_navsprites.gif’) -91px 0;
}

Пример объяснил:

• #navlist {position:relative;} — положение имеет значение относительно, чтобы разрешить абсолютное позиционирование внутри него
• #navlist li {margin:0;padding:0;list-style:none;position:absolute;top:0;} — поля и отступы имеют значение 0, list-style удаляется, и все элементы списка имеют абсолютную позицию
• #navlist li, #navlist a {height:44px;display:block;} — Высота всех изображений 44пкс

Теперь начните позиционировать и стиль для каждой конкретной части:

• #home {left:0px;width:46px;} — Расположен на всем пути влево, и ширина изображения 46пкс
• #home {background:url(img_navsprites.gif) 0 0;} — Определяет фоновое изображение и его положение (левый 0px, верхний 0px)
• #prev {left:63px;width:43px;} — Позиционируется 63пкс вправо (#home ширину 46пкс + некоторое дополнительное пространство между элементами), а ширина 43пкс.
• #prev {background:url(‘img_navsprites.gif’) -47px 0;} — Определяет фоновое изображение, 47пкс вправо (#home ширина 46пкс + 1px разделитель линии)
• #next {left:129px;width:43px;}- Позиционируется 129пкс вправо (начало #prev 63пкс + #prev ширина 43пкс + дополнительное пространство), а ширина 43пкс.
• #next {background:url(‘img_navsprites.gif’) -91px 0;} — Определяет фоновое изображение, 91пкс вправо (#home ширина 46пкс + 1px разделитель линии + #prev ширина 43пкс + 1px разделитель линий)

Спрайты изображений-эффект Hover

Теперь мы хотим добавить эффект Hover в наш список навигации.

Совет: Селектор :hover может использоваться для всех элементов, а не только для ссылок.

Наш новый образ («img_navsprites_hover.gif») содержит три навигационных изображения и три изображения для использования при наведении эффектов:

Поскольку это одно изображение, а не шесть отдельных файлов, не будет задержка загрузки , когда пользователь наводит курсор на изображение.

Мы добавляем только три строки кода для добавления эффекта Hover:

Пример

#home a:hover {
    background: url(‘img_navsprites_hover.gif’) 0 -45px;
}

#prev a:hover {
    background: url(‘img_navsprites_hover.gif’) -47px -45px;
}

#next a:hover {
    background: url(‘img_navsprites_hover.gif’) -91px -45px;
}

Пример объяснил:

• #home a:hover {background: transparent url(‘img_navsprites_hover.gif’) 0 -45px;} — Для всех трех наведите изображения мы указываем то же положение фона, только 45пкс дальше вниз

❮ Назад Дальше ❯

Популярное CSS

css текст
блоки css
css картинки
как сделать css
цвета css
шрифты css
css стили
елементы css
фон css
кнопки css

Copyright 2018-2020 HTML5CSS. ru

Правила и Условия Политика конфиденциальности О нас Контакты

Как использовать спрайты CSS? | Impuls-Web.ru

Категория: Сайтостроение, Опубликовано: 2018-02-19
Автор: Юлия Гусарь

Здравствуйте, дорогие друзья и коллеги!

Вы уже используете css спрайты на своих сайтах? Если ещё нет нет, или только начинаете то эта статья для вас. В ней вы узнаете что это такое, зачем они нужны, почему их нужно использовать и как это правильно делать.

Навигация по статье:

• Что такое спрайты css и зачем они нужны?
• Зачем использовать CSS спрайты?
• Использование CSS спрайтов для создания эффектов при наведении
• Удобный генератор спрайтов CSS

Что такое спрайты css и зачем они нужны?

Спрайт представляет собой одну большую картинку, на которой объединены несколько других более мелких.

Используется эта картинка для задания фона для элементов на сайте при помощи CSS.

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

Допустим у нас есть 2 ссылки для которых нам нужно указать в качестве фона соответствующие социальные сети.

Вёрстка будет выглядеть так:

<a href=»#»></a> <a href=»#»></a>

Теперь давайте загрузим спрайт с несколькими изображениями соцсетей на хостинг и в CSS зададим для них фон.

.vk { width:40px; /*ширина блока, равная ширине картинки фона*/ height:40px; /*высота блока, равная высоте картинки фона*/ background:url(images/soc-sprite.png)no-repeat; /*путь к фоновуму изображению*/ background-position: -6px -2px; /*смещение фона по горизонтали и вертикали*/ }

Для задания фона мы используем большое изображение с несколькими картинками и при помощи CSS свойства background-position смещаем фон как нам нужно.

При этом сначала мы указываем смещение по горизонтали и по вертикали.

Отрицательное значение говорит о том что фон смещается вверх и влево. Если нужно сдвинуть вниз или вправо то используем положительные значения.

Для второго блока это будет выглядеть так:

.twitter { width:40px; height:40px; background:url(images/soc-sprite.png)no-repeat; background-position: -105px -2px; /*смещение фона по горизонтали и вертикали*/ }

По сути всё то же самое, но меняется только значения CSS свойства background-position.

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

Вёрстка будет выглядеть так:

<a href=»#»></a> <a href=»#»></a>

А так будет выглядеть CSS:

.soc-button { width:40px; /*ширина блока, равная ширине картинки фона*/ height:40px; /*высота блока, равная высоте картинки фона*/ background:url(images/soc-sprite.png)no-repeat; /*путь к фоновуму изображению*/ } .vk { background-position: -6px -2px; /*смещение фона по горизонтали и вертикали*/ } .twitter { background-position: -105px -2px; /*смещение фона по горизонтали и вертикали*/ }

Видите разницу?

Зачем использовать CSS спрайты?

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

Преимущества :

Недостатки:

• Нужно потратить определённое время на создание такого объединённого фонового изображения.
• Сложнее задавать фон так как нужно вычислять значения для смещения.
• Для того чтобы добавить, удалить или изменить одно изображение приходится править весь спрайт.

Использование CSS спрайтов для создания эффектов при наведении

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

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

Как здесь:

Для решения этой проблемы делаем следующее:

1. 1.Подготавливаем спрайт с двумя картинками
2. 2.Задаем верхнее изображение в качестве фона
   

   .smile { width:75px; /*ширина блока*/ height:75px; /*высота блока*/ background:url(images/smile.png)no-repeat; /*задаём фоновую картинку*/ background-position: 0px 0px; /*начальная позиция блока*/ }

   1 2 3 4 5 6

   .smile { width:75px; /*ширина блока*/ height:75px; /*высота блока*/ background:url(images/smile. png)no-repeat;  /*задаём фоновую картинку*/ background-position: 0px 0px; /*начальная позиция блока*/ }

3. 3.Задаём смещение фона при наведении
   

   .smile:hover { background-position: 0px -80px; }

   .smile:hover { background-position: 0px -80px; }

   Получится вот так:

   Наведи на меня!
4. 4.Для интереса можно ещё задать CSS свойство:

   transition: all 0.5s ease;

   transition: all 0.5s ease;

   Его добавляем и к селекторам .smile и .smile:hover и получаем довольно интересный эффект при наведении, а заодно и наглядно видим как происходит смещение фона.

В итоге получится так:

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

К счастью, для облегчения этой задачи существуют специальные онлайн генераторы спрайтов.

Удобный генератор спрайтов CSS

Одним из таких сервисов является генератор спрайтов www.toptal.com

Для генерации спрайта нам нужно:

1. 1.Переходим по ссылке и нажимаем на кнопку «CHOOSE FILE»
2. 2.Загружаем с компьютера заранее подготовленные изображения, которые нужно объединить в спрайт и наживаем кнопку «Открыть».

   Можно выбирать сразу несколько зажав кнопку CTRL на клавиатуре.

3. 3.Получаем готовый спрайт и фрагменты CSS кода, с указанием параметров смещения для каждого изображения! Скачиваем его себе на компьютер, нажав на кнопку «DOWNLOAD»
4. 4.Далее загружаем полученный спрайт CSS на свой сайт. Это можно сделать через файловый менеджер на вашем хостинге или использовать FTP клиент FileZilla, для которого я недавно писала статью с инструкцией. Вот ссылка: «Как пользоваться FTP-клиентом FileZilla?»
5. 5.Теперь для блоков, в которых вам нужно задать фоновое изображение, из спрайта используем указанные CSS свойства

   Класс вы можете использовать тот же что и здесь или задать свой.

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

   Для этого существуют специальные кнопки:

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

Конечно же, это не единственный генератор спрайтов, но мне он очень понравился из-за своей простоты. В нём нет ничего лишнего и, в то же время, есть всё что нужно.

Если вы используете какие то более удобные генераторы спрайтов пишите их названия в комментариях.

Надеюсь моя статья помогла вам разобраться в теме спрайтов CSS! Оставляйте свои комментарии и делитесь статьёй в соцсетях. Вдруг мы с вами не одни такие сумасшедшие и тема CSS спрайтов будет интересна ещё кому то 🙂

Успехов вам! До скорой встречи в других моих статьях!

С уважением Юлия Гусарь

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

Реклама

Техника спрайтов CSS — это способ уменьшить количество HTTP-запросов к ресурсам изображений путем объединения изображений в один файл.

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

Спрайты представляют собой двумерные изображения, которые состоят из объединения небольших изображений в одно более крупное изображение с определенными координатами X и Y.

Чтобы отобразить одно изображение из комбинированного изображения, вы можете использовать CSS background-position , определяющее точное положение отображаемого изображения.

Преимущество использования CSS Image Sprite

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

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

Примечание: Уменьшение количества HTTP-запросов имеет большое значение для сокращения времени отклика, что делает веб-страницу более отзывчивой для пользователя.

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

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

Использование техники спрайтов CSS продемонстрировано в: [ПРИМЕР — B]; нам удалось уменьшить количество HTTP-запросов на 9 и общий размер файла изображений на 38,2 КБ по сравнению с [ПРИМЕР — A];. Это довольно большое улучшение для такого маленького примера. Представьте, что вы могли бы сделать на готовом веб-сайте.

Весь процесс создания этого примера описан ниже.

Создание спрайта изображения

Мы создали этот спрайт, объединив 10 отдельных изображений в одно изображение (mySprite.png). Вы можете создать свой собственный спрайт, используя любой инструмент редактирования изображений, который вам нравится.

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

Показать значок из спрайта изображения

Наконец, используя CSS, мы можем отобразить только ту часть спрайта изображения, которая нам нужна.

Прежде всего, мы создадим класс .sprite , который будет загружать наше изображение спрайта. Это делается для того, чтобы избежать повторения, потому что все элементы имеют одно и то же фоновое изображение.

Пример

 . sprite {
    background: url("images/mySprite.png") без повторов;
} 

Теперь мы должны определить класс для каждого элемента, который мы хотим отобразить. Например, чтобы отобразить значок Internet Explorer в виде спрайта изображения, код CSS должен быть таким.

Пример

 .ie {
    ширина: 50 пикселей; /* Ширина значка */
    высота: 50 пикселей; /* Высота значка */
    отображение: встроенный блок; /* Отображать значок как встроенный блок */
    фоновая позиция: 0-200px; /* Положение фона иконки в спрайте */
} 

Теперь возникает вопрос, как мы получили эти значения пикселей для background-position ? Давай выясним. Первое значение — это горизонтальное положение , а второе — вертикальное положение фона. Поскольку левый верхний угол значка Internet Explorer касается левого края, его горизонтальное расстояние от начальной точки, т.е. левого верхнего угла спрайта изображения, равно 0 , и поскольку он расположен на 5-й позиции , его расстояние по вертикали от начальной точки спрайта изображения составляет 4 X 50 пикселей = 200 пикселей , поскольку высота каждого значка составляет 50 пикселей .

Чтобы отобразить значок Internet Explorer, мы должны переместить его левый верхний угол в начальную точку, то есть в левый верхний угол спрайта изображения (mySprite.png). Кроме того, поскольку эта иконка расположена на расстоянии 200px по вертикали, нам нужно сместить все фоновое изображение (mySprite.png) вверх на 200px , что требует, чтобы мы применяли значение как отрицательное число, то есть -200px , потому что отрицательное значение заставляет его двигаться вертикально вверх, тогда как положительное значение перемещает его вниз. Однако смещение по горизонтали не требуется, так как перед левым верхним углом значка Internet Explorer нет пикселей.

Совет: Просто поэкспериментируйте со значением свойства background-position в следующих примерах, и вы быстро узнаете, как работают смещения.

Создание меню навигации с использованием спрайта изображения CSS

В предыдущем разделе мы узнали, как отобразить отдельный значок из спрайта изображения. Это самый простой способ использования спрайтов изображений, теперь мы делаем еще один шаг вперед, создавая меню навигации с эффектом прокрутки , как показано в [ПРИМЕР — B].

Здесь мы будем использовать то же изображение спрайта (mySprite.png) для создания нашего навигационного меню.

Базовый HTML для навигации

Мы начнем с создания нашего навигационного меню с неупорядоченным списком HTML.

Пример

 

    
Firefox
    
Chrome
    
Проводник
    
Опера
    
Сафари
 

Применение CSS для навигации

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

Шаг 1. Сброс структуры списка

По умолчанию неупорядоченные списки HTML отображаются с маркерами. Нам нужно удалить маркеры по умолчанию, установив для атрибута list-style-type значение none .

Пример

 ul.menu {
    тип стиля списка: нет;
}
ул.меню ли {
    отступ: 5px;
    размер шрифта: 16px;
    семейство шрифтов: "Trebuchet MS", Arial, без засечек;
} 

Шаг 2: Настройка общих свойств для каждой ссылки

На этом шаге мы установим все общие свойства CSS, которые будут общими для всех ссылок. Например, color , background-image , display , padding и т. д.

Пример

 ul.menu li a {
    высота: 50 пикселей;
    высота строки: 50px;
    отображение: встроенный блок;
    отступ слева: 60px; /* Чтобы отделить текст от фонового изображения */
    цвет: #3E789Ф;
    background: url("images/mySprite.png") без повторов; /* Поскольку все ссылки имеют одно и то же фоновое изображение */
} 

Шаг 3: Установка состояния по умолчанию для каждой ссылки

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

Пример

 ul.menu li.firefox a {
    фоновая позиция: 0 0;
}
ul.menu li.chrome {
    фоновая позиция: 0-100px;
}
ul.menu li.ie a {
    фоновая позиция: 0-200px;
}
ul.menu li.safari {
    фоновая позиция: 0-300px;
}
ul.menu li.opera {
    фоновая позиция: 0-400px;
} 

Шаг 4. Добавление состояний наведения для ссылок

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

Вертикальное положение состояния наведения = Вертикальное положение нормального состояния - 50px

Поскольку ролловерные изображения находятся чуть ниже состояния по умолчанию, а высота каждого значка равна 50px. Состояние значков при наведении также не требует смещения по горизонтали, поскольку перед их левым верхним углом нет пикселей.

Пример

 ul.menu li.firefox a:hover {
    фоновая позиция: 0-50px;
}
ul.menu li.chrome a: hover {
    фоновая позиция: 0-150px;
}
ul.menu li.ie a:hover {
    фоновая позиция: 0-250px;
}
ul.menu li.safari a:hover {
    фоновая позиция: 0-350px;
}
ul.menu li.opera a:hover {
    фоновая позиция: 0-450px;
} 

Готово! Вот наш окончательный код HTML и CSS после объединения всего процесса:

Пример

 

<голова>
<мета-кодировка="utf-8">

<стиль>
    ул.меню {
        тип стиля списка: нет;
    }
    ул.меню ли {
        отступ: 5px;
        размер шрифта: 16px;
        семейство шрифтов: "Trebuchet MS", Arial, без засечек;
    }
    ul.menu li a {
        высота: 50 пикселей;
        высота строки: 50px;
        отображение: встроенный блок;
        отступ слева: 60px; /* Чтобы отделить текст от фонового изображения */
        цвет: #3E789Ф;
        background: url("images/mySprite. png") без повторов; /* Поскольку все ссылки имеют одно и то же фоновое изображение */
    }
    ul.menu li.firefox a {
        фоновая позиция: 0 0;
    }
    ul.menu li.chrome {
        фоновая позиция: 0-100px;
    }
    ul.menu li.ie a {
        фоновая позиция: 0-200px;
    }
    ul.menu li.safari {
        фоновая позиция: 0-300px;
    }
    ul.menu li.opera {
        фоновая позиция: 0-400px;
    }
    ul.menu li.firefox a:hover {
        фоновая позиция: 0-50px;
    }
    ul.menu li.chrome a: hover {
        фоновая позиция: 0-150px;
    }
    ul.menu li.ie a:hover {
        фоновая позиция: 0-250px;
    }
    ul.menu li.safari a:hover {
        фоновая позиция: 0-350px;
    }
    ul.menu li.opera a:hover {
        фоновая позиция: 0-450px;
    }


<тело>
    <ул>
        
Firefox
        
Chrome
        
Проводник
        
Опера
        
Сафари