В чем преимущество использования CSS-спрайтов ? Представьте, что у вас есть шесть изображений, используемых в макете веб-страницы, и браузер должен загружать их все по отдельности. Если бы они были объединены в одно изображение, вы смогли бы существенно увеличить скорость загрузки. Это уменьшит количество обращений к серверу, необходимых для отображения страницы, что сделает ваш сайт быстрее.
Вместо загрузки шести изображений теперь загружалось бы одно. В этом преимущество CSS спрайтов .
В большинстве веб-страниц используется несколько маленьких изображений. Фоновые изображения, стрелочки, иконки, пункты меню и т.д. Эти крошечные изображения действительно имеют значение, если рассматривать их влияние на скорость загрузки страницы.
Каждое изображение должно быть загружено. Браузер должен запросить на сервере изображение, сервер отправить его, а затем браузер должен его отобразить. Если бы дело касалось одного-двух изображений, особых проблем бы не возникло. Но так как рисунков загружается намного больше — это негативно сказывается на скорости загрузки страницы.
Решение – использование спрайтов, которые в одном изображении сочетают несколько маленьких, поэтому веб-страницы можно загружать значительно быстрее.
Как объединить изображения в спрайт
Существует два основных этапа создания CSS спрайтов . Сначала вы должны создать изображение и затем поместить его.
Объединение изображений
Предположим, у нас есть два изображения, которые мы хотим объединить в одно целое. Чтобы создать спрайт, мы должны знать размер изображений. Мы будем рассматривать пример, в котором оба изображения имеют одинаковый размер (50 на 50 пикселей ):
Чтобы объединить их, нам нужно создать изображение размером 100 на 50 пикселей. Давайте назовем его «sprite.png «. Теперь, когда у нас есть объединенное изображение, мы можем использовать информацию о нем для правильного отображения на веб-странице.
Объединенное изображение имеет ширину 50 пикселей и высоту 100 пикселей. Таким образом, мы можем сказать, что первый рисунок (мегафон ) расположен в верхних 50 пикселях нового изображения, а второй (смайлик ) — в нижних 50 пикселях изображения. Мы будем показывать верхнюю половину изображения, когда нужно вывести мегафон, и нижнюю половину, когда нужно вывести смайлик. Реализация создания спрайтов CSS :
Позиционирование изображения на странице
В этом примере мы будем использовать рисунки в качестве фоновых изображений, размещенных в элементах div . Мы создадим пустые теги div для отображения изображений. Если на нашей странице нам нужно вывести изображение мегафона, мы используем CSS-класс «megaphone «:
Megaphone {width:50px; height:50px; background:url(images/sprite.png) 0 0px;}
Приведенный выше код CSS указывает ширину и высоту изображения мегафона (50 на 50 пикселей ), он также вызывает изображение «sprite.png «, которое является объединенным. Часть кода «0 0px » отвечает за отображение спрайта. Указание начинать вывод изображения с «0 0px » означает, что оно должно отображаться с 0 пикселей по оси X и с 0 пикселей по оси Y . Это значит «начинать вывод изображения сверху » и «начинать вывод изображения слева «.
Так как в CSS мы определили ширину и высоту изображения, то будут отображаться только 50 его верхних пикселей (где расположен мегафон ). Таким образом, смайлик не будет виден вовсе. Теперь давайте выведем смайлик и посмотрим, как изменится код CSS спрайта . Мы создадим класс CSS под названием «smile «:
Smile {width:50px; height:50px; background:url(images/sprite.png) 0 -50px;}
Обратите внимание, что мы по-прежнему указываем те же ширину и высоту, вызываем то же изображение, но мы изменили эту часть: «0 -50px «. Так мы указываем, что изображение должно начинаться на 50 пикселей ниже начальной точки координат (-50px ). Потому что рисунок смайлика начинается не в начале, а на 50 пикселей вниз от верхней части объединенного изображения.
Теперь, когда CSS-код указан, мы можем вызвать div везде, где нам нужно вывести изображение. Там, где нужно вывести мегафон, мы размещаем пустой блок div с классом «megaphone «:
Когда нужно вывести смайлик, мы размещаем div с классом «smile «:
Таков основной принцип, как сделать спрайт CSS . Существует много способов реализовать это, и лучше выбрать тот, который больше подходит вам. В этой статье мы показали, как работают спрайты, но не рассмотрели их углубленно.
Перевод статьи «How to use CSS sprites » был подготовлен дружной командой проекта .
Здравствуйте, уважаемые друзья. Сегодня мы продолжим оптимизировать изображения на наших сайтах для ускорения скорости загрузки. Как вы помните из , мы научились оптимизировать любые изображения для сайта, как в индивидуальном порядке, так и массово.
А сегодня у нас тема тоже посвящена оптимизации изображения, но куда более сложная, чем в прошлый раз. А именно, сегодня я расскажу и покажу, как создавать CSS спрайты для ускорения загрузки сайта. Именно эта технология позволяет существенно повысить скорость загрузки сайта.
Что такое CSS спрайты
В обще технологию спрайтов впервые придумали мультипликаторы в Disney. После чего эту технологию активно стали использовать в компьютерных играх и наконец, в веб-дизайне.
В мультипликации и компьютерных играх технология спрайтов позволяет накладывать персонажи и управлять их действиями на фоне готовой сцены.
В веб-дизайне, спрайты позволяют управлять изображением и визуальными эффектами. Пример: на моём сайте. Изначально вы видите одно изображения, но подведя курсор мышки на ракету – видите другое изображение. Но на самом деле – это одно изображение.
В этом вся суть CSS спрайтов.
Зачем нужно использовать CSS спрайты
Ну, конечно же, для ускорения скорости загрузки сайта. В качестве примера будем рассматривать мой блог. Если посмотреть внимательно, то на моём блоге много элементов дизайна, которые представлены отдельными файлами (изображениями).
Элементы дизайна, которые можно заменить спрайтом
В общей сложности это 19 отдельных изображений. Все они оптимизированы и очень мало весят. И это очень хорошо. Но само количество изображений, создаёт 19 HTTP запросов к серверу. И все эти запрос-ответ замедляют загрузку сайта. А можно эти 19 изображений заменить одним или двумя.
Так и объём загружаемого изображения снижается и количество запросов к серверу. А следовательно повышается скорость загрузки сайта.
Какие изображения нужно объединять в CSS спрайты
Не нужно думать, что следует объединить абсолютно все изображения. Это вовсе не обязательно. Для того чтобы узнать какие изображения стоит объединять советую использовать, уже знакомый нам сервис GTmetrix .
Здесь же вы сможете увидеть и рекомендации по созданию спрайтов. А точнее рекомендация генератора CSS спрайтов SpriteMe . С помощью данного генератора можно легко создать нужные спрайты. Но мне он не помог, и поэтому пришлось делать всё самостоятельно.
Как создать CSS спрайты
Сейчас образно постараюсь объяснить, как это работает. Итак, представьте, — весь шаблон сайта это сплошной каркас с множеством ячеек для вставки графических элементов. А за этим каркасом сплошное изображение с множеством графических элементов дизайна. И управляется это изображение при помощи CSS стилей. То есть, используя CSS стили можно в любое окошко каркаса подставить нужный фрагмент изображения. Надеюсь, понятно объяснил. Итак, приступим.
После того, как сервис GTmetrix подсказал вам или вы сами определились какие файлы необходимо объединить в спрайты, — следует приступить к созданию спрайта (заготовки).
Итак, я провожу анализ сайта в сервис GTmetrix и по очереди сохраняю в отдельную папку на компьютере, предложенные изображения.
Сохраняем изображения в отдельной папке
Вот из этих отдельных изображений мы и будем создавать спрайт.
Создаём новое изображение с прозрачным фоном. Размер выбирайте так чтобы уместить все изображения. Ну, к примеру, если у вас все изображения 32х32 и 16х16 пикселей и есть одно 380х150, — вот и делайте своё изображение, так чтобы уместить все эти изображения в одном.
И обязательно сделайте прозрачный фон.
Но даже если Вы ошиблись с размером это всегда можно подправить через пункт меню «Изображение» — «Размер изображения» .
Теперь поочерёдно выставляйте все изображения, которые вы приготовили ранее.
Пункт меню «Файл» > «Открыть изображение» . Откроется изображение, выделите его CTRL+Aи скопируйте в буфер обмена CTRL+C. Перейдите к заготовке и вставьте изображение CTRL+V. И так со всеми изображениями.
Должно получиться нечто подобное.
Теперь следует обрезать всё лишнее. Для этого используйте инструмент «Обрезка» .
Когда заготовка готова, сохраняем её в PNG формате и половина дела готова. Пункт меню «Файл» > «Сохранить» . Не забудьте про формат.
Теперь изображение нужно загрузить на хостинг в папку с изображениями темы:
http://vashdomen/wp-content/themes/vahatema/images/
Учтите, могут быть и отличия в названии папки для хранения изображений темы.
Загрузку файла на хостинг можно сделать через файловый менеджер хостинга, в моём случае это . Или через . Это уже на ваше усмотрение.
А вот теперь начинается самое сложное, нужно заменить изображения шаблона – спрайтом. В качестве примера, возьмём на моём блоге заголовки блоков в сайтбаре и исследуем код элемента. Для этого нужно нажать правую кнопку мыши на нужном элементе и в контекстно-зависимом меню выбрать пункт «Посмотреть код элемента» (для Chrome) или «Исследовать элемент» (для Firefox). Примерно так и для других браузеров.
Исследование элемента в шаблоне
Здесь Вы можете видеть HTML код и CSS стили. То есть вы видите файл, отвечающий за вывод стилей и номер строки где искать класс, отвечающий за данный фрагмент. Из скриншота понятно, что класс sidebar и именно заголовок h2 , расположен в файле style.css на 339 стоке . Вот именно здесь и нужно вводить все необходимые изменения стилей.
Но уже здесь в окне исследования элемента Вы можете поэкспериментировать со стилями и подобрать нужный. После чего вам нужно будет просто перенести эти стили в файл style.css.
Прежде чем приступить к данному шагу, настоятельно рекомендую сделать резервную копию файла style.css.
Теперь ваша задача открыть файл style.css и внести нужные изменения. Вы можете сделать это при помощи Notepad++ (очень удобный редактор, и отображает номер строки) или через редактор в административной панели WordPress.
Итак, открываем административную панель WP– «Внешний вид» > «Редактор» > «style.css» . Так как здесь нет нумерации строк, следует искать нужное место при помощи поиска CTRL+F и вводите искомый CSS класс (в моём случае — sidebar h2).
Внесение изменений в код style.css
Нужно всего лишь изменить название файла изображения и ввести параметры положения относительно оси координат. Если у Вас не так как у меня на скриншоте, то вы должны понимать, что за вывод изображения (фона) отвечает параметр: background: url(‘images/spriteme.png’);
А за позицию изображения отвечает параметр: background-position: -0px -0px; с отрицательными значениями. Первое число это смещение по оси Х, второе – смещение по оси Y.
Вот таким вот способом Вы можете заменить множество изображений шаблона на одно, разница лишь будет в положении этого изображения. Работа весьма кропотливая, но под силу каждому.
На этом создание CSS спрайтов для сайта закончено. Следуйте инструкциям и у вас всё получится.
В ближайшее время запишу видеоурок, в котором постараюсь подробно показать и рассказать о создании CSS спрайов.
А вот и обещанный видеоурок:
И небольшая шпаргалка, css стили и списки используемые в видеоуроке, скачать шпору можно здесь .
На этом у меня сегодня всё. Друзья, всем желаю удачи!
Компьютерная индустрия в последние годы поднялась очень и очень высоко. Если раньше компьютерные игры были всего лишь развлечением для узкого круга любителей, то сейчас это нечто большее. В них могут играть люди всех возрастов, создаются проекты, которые соответствуют даже самым тонким вкусам. А самое главное, появились невероятные возможности, о которых раньше нельзя было и подумать, поэтому сейчас компьютерные игры могут быть практически неотличимы от реальности в плане графики и физики, они могут погружать пользователя в неизведанные миры, позволяя ему проживать невероятные истории и являться в них ключевым персонажем. Но при этом некоторые люди не хотят ограничиваться самим процессом "играния" - их увлекает процедура создания игр. Однако большинство таких мечтателей так и остаются на уровне фантазий, потому что считают, что данный процесс слишком сложный. На самом деле все не так, что подтверждается огромным количеством инди-разработчиков, которые сейчас производят множество проектов без больших бюджетов и поддержки издателей. Просто нужно начинать с малого и постепенно идти вперед. Из данной статьи вы узнаете, что такое спрайты для игр и как их использовать, чтобы затем начать создавать свои собственные проекты.
Что такое спрайты?
Если перед вами компьютерная игра на мониторе, то что вы видите перед собой? Графическую оболочку данного проекта, разнообразные текстуры, составленные из крошечных пикселей. Если вы планируете создавать компьютерную игру, то вам предстоит много работать с графикой. Но если вы пока что не замахиваетесь на крупный проект, то от вас не требуется идеальной работы с графическими 3D-редакторами. Здесь вам помогут спрайты для игр, которые вы можете скачать в интернете. Но что же это такое? Как их можно использовать и чем это облегчит вам задачу? Спрайты для игр - это готовые текстуры персонажей, предметов и так далее, которые вы можете загрузить на свой компьютер, а затем использовать в процессе создания игры. Это значит, что вам не нужно будет отрисовывать каждый объект в игре, а также каждую фазу его движения - все это уже будет у вас в готовом виде. Как видите, спрайты для игр действительно значительно могут облегчить вам жизнь.
Вид спрайтов
Теперь вы имеете общее представление о том, что такое спрайты для игр, но этого будет недостаточно, чтобы их использовать на практике. Нужно разобраться, что они конкретно собой представляют и как их применить в создании игр. Если вы собираетесь воспользоваться спрайтами, то вам нужно их скачать на компьютер. В большинстве случаев они будут выглядеть как большой или даже огромный графический файл, в котором на прозрачном фоне будут располагаться десятки или даже сотни маленьких изображений. Соответственно, вы сможете нарезать этот большой файл на маленькие, чтобы иметь прямой доступ к вашим спрайтам. Возможно, некоторые из них вам не понадобятся, и вы сможете их вырезать, так что такой способ намного удобнее, чем скачивание десятков и сотен отдельных изображений. Вы просто выбираете большой файл, отмечаете область, и у вас готов спрайт.
Использование спрайтов
Как вы прекрасно понимаете, в большинстве случаев вы сможете найти спрайты для игр 2D, так как трехмерные изображения не столь стандартизированы, поэтому понадобится очень много места, чтобы передать все движения одного трехмерного объекта. В то же время работа с двухмерными спрайтами крайне проста. Вам нужно просто загружать спрайты в редактор, в котором вы творите, и склеивать их, создавая эффекты движения. А затем загружать в уровень и наслаждаться результатом.
Переход от спрайтов к графике
Вы не сможете всю жизнь использовать спрайты для создания игр, так что если вы ставите перед собой амбициозные цели, вам нужно либо учиться работать с либо искать помощника, который владеет этим навыком.
Доброго времени суток, сегодня хочу рассказать вам о том, как сделать 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 {
transition: .3s;
}
a. tvitter: hover{
transition: .3s;
}
Для того, чтобы отображался необходимый элемент спрайта, следует его спозиционировать. Для этого, после того, как фон ссылке задан, необходимо задать координаты.
Например, вы могли заметить, что на спрайте первым элементом идет иконка социальной сети «Вконтакте», а первой иконкой в меню соц. иконок — «Твиттер». То есть, если мои иконки имеют ширину 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 спрайты для своих сайтов. Завтра я постараюсь проанализировать на сколько быстрее грузится сайт при использовании этой технологии.
В сегодняшней статье хочу немного поговорить о CSS спрайтах и дать несколько ссылок, где можно создать эти самые спрайты. Техника использования спрайтов совсем не нова и используется уже давно, однако сложность их создания отпугивает вебмастеров. Попробуем им помочь…
Что такое CSS спрайты?
Представьте одну, большую картинку, на которой изображены все ваши иконки, разделители, кнопочки, стрелочки и прочие составляющие дизайна. Она грузится вместе с сайтом, все как обычно. Вот только не создает кучу запросов на все файлы, а исполняется одним запросом. Круто? Несомненно. После загрузки в нужном месте отображается нужная часть большой картинки.
Я где-то видел статистику (не вспомню, где, поэтому ссылочку не дам) — от 5 до 40% времени составляет собственно страницы, все остальное — обработка запросов сервером. Логично предположить, если уменьшится количество запросов — скорость загрузки вырастет пропорционально.
Давайте чуть подробнее рассмотрим плюсы и минусы использования спрайтов:
Плюсы использования спрайтов:
Минусы это технологии:
- при верстке необходимо указывать не только картинку, но и позицию фрагмента, что не совсем удобно и привычно.
- увеличение нагрузки на сервер. Большая картинка занимает больше оперативной памяти, учитывая «пустышки» между фрагментами.
- для изменения одной иконки придется ковырять весь файл, что не слишком удобно. Хотя, может оно и к лучшему
Выбираем, кому чего важнее — простота или скорость и идем дальше. Если с нагрузкой на сервер ничего не поделаешь, то для решения проблем с версткой и изменением спрайтов есть инструменты.
Генераторы спрайтов — онлайн сервисы, которые, в принципе, работают по одной схеме. Вы загружаете свой набор картинок, выбираете формат спрайта и система создает картинку и CSS разметку для этого файла.
Где создать спрайты?
Наверное, самый старый инструмент для создания CSS спрайтов. Отличительная черта — есть русский вариант интерфейса, это удобно. Хорошо настраивается, причем не только создание картинки, но и код CSS. В целом — отличный генератор, рекомендую. Кстати, кроме этого, сервис умеет генерировать фавиконы и рассчитывать права доступа для Unix систем.
CSS Sprites Generator
Этот генератор тоже неплох, имеет все необходимые настройки, генерирует на выходе файл чуть меньшего размера, чем предыдущий сервис. Отличительная особенность — удобный вывод кода CSS для каждого изображения.
Достаточно функциональный генератор, позволяющий не только создать обычный спрайт, он дает возможность вам самостоятельно двигать картинки, располагая их максимально компактно. Плюс — умеет выдавать сжатый CSS код, а также SASS код.
Sass - это метаязык на основе CSS, предназначенный для увеличения уровня абстракции CSS кода и упрощения файлов каскадных таблиц стилей.
Этот сервис отличается от остальных представленных тем, что он не создает картинку спрайта. Вы можете создать ее самостоятельно в Фотошопе или еще где-то, загрузить сюда и сервис поможет с кодом CSS. Достаточно наглядный и удобный интерфейс. Рекомендую для любителей все делать самостоятельно, не доверяя машине
Неплохой генератор, присутствует все, что нужно для создания. Единственный минус — каждую картинку придется загружать отдельно, нельзя загрузить кучей. В остальном — ничего примечательного, крепкий середнячок.
Сервис написан на HTML5, работает только в Chrome и Firefox, но развитие таких сервисов радует. Веб не стоит на месте и это хорошо Очень простой, минимум настроек. Но, если вы хотите быстрое и простое решение — этот генератор подойдет на 100%
Генератор спрайтов для настоящих джедаев Установите программу, укажите путь к CSS файлу со старой версткой и этот сервис все сделает за вас. У него куча возможностей — рекомендую почитать документацию на официальном сайте.
Практически полный аналог Спрайтбокса, тоже используется только для получения кода CSS, с той разницей, что здесь выбор границы элемента осуществляется не вручную, а автоматически, точность отработки заметно выше. Работает только в Хроме и Firefox
Отличный сервис, который работает так — заходите на готовую, сверстанную как обычно, страницу. Жмете на иконку сервиса (предварительно ее нужно установить букмарклетом) и все — сервис собирает все изображения с этой страницы и генерирует спрайт с кодом. Очень удобно, есть настройки, что конкретно необходимо собрать в кучу. В общем — неплохой сервис.
Очень простой, но понятный и удобный генератор. Перетащите картинки, который нужно объединить, расположите их как вам хочется и нажмите кнопку — спрайт и код готовы. Минус этого сервиса — работает только в Хроме и Огнелисе.
Сервис очень похож на описанный выше SpriteMe, с тем отличием, что тут нужно загружать руками все картинки и CSS файл, который необходимо менять. Минимум настроек, но работу свою он делает хорошо.
Надеюсь, теперь вам не страшна работа с CSS спрайтами и ваши проекты будут еще быстрее.
