Как сделать спрайт в фотошопе. Создаем CSS спрайты
Существует множество методов по оптимизации веб-страниц. Какие-то из них работают, какие-то уже нет. Тем не менее есть некоторые методы, обязательные для исполнения на любом сайте и блоге. Об одном из них я и хотел с вами поговорить.
Один из основных методов оптимизации страниц сайта. Поэтому сегодня мы поговорим о том, как объединить в CSS спрайты изображения на сайте, увеличив тем самым скорость их загрузки.
Немного истории
В далеком-далеком прошлом, когда в квартирах пиликали модемы, а скорость соединения не превышала 5 Кбит/сек., люди корпели над нелегкой задачей, как заставить сайты загружаться быстрее и при этом не платить баснословные суммы за входящий трафик. Думали они, значит, думали, и придумали компоновать изображения, используемые на странице в спрайты.
И понеслось…
Объединяем изображения в спрайт
И так, как мы ранее выяснили, спрайт – это несколько изображений, скомпонованных в одно целое на прозрачном фоне, доступ к которым осуществляется при помощи CSS свойства background-position . Но пожалуйста, не перепутайте его с коллажем. Спрайт ≠ коллаж.
Для того чтобы получить спрайт, нужно все кнопки, иконки, буллиты и прочую хрень , максимально компактно уместить в одном PNG файле. Не забудьте, фон должен быть прозрачным. А теперь давайте разберем на примере.
Допустим, мы располагаем PSD файлом вот с такой распрекрасной кнопкой в 3х состояниях.
Что делает среднестатистический блоггер-верстальщик-самоучка? Он вырезает кнопку в каждом состоянии и сохраняет ее в отдельных файлах. То есть, одна кнопка занимает у этого славного человека 3 картинки. А если вы напряжетесь, то вспомните, что каждая картинка на сайте, это дополнительный HTTP запрос, который нагружает сервер и ваш блог работает все медленнее и медленнее и медленнее и медленнее и медленнее и медленнее и медленнее…
Чтобы этого не происходило, гораздо логичнее сохранить кнопку в одном файле . Для этого мы, открываем все тот же PSD файл, удаляем из него бесполезные стрелки, надписи, фон и компонуем все состояния кнопки как можно ближе друг к другу без нахлеста.
Вот что у нас в итоге получилось. Ни в коем случае кнопки не должны между собой пересекаться.
Отлично, графический файл мы с вами подготовили, теперь давайте я покажу вам как его сверстать.
Верстка спрайтов
Верстка CSS спрайтов ничем не отличается от верстки обычных картинок, за исключением одного НО. Вам нужно знать не только точный размер того изображения, которое вы хотите отобразить, но и его координаты. К примеру, весь спрайт у нас занимает 330 px в ширину и 150 px в высоту.
Но нам нужно отобразить только кнопку, которая занимает 227 px в ширину и 41 px в высоту, точно указав ее координаты. Если вы не располагаете хорошим html редактором - могу .
Создаем файл index.html и прописываем в него необходимые строки кода, доктайп и все такое.
После того, как все стандартные действия проделаны, давайте попробуем отобразить нашу кнопку.
После тега body создаем контейнер div с классом button – это и будет наша кнопка.
На этом наш html заканчивается и теперь необходимо прописать для кнопки CSS стили.
Код ниже показывает, что сначала мы объявляем класс button . Затем при помощи свойств height и width задаем размеры нашей кнопки. Свойство background позволяет выбрать файл, который мы будем использовать в качестве спрайта, а background-position задать координаты, требующейся нам картинки в этом спрайте. Все просто.
Button { height:41px; width:227px; background:url(img/sprite.png); background-position:0px -12px;}
Давайте подробнее разберемся со свойством background-position .
Как можно заметить из кода выше, оно имеет два значения. Первое значение позволяет задать координаты изображения по оси X, а второе, следовательно, по оси Y.По оси X наша кнопка никуда не скачет, так-как все состояния находятся друг под другом. Следовательно, для того, чтобы при наведении появилась второе состояние кнопки, нам нужно изменить значение, отвечающее за ось Y.
Button:hover {background-position:0px -56px;} .button:active {background-position:0px -98px;}
Как известно, а если нет то уже да, каждая кнопка имеет несколько состояний.
- Normal – нормальное или обычное состояние
- Hover – состояние кнопки при наведении курсора
- Active – состояние кнопки во врем нажатия
Этими свойствами мы и воспользовались.
Если лень вручную делать спрайты и вообще заморачиваться с фотошопом, вам поможет замечательный бесплатный сервис: spritepad.wearekiss.com . Просто закидываете в рабочую область необходимые картинки и он составит для вас спрайт.
В заключении
CSS спрайты - очень важный этап на пути ускорения работы сайта. Отнеситесь к нему с должным уважением и старайтесь использовать повсеместно.
До того, как в CSS появился псевдокласс:hover , создание ролловера - элемента, который меняет свой вид при наведении курсора - реализовывалось через язык JavaScript. Сейчас это делается намного проще, но есть один недостаток: если в состоянии:hover (т. е. при наведении курсора на элемент) должно появиться какое-то фоновое изображение, то оно начинает загружаться в момент наведения курсора, а не при общей загрузке страницы.
Из-за этого может возникать небольшая задержка при появлении картинки в первый раз. И хотя при всех последующих наведениях курсора этой задержки уже нет, многие разработчики задумались над тем, как устранить эту проблему. Например, с помощью JavaScript можно обеспечить загрузку всех фоновых изображений заранее. Но есть способ, который не требует знаний языка программирования, и заключается он в использовании спрайтов.
Что такое спрайты CSS
CSS-спрайт - это один графический файл, который содержит много различных изображений. В нем могут быть собраны, к примеру, все графические элементы интерфейса, такие как иконки, кнопки и прочее. Также в спрайты часто объединяют фоновые картинки вместе с их вариациями для состояния:hover . Типичные примеры спрайтов:
Спрайт, в котором собраны все используемые иконки
Спрайт со значками соцсетей и их вариациями для:hover
Преимущества CSS-спрайтов
- CSS-спрайт содержит в себе фоновые изображения для различных состояний элементов, и загружается он целиком при загрузке веб-страницы. Это исключает подтормаживание ролловера при первичном наведении курсора на элемент.
- Сокращается количество обращений к серверу. Ведь для загрузки каждой маленькой иконки требуется отдельный запрос, а чем меньше обращений, тем лучше. Для загрузки спрайта понадобится всего один запрос на сервер.
- Еще одно преимущество хранения множества картинок в спрайте заключается в том, что если у них похожая палитра цветов, то одно большое изображение будет весить меньше, чем отдельные маленькие картинки в сумме.
- Всё это в целом положительно влияет на скорость загрузки сайта.
Как создать спрайт из картинок
В классическом случае спрайты создаются в редакторе изображений. Мелкие картинки последовательно размещаются на большом полотне (нередко с прозрачным фоном), которое затем сохраняется как графический файл.
Ручной способ создания спрайтов - занятие довольно долгое. Поэтому, когда использование спрайтов стало набирать обороты, появились онлайн-сервисы по автоматическому созданию спрайт-листов, например, Spritegen , RetinaSpriteGenerator и другие. Вы загружаете необходимые изображения в отдельных файлах на сайт, и для вас генерируется спрайт, который вы сразу можете скачать на компьютер.
Как пользоваться спрайтами CSS
Теперь пора узнать, как использовать CSS-спрайты на практике. Мы покажем вам небольшой пример с использованием спрайта, содержащего значки социальных сетей (мы показывали его выше). В обычном состоянии ссылки значок соцсети будет цветным (верхний ряд спрайта), а при наведении курсора он будет становиться серым (как в нижнем ряду).
HTML-разметка выглядит следующим образом:
Для ссылки на каждую соцсеть мы создали свой класс. Поскольку это тестовый пример, то мы не тратим время на заполнение атрибутов href - вместо ссылок на настоящие сайты мы поставили заглушки. Внутрь тега мы ничего не помещаем, потому что за внешний вид ссылок будут отвечать их фоновые изображения со значками соцсетей.
Переходим к CSS. Первым делом запишем общие стили для всех ссылок:
A { background-image: url(https://goo.gl/1t18Rz); background-repeat: no-repeat; height: 98px; width: 100px; display: inline-block; margin-right: 10px; }
Следующие две строки - высота и ширина каждого элемента . Каким образом определялись эти значения? Здесь мы отталкивались от размеров значков в спрайте. Высота каждой иконки равна 98 пикселям, а ширина - 100 пикселей. Далее мы будем позиционировать фоновую картинку для каждой ссылки, подстраивая фон таким образом, чтобы значок ровно вписался в «окошко» ссылки размером 98×100 пикселей.
A.facebook { background-position: left top; }
Идем дальше: позиционируем фон для ссылки на Twitter. Иконка Твиттера расположена справа от Facebook и примыкает к ней, не создавая пустых промежутков. Нам необходимо переместить спрайт влево на столько пикселей, чтобы скрыть иконку Facebook и полностью заполнить область ссылки иконкой Twitter. Поскольку ширина каждой иконки равна 100 пикселям, то мы и сдвигаем фон влево на 100 пикселей. Вертикальное позиционирование мы пока нигде не меняем, а оставляем значение top:
A.twitter { background-position: -100px top; }
Аналогичное действие мы проделаем для остальных ссылок, прибавляя к каждому последующему горизонтальному позиционированию еще 100 пикселей, тем самым сдвигая спрайт всё больше и больше влево. Получится такая картина:
A.youtube { background-position: -200px top; } a.instagram { background-position: -300px top; } a.linkedin { background-position: -400px top; } a.tumblr { background-position: -500px top; } a.google { background-position: -600px top; }
Результат работы данного кода показан на скриншоте ниже:
Теперь разберемся с поведением фоновых картинок при наведении курсора на ссылку. Нам нужно смещать спрайт по вертикали вверх таким образом, чтобы в область просмотра попадала иконка из нижнего ряда спрайта. Здесь всё довольно просто и решается одним правилом CSS, а именно присвоением значения bottom свойству background-position-y:
A:hover { background-position-y: bottom; }
В нашем случае этот стиль можно записать один для всех ссылок, и он будет работать правильно. Однако в других ситуациях, когда элементы в спрайте расположены в другом порядке, вам может понадобиться писать больше кода.
Результат работающих спрайтов смотрите на демонстрации ниже (для более красивой подачи примера мы сделали сдвиг фона более плавным при наведении курсора):
Если вам стало интересно, то вот и строка, которая отвечает за плавность изменения иконок (не волнуйтесь, чуть позднее мы будем изучать CSS-анимацию, и в частности свойство transition):
A { transition: all 0.2s ease-out; }
Итак, теперь вы знаете, что такое спрайты CSS и чем они могут быть полезны. Помимо предотвращения задержек при загрузке фоновых картинок, использование спрайтов помогает снизить нагрузку на сервер. Кроме того, это удобный способ хранить все графические элементы интерфейса в одном месте.
Вот мы и разобрали основные методы стилизации ссылок. Рекомендуем вам дополнительно попрактиковаться, чтобы закрепить полученные знания. А следующая глава нашей книги посвящена CSS-анимации, реализация которой стала возможна благодаря свойствам, появившимся в CSS3. И в первом уроке мы разберем свойство трансформации -
Здравствуйте, уважаемые друзья. Сегодня мы продолжим оптимизировать изображения на наших сайтах для ускорения скорости загрузки. Как вы помните из , мы научились оптимизировать любые изображения для сайта, как в индивидуальном порядке, так и массово.
А сегодня у нас тема тоже посвящена оптимизации изображения, но куда более сложная, чем в прошлый раз. А именно, сегодня я расскажу и покажу, как создавать 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 стили и списки используемые в видеоуроке, скачать шпору можно здесь .
На этом у меня сегодня всё. Друзья, всем желаю удачи!
Использование CSS-спрайтов на сайте позволяет повысить производительность и грамотно организовать элементы интерфейса.
Sprite Sheet - это одно большое изображение мелких графических элементов сайта, например иконок или кнопок. И благодаря CSS можно отображать каждый элемент отдельно.
Применение на практике
Главным преимуществом использования спрайтов является однократная загрузка сервером сразу всех элементов в одном файле. некоторые могут подумать, что подгрузка маленьких, мало весящих картинок позволяет увеличить производительность сайта, но это не так - случае отдельных изображений увеличивается количество HTTP-запросов. Также, при использование единого спрайта позволяет уменьшить вес графики. Пример спрайта на сайте webdesign tuts :Пример кода для использования спрайтов на странице (демонстрация):
Также спрайты часто используют для создания простого и кроссбраузерного hover-эффекта (демонстрация):
До или после?
Существует два подхода при подготовке спрайтов: до и после разработки сайта. В первом случае все мелкие картинки интерфейса компилируются в один файл на финальном этапе создания сайта. В этом случае удобно редактировать отдельные изображения, а также использовать их отдельно, если это необходимо. Такой способ подходит больше начинающим веб-дизайнерам.Более опытные разработчики готовят спрайты на начальном этапе, это позволяет лучше организовать графику будущего дизайна, а также готовить PSD-шаблон к верстке.
Организация элементов дизайна
При подготовке файла со спрайтами стоит максимально уплотнить изображения, а если они одинакового размера (например иконки) - создать сетку, благодаря которой упростится использование спрайтов на сайте:Готовить файл следует таким образом, чтобы будущие изменения в нем не влияли на расположение уже существующих элементов, иначе придется править весь CSS. PSD-файл со спрайтами обязательно должен быть хорошо маркирован: необходимо понятно называть все слои и группы, а также стараться не сливать слои, которые в будущем могут быть изменены.
Полезные инструменты
- отличный фреймворк, который умеет создавать спрайты из папки с изображениями. Также использует Sass.Инструмент, позволяющий создавать файлы со спрайтами простым добавлением строчки кода в Sass-файлы.
Букмарклет, который умеет генерировать и просматривать использованные на сайте спрайты.
Вот как выглядит рабочий слой букмарклета.
На современных сайтах можно встретить большое число самой разной по типу графики: изображения товаров, аватарки пользователей, картинки, формирующие дизайн страниц, кнопки, иконки, логотипы и т.д. И чем крупнее проект, тем больше графических файлов там используется. При открытии отдельной страницы сайта в браузере происходит загрузка всех ее элементов. Поэтому, когда на ней размещено слишком много графики, скорость загрузки, как правило, значительно снижается. Что, в свою очередь, чревато неудобствами для посетителей вашего проекта.
CSS Sprites
На главной странице размещена форма загрузки графических файлов (для каждого файла – отдельная кнопка). Изначально видно лишь три кнопки для загрузки. Если вам нужно больше, то жмите на «Need More».
После того, как все файлы для будущего CSS спрайта выбраны, жмите на кнопку «Options». Перед вами откроется небольшая панель с настройками. Здесь можно задать отступы между элементами в пикселях, добавить рамку для изображений, выровнять все картинки в готовом спрайте по левому или по верхнему краю, задать фоновый цвет в RGB-формате.
После нажатия на кнопку «Generate» произойдет непосредственное создание CSS спрайта. Также вы увидите небольшую инструкцию для его использования, а именно CSS код, который нужно будет разместить на своем сайте. Есть даже пример в HTML. Разобраться, думаю, не проблема.
Визуально Dan’s Tools CSS Sprite Generator — достаточно симпатичный генератор спрайтов CSS со многими настройками. Можно, например, выбрать вертикальный или горизонтальный тип вставки иконок в общее изображение.
CSS Sprites
В сервисе CSS Sprites все предельно просто как по дизайну, так и по настройкам. Есть выбор формата результирующего изображения: PNG, JPEG, GIF. На странице имеется линк на адаптивную версию генерации спрайтов — Responsive CSS Sprites (хотя я ее не пробовал).
Итого. В принципе, все нюансы как сделать CSS спрайты и их использовать мы рассмотрели. Генераторы помогут ускорить процесс создания элементов, но можно обойтись и фотошопом. Если будут какие-то вопросы, пишите в комментариях.