Как сделать спрайты для css
Обновлено: 08.07.2024
Спрайт изображений - это набор изображений, помещенных в одно изображение.
Веб-страница с большим количеством изображений может долго загружаться и генерирует несколько запросов к серверу.
Использование спрайтов изображений уменьшит количество запросов к серверу и сэкономит пропускную способность.
Спрайты изображений - простой пример
Вместо того, чтобы использовать три отдельных изображения, мы используем это одно изображение ("img_navsprites.jpg"):
С помощью CSS мы можем показать только ту часть изображения, которая нам нужна.
В следующем примере CSS указывает, какую часть изображения "img_navsprites.jpg" необходимо показать:
Пример
Объяснение примера:
- - Определяет только маленькое прозрачное изображение, потому что атрибут src не может быть пустым. Отображаемое изображение будет фоновым изображением, которое мы указываем в CSS
- width: 46px; height: 44px; - Определяет часть изображения, которую мы хотим использовать
- background: url(img_navsprites.jpg) 0 0; - Определяет фоновое изображение и его положение (left 0px, top 0px)
Это самый простой способ использовать спрайты изображений, теперь мы хотим расширить его, используя ссылки и эффекты наведения.
Спрайты изображений - создание списка навигации
Мы хотим использовать изображение спрайта ("img_navsprites.jpg") для создания списка навигации.
Мы будем использовать список HTML, потому что он может быть ссылкой, а также поддерживает фоновое изображение:
Пример
Объяснение примера:
Теперь начинаем позиционировать и стилизовать каждую конкретную часть:
Спрайты изображений - Эффект наведения
Теперь мы хотим добавить эффект наведения в наш список навигации.
Совет: Селектор :hover можно использовать для всех элементов, а не только для ссылок.
Наше новое изображение ("img_navsprites_hover.jpg") содержит три навигационных изображения и три изображения для использования при наведении:
Поскольку это одно изображение, а не шесть отдельных файлов, не будет задержки загрузки, когда пользователь наводит курсор на изображение.
Приём, когда один рисунок меняется на другой при наведении на него курсора мыши, называется эффект перекатывания, или rollover. Смену картинок можно сделать с помощью скриптов или стилей, но нужно помнить о некоторых моментах:
- каждый используемый рисунок создаёт запрос к серверу и, тем самым, незначительно увеличивает время загрузки страницы;
- появление второй картинки происходит с задержкой, потому что сам графический файл ещё не загрузился и на это требуется небольшое время; подобное происходит только в первый раз, затем браузер кэширует картинку и отображает её мгновенно.
Чтобы избавиться от этих недочётов все изображения вставляют в одну общую картинку, которая и называется спрайтом. Вывод самого изображения происходит как фон через свойство background , а смена картинки делается за счёт сдвига фона с помощь background-position . На рис. 1 показан спрайт с несколькими картинками.
Здесь используется два набора изображений — сердечки и чекбоксы. Располагать близкие картинки можно как горизонтально, так и вертикально, это не является принципиальным. Для каждого набора в коде создаём свой собственный класс и для него указываем размеры элемента, совпадающие с размерами картинки, в данном случае это 64х64 пикселя. Затем добавляем спрайт в виде фона и при необходимости сдвигаем его через background-position (пример 1).
Всем привет! Начну с того, что CSS спрайтами я впервые заинтересовался ещё год назад, однако на тот момент я так и не смог полностью разобраться с этой технологией и найти ей достойное применение на своём блоге.
Буквально на днях я вновь вернулся к этой теме и, наконец-то, добился желаемого результата. Начну с рассказа о том, что такое CSS спрайты, каково их предназначение и самое главное — как самостоятельно создать спрайт.
Для подробного описания последовательности создания спрайта я приведу наглядный пример. Таким образом мне удастся разложить по полочкам все действия, чтобы воочию посмотреть на результат. В случае чего — спрашивайте, с удовольствием отвечу. Итак, поехали!
Что такое CSS спрайты, их польза и предназначение на сайте
Чем ниже пропускная способность сети пользователя, тем меньше потоков данных будет поступать с сервера, а значит и сайт будет загружаться намного дольше. Таким образом, сокращая число запросов мы увеличиваем скорость загрузки страницы.
CSS Sprite — это способ уменьшить количество изображений путём объединения нескольких изображений в одно. Затем используетcя CSS-свойство позиционирования background-position для отображения только той части изображения, которая вам нужна.
Для ручного объединения элементов в один файл потребуется графический редактор и немного времени. Затем необходимо определить относительные координаты каждого элемента в спрайте и написать свойства позиционирования для файла стилей. Я предлагаю облегчить задачу благодаря онлайн инструменту.
CSS Sprites Generator и тонкости, которые нужно знать
В качестве удобного и надёжного инструмента я предлагаю воспользоваться генератором CSS спрайтов. Вариантов великое множество и все выполняют возложенные на них задачи, но мне больше всего нравится CSS Sprites Generator, созданный инженерами компании Toptal.
Для начала немного теории. Если один или несколько элементов спрайта требуется использовать в качестве повторяющегося фонового изображения при помощи свойства repeat , тогда требуется выполнить любое из двух условий:
- применяя свойство repeat-x располагайте элементы спрайта по вертикали или размещайте одно повторяющееся фоновое изображение крайним правым в случае горизонтального спрайта;
- применяя свойство repeat-y располагайте элементы спрайта по горизонтали или размещайте одно повторяющееся фоновое изображение крайним нижним в случае вертикального спрайта.
Проще говоря, изображение повторяющегося фона необходимо располагать в спрайте таким образом, чтобы при перемещении в горизонтальном (X) или вертикальном (Y) направлении на пути не встречалось другое изображение.
Порядок создания CSS спрайта с помощью генератора
Перехожу от теории к практике. В качестве примера я предлагаю использовать три отдельные иконки, которые в конечном итоге объединим в спрайт. Подготовьте свои изображения и можно приступать к следующему шагу.
Переходим на страницу онлайн генератора спрайтов CSS Sprites Generator и загружаем заранее подготовленные файлы нажатием конки Choose files или простым перетаскиванием на страницу методом Drag & Drop.
Не пытайтесь загружать огромные файлы — это противоречит логике спрайтов. Они предназначены для объединения нескольких небольших изображений.
Настройки состоят из двух параметров:
- Padding between elements (px) — отступ между элементами в пикселях,
- Align elements — выравнивание элементов.
Binary Tree — бинарное дерево — наиболее эффективный по размеру алгоритм размещения элементов:
Diagonal — диагональ — каждый элемент может иметь неограниченное горизонтальное или вертикальное фоновое заполнение без пересечения с другими элементами спрайта:
Diagonal (Alternative) — диагональ (альтернатива) — то же самое, что диагональ, но используется диагональ в другом направлении:
Top-down — сверху вниз — элементы расположены вертикально поочерёдно сверху вниз:
Left-right — слева направо — элементы расположены горизонтально поочерёдно слева направо:
В моём случае более предпочтительным является последний вариант с горизонтальным размещением элементов слева направо, так как иконки социальных сетей не предназначены для использования в качестве повторяющегося фонового изображения и по форме максимально приближены к размещению на блоге.
После выбора и загрузки файлов на странице CSS Sprites Generator вы увидите готовые стили, которые необходимо скопировать и добавить в файл style.css. На основе примера я получил следующий код:
Дело остаётся за малым — нажатием кнопки Download скачать готовый файл спрайта с именем css_sprites.jpg и загрузить на свой сервер. Вы можете переименовать файл, главное в будущем не забудьте сделать тоже самое в файле стилей, а также отредактировать путь к файлу.
В конечном итоге результатом работы онлайн генератора стало такое изображение, в котором собраны воедино все три иконки:
В принципе, на этом создание спрайта завершено. На выходе мы получили файл изображения и готовые стили. А что делать дальше? За основу примера я выбрал иконки, которые являются ссылками на внешние сайты, поэтому каждой ссылке необходимо присвоить свой класс для тега , например:
Все графические элементы оформления сайта можно объединить в один спрайт, но такой подход в будущем может вызвать трудности.
Представьте ситуацию, в которой необходимо заменить одно изображение на другое — придётся менять стили всех элементов, так как изменятся координаты. Избежать подобных проблем позволит создание нескольких спрайтов, объединяющих группы элементов (иконки меню, иконки навигации и т.д.). А вы используете спрайты?
Существует множество методов по оптимизации веб-страниц. Какие-то из них работают, какие-то уже нет. Тем не менее есть некоторые методы, обязательные для исполнения на любом сайте и блоге. Об одном из них я и хотел с вами поговорить.
CSS спрайты — один из основных методов оптимизации страниц сайта. Поэтому сегодня мы поговорим о том, как объединить в CSS спрайты изображения на сайте, увеличив тем самым скорость их загрузки.
Немного истории
В далеком-далеком прошлом, когда в квартирах пиликали модемы, а скорость соединения не превышала 5 Кбит/сек., люди корпели над нелегкой задачей, как заставить сайты загружаться быстрее и при этом не платить баснословные суммы за входящий трафик. Думали они, значит, думали, и придумали компоновать изображения, используемые на странице в спрайты.
Объединяем изображения в спрайт
И так, как мы ранее выяснили, спрайт – это несколько изображений, скомпонованных в одно целое на прозрачном фоне, доступ к которым осуществляется при помощи CSS свойства background-position. Но пожалуйста, не перепутайте его с коллажем. Спрайт ≠ коллаж.
Для того чтобы получить спрайт, нужно все кнопки, иконки, буллиты и прочую хрень скаченную с бесплатных фотобанков, максимально компактно уместить в одном PNG файле. Не забудьте, фон должен быть прозрачным. А теперь давайте разберем на примере.
Допустим, мы располагаем PSD файлом вот с такой распрекрасной кнопкой в 3х состояниях.
Чтобы этого не происходило, гораздо логичнее сохранить кнопку в одном файле. Для этого мы, открываем все тот же PSD файл, удаляем из него бесполезные стрелки, надписи, фон и компонуем все состояния кнопки как можно ближе друг к другу без нахлеста.
Вот что у нас в итоге получилось. Ни в коем случае кнопки не должны между собой пересекаться.
Отлично, графический файл мы с вами подготовили, теперь давайте я покажу вам как его сверстать.
Верстка спрайтов
Верстка CSS спрайтов ничем не отличается от верстки обычных картинок, за исключением одного НО. Вам нужно знать не только точный размер того изображения, которое вы хотите отобразить, но и его координаты. К примеру, весь спрайт у нас занимает 330 px в ширину и 150 px в высоту.
Но нам нужно отобразить только кнопку, которая занимает 227 px в ширину и 41 px в высоту, точно указав ее координаты. Если вы не располагаете хорошим html редактором — могу порекомендовать вам один из.
Создаем файл index.html и прописываем в него необходимые строки кода, доктайп и все такое.
После того, как все стандартные действия проделаны, давайте попробуем отобразить нашу кнопку.
После тега body создаем контейнер div с классом button – это и будет наша кнопка.
На этом наш html заканчивается и теперь необходимо прописать для кнопки CSS стили.
Код ниже показывает , что сначала мы объявляем класс button. Затем при помощи свойств height и width задаем размеры нашей кнопки. Свойство background позволяет выбрать файл, который мы будем использовать в качестве спрайта, а background-position задать координаты, требующейся нам картинки в этом спрайте. Все просто.
Давайте подробнее разберемся со свойством background-position.
Как можно заметить из кода выше, оно имеет два значения. Первое значение позволяет задать координаты изображения по оси X, а второе, следовательно, по оси Y.По оси X наша кнопка никуда не скачет, так-как все состояния находятся друг под другом. Следовательно, для того, чтобы при наведении появилась второе состояние кнопки, нам нужно изменить значение, отвечающее за ось Y.
Как известно, а если нет то уже да, каждая кнопка имеет несколько состояний.
- Normal – нормальное или обычное состояние
- Hover – состояние кнопки при наведении курсора
- Active – состояние кнопки во врем нажатия
Этими свойствами мы и воспользовались.
Рекомендую
В заключении
CSS спрайты — очень важный этап на пути ускорения работы сайта. Отнеситесь к нему с должным уважением и старайтесь использовать повсеместно.
4 комментария
Спрайты — это хорошее решение проблемы бэкграунда.
Но данный случай — всего лишь пример.
В подобных ситуациях, когда нужно изменить цвет/градиент/обводку/тень элемента, лучше ограничиться стилями. CSS3 — это мощный инструмент, который лучше использовать по максимуму. Т.е. в данном примере можно сократить количество изображений для дизайна кнопки не с 3 до 1, а с 3 до 0.
Спасибо, я это учту)
Зачем писать так: background:url(img/sprite.jpg); background-position:0px -12px;> если можно все в одном свойстве записать. background:url(img/sprite.jpg) 0px -12px; результат тот же.
Аааа… создавать кнопку через div?
Почему не button? Ну хоть немножко же семантики.
А сегодня у нас тема тоже посвящена оптимизации изображения, но куда более сложная, чем в прошлый раз. А именно, сегодня я расскажу и покажу, как создавать CSS спрайты для ускорения загрузки сайта. Именно эта технология позволяет существенно повысить скорость загрузки сайта.
Что такое CSS спрайты
В обще технологию спрайтов впервые придумали мультипликаторы в Disney. После чего эту технологию активно стали использовать в компьютерных играх и наконец, в веб-дизайне.
В мультипликации и компьютерных играх технология спрайтов позволяет накладывать персонажи и управлять их действиями на фоне готовой сцены.
В веб-дизайне, спрайты позволяют управлять изображением и визуальными эффектами. Пример: кнопка вверх на моём сайте. Изначально вы видите одно изображения, но подведя курсор мышки на ракету – видите другое изображение. Но на самом деле – это одно изображение.
В этом вся суть CSS спрайтов.
Зачем нужно использовать CSS спрайты
Ну, конечно же, для ускорения скорости загрузки сайта. В качестве примера будем рассматривать мой блог. Если посмотреть внимательно, то на моём блоге много элементов дизайна, которые представлены отдельными файлами (изображениями).
Так и объём загружаемого изображения снижается и количество запросов к серверу. А следовательно повышается скорость загрузки сайта.
Какие изображения нужно объединять в CSS спрайты
Не нужно думать, что следует объединить абсолютно все изображения. Это вовсе не обязательно. Для того чтобы узнать какие изображения стоит объединять советую использовать, уже знакомый нам сервис GTmetrix.
Здесь же вы сможете увидеть и рекомендации по созданию спрайтов. А точнее рекомендация генератора CSS спрайтов SpriteMe. С помощью данного генератора можно легко создать нужные спрайты. Но мне он не помог, и поэтому пришлось делать всё самостоятельно.
Как создать CSS спрайты
Сейчас образно постараюсь объяснить, как это работает. Итак, представьте, — весь шаблон сайта это сплошной каркас с множеством ячеек для вставки графических элементов. А за этим каркасом сплошное изображение с множеством графических элементов дизайна. И управляется это изображение при помощи CSS стилей. То есть, используя CSS стили можно в любое окошко каркаса подставить нужный фрагмент изображения. Надеюсь, понятно объяснил. Итак, приступим.
После того, как сервис GTmetrix подсказал вам или вы сами определились какие файлы необходимо объединить в спрайты, — следует приступить к созданию спрайта (заготовки).
Итак, я провожу анализ сайта в сервис GTmetrix и по очереди сохраняю в отдельную папку на компьютере, предложенные изображения.
Вот из этих отдельных изображений мы и будем создавать спрайт.
Конечно, есть сервисы и генераторы спрайтов и CSS стилей. Этими сервисами вы сможете пользоваться после того, как Вы сами сделаете всё вручную. Поймёте весь технологический процесс.
Итак, открываем графический редактор. Я работаю в фотошопе. Но так как не знаю, есть ли у вас фотошоп, покажу весь этот процесс в онлайн редакторе Pixlr Edition.
Создаём новое изображение с прозрачным фоном. Размер выбирайте так чтобы уместить все изображения. Ну, к примеру, если у вас все изображения 32х32 и 16х16 пикселей и есть одно 380х150, — вот и делайте своё изображение, так чтобы уместить все эти изображения в одном.
И обязательно сделайте прозрачный фон.
Теперь поочерёдно выставляйте все изображения, которые вы приготовили ранее.
Должно получиться нечто подобное.
Теперь изображение нужно загрузить на хостинг в папку с изображениями темы:
Учтите, могут быть и отличия в названии папки для хранения изображений темы.
Загрузку файла на хостинг можно сделать через файловый менеджер хостинга, в моём случае это Спринтхост. Или через FTP-соединение. Это уже на ваше усмотрение.
Здесь Вы можете видеть HTML код и CSS стили. То есть вы видите файл, отвечающий за вывод стилей и номер строки где искать класс, отвечающий за данный фрагмент. Из скриншота понятно, что класс sidebar и именно заголовок h2 , расположен в файле style.css на 339 стоке . Вот именно здесь и нужно вводить все необходимые изменения стилей.
Но уже здесь в окне исследования элемента Вы можете поэкспериментировать со стилями и подобрать нужный. После чего вам нужно будет просто перенести эти стили в файл style.css.
Прежде чем приступить к данному шагу, настоятельно рекомендую сделать резервную копию файла style.css.
Теперь ваша задача открыть файл style.css и внести нужные изменения. Вы можете сделать это при помощи Notepad++ (очень удобный редактор, и отображает номер строки) или через редактор в административной панели WordPress.
Нужно всего лишь изменить название файла изображения и ввести параметры положения относительно оси координат. Если у Вас не так как у меня на скриншоте, то вы должны понимать, что за вывод изображения (фона) отвечает параметр: background: url(‘images/spriteme.jpg’);
А за позицию изображения отвечает параметр: background-position: -0px -0px; с отрицательными значениями. Первое число это смещение по оси Х, второе – смещение по оси Y.
Вот таким вот способом Вы можете заменить множество изображений шаблона на одно, разница лишь будет в положении этого изображения. Работа весьма кропотливая, но под силу каждому.
На этом создание CSS спрайтов для сайта закончено. Следуйте инструкциям и у вас всё получится.
В ближайшее время запишу видеоурок, в котором постараюсь подробно показать и рассказать о создании CSS спрайов.
А вот и обещанный видеоурок:
И небольшая шпаргалка, css стили и списки используемые в видеоуроке, скачать шпору можно здесь .
Читайте также: