Спрайты css пример: создание, применение — учебник CSS

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

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

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

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

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

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

Вместо того, чтобы использовать три отдельных изображения, мы используем это одиночное изображение («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 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:

Пример

#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 спрайтах. Их часто также называют веб-спрайтами (web-sprites), html-спрайтами (html-sprites). Первый раз с этой технологией я столкнулся, когда решил проверить скорость загрузки своих страниц. Страницы у меня небольшие, особенно ничем не перегружены и открываются достаточно быстро. И всё же хотелось проверить. Инструмент Page Speed от Google и аналогичный YSlow от Yahoo выдали мне список рекомендаций по увеличению скорости загрузки страниц. В числе этих рекомендаций было пожелание объединить изображения, размещенные на сайте, в спрайты. Так началось моё знакомство с CSS-спрайтами.

Что же это такое – css спрайты, и как их использовать? Основой метода является объединение множества картинок, размещённых на веб-странице в одну составную мозаичную картинку. Главным условием создания и использования css-спрайтов является наличие возможности использования этого множества картинок как фоновых вставок на странице. Как правило, эти картинки представляют собой различные логотипы, иконки, кнопки и другие графические элементы навигации и управления. Если эти картинки можно использовать не только как графику с тегом , но и как фоновые изображения со стилевым оформлением

Кстати, о CSS. Использование на странице отдельных конкретных картинок, из которых состоит объединённое составное изображение, осуществляется с помощью свойства background-position . Это свойство определяет положение фоновой картинки в элементе, используемом для ее размещения, по горизонтали и вертикали. Значениями свойства могут быть ключевые слова или значения, указанные в пикселях или процентах. При использовании css спрайтов обычно применяются точные значения в пикселях. Первое значение – координата по горизонтали (х), второе – по вертикали (у). Согласно спецификации CSS это свойство применяется для блочных и заменяемых элементов. На практике спрайты часто применяются в строчных элементах

Пользователи, хорошо знакомые с CSS, могут заметить, что позиционирование CSS спрайтов намного тоньше и сложнее. Да, это так. Если расположение спрайта задано в точных единицах (рх), то они интерпретируются как смещения от верхнего левого угла области отступа элемента. Точка, относительно которой отсчитываются смещения, – верхний левый угол исходного изображения.

Самое доходчивое объяснение позиционирования фона в случае задания точных значений свойства background-position я нашёл в блоге , откуда взята нижеследующая картинка и описание к ней:

«При задании позиционирования изображения фона с использованием абсолютных единиц в background-position имеет место быть следующий принцип определения его итогового положения. Т.е. браузер будет рассчитывать заданные отступы по осям X и Y от начала координат области, в которой позиционируется объект, до начала координат этого самого изображения. »

Цель этого обзора – ответ на вопросы: как создать css-спрайт, как объединить изображения в css спрайт и знакомство с тремя программами, обеспечивающими простое и лёгкое создание спрайтов CSS (CSS Sprites), поэтому о самой технологии я больше говорить не буду. В интернете сейчас много толковых и подробных материалов на эту тему (одну ссылку я указал выше). Обзор посвящён работе с программами по созданию CSS спрайтов (генераторами спрайтов), где я лишь коротко коснусь некоторых важных (на мой взгляд) моментов при использовании спрайтов. Сразу оговорюсь – применение CSS-спрайтов не панацея и пытаться запихнуть в спрайты большие картинки шапок, заставок и графики, которая используется именно как графика , а не как фоновые картинки , не следует. Использовать спрайты рекомендуется для перманентных, часто повторяющихся на страницах изображений. Если эти изображения будут часто заменяться на другие, возникнет необходимость в создании новых спрайтов и, естественно, правке CSS и HTML.

Подопытные генераторы css спрайтов (css sprite generators) это бесплатные программы CssSpriter-1.2 , DoHTMLSprite и SpriteGenerator 0.2 . Если первая из них кое-где упоминается на русскоязычных ресурсах, то упоминаний о второй и третьей я в Рунете не видел. Почти все генераторы CSS спрайтов, как правило, являются онлайновыми ресурсами (следуя модной ныне тенденции). Причем русскоязычных из них не более двух-трех. Мне нравятся программы и онлайн-сервисы, в которых я могу разобраться, если не с ходу, то с нескольких попыток. Из генераторов спрайтов, перелопаченных мной, больше всех понравился упомянутый уже . За простоту, удобство, возможность настроек, эффективность и предсказуемость. Остальные генераторы (в основном онлайновые) не соответствовали этим критериям (может руки не совсем прямые или не оттуда растут, или голова не так повернута). Опытный пользователь (если вдруг забредет сюда) может усмехнуться – чего огород городить, если спрайты можно сделать в графическом редакторе, а координаты посчитать (ну-ну). Конечно можно, но я предпочитаю пользоваться специализированными инструментами, причём мне больше по душе все же десктопные приложения* . Все три описываемые программы тестировались под Windows XP SP3. Возможности их не так обширны, как у Instant Sprite, но весьма достойны внимания.
Примечание от 22.02.14. Все ссылки в этой статье с упоминанием программы Instant Sprite ведут к достаточно подробному анонсу первого перевода этой программы. После написания отдельной статьи об Instant Sprite я решил дать здесь ссылку и на неё. Вот она – .
Ещё одно примечание. Хочу анонсировать недавно написанную статью, которая освещает несколько иной подход к определению координат и размеров css спрайтов для их размещения на веб-страницах. Вот ссылка на эту статью:
Однако, приступим к нашему обзору…

Генератор спрайтов CssSpriter-1.2

Небольшая бесплатная программа (zip-архив 150 кб), не требующая инсталляции. Работа с программой по созданию CSS спрайтов не вызывает затруднений, интерфейс прост и понятен. Кнопки панели инструментов дублируют пункты меню и имеют всплывающие подсказки. На левой панели отображаются исходные изображения с их размерами и координатами в будущем спрайте, правая панель отображает результаты работы программы (одна вкладка это выходной css спрайт, вторая – демо-html).

Добавлять изображения для объединения в спрайт можно из системного диалога по одному или сразу множественным выбором из подготовленной папки с изображениями. Точно также можно добавить изображения и методом перетаскивания. Программа поддерживает входные изображения следующих форматов: ico, gif, png, bmp, jpg . Файлы Фотошопа psd не поддерживаются, другие форматы не пробовал – этих хватает с избытком. Не рекомендую использовать последние два формата bmp и jpg . Они не поддерживают прозрачность, что хорошо видно в списке миниатюр на левой панели и в результирующем изображении на правой панели (картинки этих форматов будут иметь в спрайте черный фон или поля, как говорят некоторые пользователи). Чтобы применить такие спрайты на веб-страницах, надо будет уменьшить глубину цвета и вновь установить прозрачность, что не всегда получается корректно. Выходной формат один – png 32бит . Для нормального отображения картинки в старых версиях Internet Explorer, желательно перевести изображение в 8-битовый формат png и снова установить прозрачность. На второй вкладке правой панели можно посмотреть HTML-разметку с вложенными стилями CSS для применения спрайтов.

Нажатием на левую кнопку панели инструментов наш проект экспортируется в HTML. В папке, указанной для сохранения результата появятся три файла:

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

Результаты, которые нам выдала программа, являются основой для применения спрайтов на своей странице. Конечно, надо увязать уже имеющиеся стили со стилями спрайтов, можно использовать идентификаторы вместо классов, можно оптимизировать сами стили спрайтов, применить нужную вам разметку, вынести стили во внешний файл и т.д. – все будет зависеть от страницы, где вы будете использовать спрайты, а также от ваших предпочтений и навыков.
Однако, не все так хорошо. Программа, на мой взгляд, имеет один серьёзный недостаток. В ней нет возможности задать промежутки (смещения, отступы) между изображениями в спрайте, поэтому при просмотре страницы с увеличенным или уменьшенным масштабом, что иногда случается, могут возникнуть всякие накладки. Второй, но меньший недостаток состоит в невозможности сортировки изображений в программе, поэтому загружать изображения в программу нужно в том порядке, какой вам необходим (на самом деле это вопрос только собственных предпочтений, в конечном счете, использование нужной картинки определяется заданием ее координат).

Генератор спрайтов DoHTMLSprite

Трудно понять, кто автор этой программы, но практически все забугорные софт-архивы в качестве первоисточника приводят ссылку на http://www.downloadinn.com/dohtmlsprite.html. Это тоже файловый архив, где можно найти автора публикации – Stefan Grasutu. Щелчок по этой ссылке приводит на сайт некоего Alexandru Tertisco – http://www. teral-soft.com. Следов этой программы на сайте я не нашел, поэтому скачать программу можно по первой упомянутой ссылке.
Крошечная бесплатная программа (zip-архив 13 кб) имеет сверхаскетичный интерфейс, но дело свое туго знает. Так же не требует инсталляции.

Алгоритм работы таков:

• Указываем папку с исходным файлами (папку надо создать заранее и разместить в ней нужные файлы)
• Задаем папку назначения для сохранения результатов
• Создаем спрайт

Попробуем сделать css спрайт из тех же картинок, которые использовались в обзоре первой программы: 2 файла gif и по одному ico, bmp, jpg, png и psd . Первая программа позволила загрузить все файлы, кроме psd , то есть загрузила 6 файлов из 7. Посмотрим, как поведёт себя DoHTMLSprite.

Программа обнаружила 5 файлов из 7 против 6, обнаруженных CssSpriter-1.2. Какие пока неизвестно.
Задаём папку вывода и нажимаем кнопку Создать спрайт . Программа бодро рапортует о создании спрайта, css-файла и демонстрационного файла HTML.

Посмотрим на содержимое папки вывода. В самом деле, там находятся все упомянутые файлы с какими-то неудобопроизносимыми именами.

Рассмотрим их, начиная со спрайта. Как видим файл спрайта создан в формате png , дополнительно скажу о глубине цвета – те же самые 32 бит, как и в первой программе. Значит, все замечания о прозрачности для старых браузеров тоже актуальны.
Глядя на вертикальную картинку (а изменить её ориентацию нельзя, что, однако, не является существенным недостатком программы), отмечаем, что эта программа не поддерживает форматы ico и psd в качестве входных. Пользователи устаревших браузеров также увидят сероватый фон на спрайте, помимо чёрного фона на картинках, для которых использовались входные файлы bmp и jpg , изначально не поддерживающие прозрачность. При внимательном рассмотрении можно увидеть, что в спрайте есть промежутки (отступы, смещения) между картинками, то есть основного недостатка предыдущей программы здесь нет. Если посмотреть на координаты картинок чуть ниже (в стилевом файле), можно увидеть, что этот промежуток составляет 5px.

Как видно здесь используются не вложенные стили, а созданный внешний стилевой файл, ссылка на который и присутствует в коде.

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

Последний файл, созданный программой, это внешний стилевой файл.

Здесь можно увидеть координаты всех наших картинок в спрайте. При внимательном просмотре координат видно, что они учитывают жёстко заданные программой промежутки между изображениями в спрайте в 5px (размеры картинок 32х32px, а разница координат 37px, 37-32=5). Для демонстрационной страницы автор задал в стилях внешние поля сверху и снизу тоже 5px (могло быть задано и другое значение), используя сокращённое свойство margin . При сравнении демонстрационных HTML-страниц, созданных первой и второй программой, видно, как влияют используемые стили на расположение картинок на странице. Некоторые пользователи используют margin «ы как дополнительное средство во избежание неожиданных накладок при масштабировании страницы при просмотре. Наверное, это будет полезным при создании и оптимизации стилей для спрайта, созданного первой программой, где промежутков между изображениями в спрайте вообще не предусмотрено. Создавая и оптимизируя стили для своих спрайтов, вы сами решите какие свойства нужны вам и как их использовать.

Хочется отметить, что программа изначально генерирует компактный однострочный стиль и после нулевой координаты не ставит единицу измерения (px), ноль он и Африке ноль, хоть в пикселях, хоть в килограммах. Такой предусмотрительности нет у некоторых онлайн-сервисов по созданию CSS-спрайтов.

Выводы

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

• Не пытайтесь создать только один спрайт на все случаи и запихнуть в него все картинки, используемые на ваших страницах, это в будущем усложнит корректировку HTML и CSS при необходимости
• Создавайте спрайты для часто повторяющихся графических элементов типа логотипов, значков, кнопок и других элементов навигации и управления
• Старайтесь создавать спрайты из картинок одного размера (лучше сделать не один спрайт из разнокалиберных изображений, а несколько спрайтов, но каждый из картинок одного размера), это поможет оптимизировать используемые стили (один пример я покажу ниже)
• Не используйте для создания спрайтов картинки в форматах изначально не поддерживающих прозрачность (правильнее и лучше всего использовать входные изображения в форматах gif и png , а для первой программы и упоминавшегося Instant Sprite можно также использовать ico )
• Для поддержки прозрачности выходных файлов PNG в старых браузерах конвертируйте их в 8-битовый формат или в формат GIF (существуют и css-хаки, позволяющие разрешить эту проблему для png, но это не тема сегодняшнего обзора)
• Оптимизируйте стили (можно использовать онлайн-сервисы, программы , TopStyle, Rapid CSS и т. п. или править вручную)
• Оптимизируйте спрайты – очень удобно и эффективно для этого использовать онлайновый сервис TinyPNG (http://tinypng.org) или программу Riot , рассмотренную в (очень её рекомендую)
• Используйте спрайты для простого и элегантного способа реализации rollover-эффекта изображений на ваших страницах без использования скриптов
• И в дальний путь…, флаг вам в руки…, вперёд и с песней…

P.S. Об упомянутой оптимизации стилей

Рассмотрю только один пример возможной оптимизации при использовании изображений одного и того же размера. Создадим экспериментальный спрайт из картинок одного размера с помощью DoHTMLSprite и посмотрим созданные стили.

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

Размер файла уменьшился с 1403 байт до 749 байт (почти в 2 раза), и все прекрасно работает. Если вы внимательно посмотрели на эти два скриншота, то, наверное, увидели, что я дополнительно убрал лишние пробелы и необязательные точки с запятой перед закрывающей фигурной скобкой. Для визуального сравнения я также оптимизировал стиль для уже рассмотренного первоначального спрайта. Вот, что получилось при просмотре в браузере.

Если вы сравните скриншоты, то заметите разницу. Исчезли промежутки между картинками на странице, определяемые свойством {margin: 5px 0} . Я посчитал, что они мне не нужны (спрайты будут размещаться в разных местах страницы, а не подряд, как в демо-примере). При этом промежутки на самом спрайте-изображении, созданные программой никуда не исчезли, и будут служить нам подстраховкой при возможном пользовательском масштабировании страницы при просмотре в браузере.

Наконец, последнее

Среди широко разрекламированных сервисов для создания CSS-спрайтов особенно выделяется Sprite Me . Он автоматом находит картинки, которые можно объединить в спрайты, и выдает на-гора рекомендации по реорганизации стилевых файлов и HTML-разметки. Попробуйте. Когда-то я начинал с него, и сервис помог мне вникнуть в суть применения спрайтов. Но, к сожалению, он обнаружил на моих страницах лишь 20% картинок, из которых можно создать спрайты. Поэтому я и перешёл к неоднократно упоминавшемуся , чего и вам желаю. Из множества изображений, размещённых на моих страницах, все фоновые картинки это спрайты. Кроме того кнопки управления (типа, загрузить файл, прокрутить страницу вверх, просмотреть скриншот или видеоролик) сделаны из спрайтов с применением rollover-эффекта на CSS.
Всё!

Как-то не получается закончить обзор. Только опубликовал его и через день нашёл ещё один генератор css спрайтов.

Генератор спрайтов SpriteGenerator 0.2.

Тоже не онлайновый, а Win-приложение. Небольшая программа, вроде с открытым исходным кодом, распространяется по некоей Microsoft Public License. Программа имеет достаточно простой и внятный интерфейс.

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

Программа создала два файла: стилевой файл и спрайт в формате PNG 32бит (их имена я указал при задании папки вывода). Демо-страницу эта программа не создала. Посмотрим на спрайт.

Что сразу бросается в глаза: картинок осталось только 4 из 7. Оказывается, программа не воспринимает файлы bmp , на картинке с входным форматом jpg также виден кусочек чёрного фона, и пользователи старых браузеров также увидят сероватый фон у других картинок. Я снова не оптимизировал спрайт и не устанавливал прозрачность. Второе, что можно отметить: промежутки имеются вокруг каждой картинки – этого можно было ожидать, поскольку программа поддерживает прямоугольную компоновку. Но промежутки между картинками и внешней границей явно больше промежутков между самими картинками. Все становится ясно, когда мы взглянем на стилевой файл.

Первое, что здесь можно отметить: программа сохранила имена входных картинок, вместо задания безликих имён в выше рассмотренных программах. Второе, отступов, которые мы задавали, как я считал свойством margin , в стилевом файле нет. Оказывается, что обе опции задания промежутков в программе связаны с самой картинкой: одна (distance between images) задаёт промежутки между самими картинками, вторая (margin width) – между картинками, из которых состоит спрайт и его внешней границей. Если взглянуть на свойства background-position в стилевом файле можно увидеть, что оно учитывает оба упомянутых вида промежутков. Создадим сами демонстрационную веб-страницу, включив для наглядности разные отступы в стилевой файл (речь идет именно об отступах в стилевом файле для наглядности позиционирования картинок на странице).

Я намеренно сделал скриншот при просмотре в IE6, чтобы вы увидели непрозрачный фон у картинок. Как его избежать для старых браузеров, я уже говорил. В современных браузерах все выглядит нормально, кроме входной картинки формата jpg , который изначально не поддерживает прозрачность, здесь фон чёрного цвета.
Заинтересованным привожу скриншоты HTML- и CSS-файлов для последнего примера.

Заключение

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

Русифицировать перечисленные в обзоре программы я не стал, они достаточно просты и понятны без перевода. Буду рад, если этот обзор кому-то пригодится. (UPD – Я все таки перевёл попозже самую маленькую и простую, но не менее функциональную программу – DoHTMLSprite. Анонс её русификатора можно найти на странице новостей .)

После опубликования этого обзора я нашел в Интернете ещё несколько программ (не сервисов) для создания css спрайтов. Но все эти программы уступают программам, описанным здесь. Либо по фукциональности, либо по стабильности работы или по другим свойствам. Поэтому дополнять этот обзор я не буду. Рассмотренные в обзоре программы прекрасно справляются со своими обязанностями. Можно рекомендовать любую из них для создания css-спрайтов.

Сейчас, наверное, всё!

Спасибо за то, что вы это всё прочитали.

*) Ранее я несколько скептически относился к созданию CSS-спрайтов при помощи графических редакторов. Но связка бесплатного редактора Gimp с плагинами CSS WebSprites и Save for Web заставила изменить мое мнение. Простота, интуитивная понятность и дополнительные возможности по созданию CSS спрайтов и оптимизации как стилей, так и изображений, подвигли меня на написание ещё одной статьи по этой тематике. Если есть желание, можете ознакомиться с ней на странице .
Рекомендую также ознакомиться с несколько другим подходом к css спрайтам и определению их координат и размеров в статье .

Одной из ключевых задач CSS спрайтов является оптимизация графики загружаемой страницы. Какова задача этой оптимизации и зачем ее необходимо выполнять? Идея заключается в следующем: пока страница не оптимизирована, графические элементы представляют собой отдельные файлы. Количество подобных элементов превышает 5 или 10 штук, следовательно, для того, чтобы загрузить каждую картинку, браузер осуществляет отдельный запрос.

Логично предположить, что ускорить процесс можно за счет объединения графических элементов. Отображение частей настраивается через CSS. После этого браузер будет выполнять только один запрос, чтобы загрузить изображения. Благодаря этому страница будет загружаться в разы быстрее . Вот и весь принцип оптимизации.

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

Итак, рассмотрим основные примеры CSS спрайтов:

У нас есть перечень иконок в одном файле. Задача: вывести некоторые картинки в рандомной последовательности.

Картинка (css-sprite-01.png ) ниже — спрайт.

После применения списка стилей иконки остаются выведенными в произвольном порядке.

Давайте более детально разберемся с этим примером. Разрешение первоначальной изображения-спрайта: 200 * 200 px . Главная картинка разделена на 4 куска, каждый из которых имеет разрешение 100*100 px . Нам необходимо создать в документе список с идентификатором css-sprite-ul . Пункты списка пронумеруем как 001, 002, 003 и т.д.

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

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

Пример 2. Изображение меняется при наведении.

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

Как выглядит спрайт:

html-код:

Спрайты — это довольно интересная и простая технология. Сейчас я расскажу о ней немного подробнее.

Что такое CSS спрайты?

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

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

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

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

Терминология

Чтобы не путаться давайте сразу обозначим термины:
Спрайт — это одна картинка из файла с несколькими изображениями.
Набор спрайтов — это сам файл с несколькими изображениями.

Особенности использования спрайтов

Когда стоит использовать спрайты? Ответ в общем то один — спрайты нужно использовать если у вас на странице много мелких изображений. Неважно какие это изображения. Если у вас много градиентов с одинаковым расположением, много кнопок, много иконок и.д. Если на какой то отдельной странице много мелких изображений, то можно подумать над использованием спрайтов.

На странице как правило бывают три вида картинок — jpg, png и gif. У всех этих форматов есть два режима загрузки — это обычный режим и режим постепенной загрузки.

Формат jpg может быть обычным (базовым) и прогрессивным (progressive). В обычном режиме картинка начинает отображаться по строкам по мере загрузки и сразу в хорошем качестве. В прогрессивном режиме картинка jpg загружается сразу целиком, но в плохом качестве и по мере загрузки качество увеличивается.

Такое же поведение есть у gif и png. GIF может быть обычным и черезстрочным (interlaced). PNG может быть обычным и черезстрочным (interlaced). Поведение черезстрочных gif и png аналогично поведению прогрессивного jpg. Такое поведение немного увеличивает размер файла.

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

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

Большими мне кажутся файлы свыше 30 килобайт. Это субъективно. У вас могут быть какие то свои представления о величине файла. Файл размером 30 килобайт будет загружаться около 7 секунд при скорости интернета 56,6 кбит/с.

Примеры использования спрайтов

Спрайты с иконками

В одном спрайте у меня будут иконки для:

1. Списка — одна иконка
2. Ссылок — три иконки
3. Формы поиска — одна иконка

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

В итоге первый пример будет выглядеть так:

Я нашел пять иконок. После чего просто объединил их все в одном файле. Вот такой вот файл у меня получился в итоге:

Обращаю ваше внимание. В данном случае иконки расположены не вплотную, между ними есть небольшие отступы. Как подобрать эти отступы? Можно конечно рассчитать все по пикселям, но наш случай довольно простой, поэтому здесь лучше всего подобрать эти отступы на картинке экспериментальным путем. Сначала объединяем изображения просто на глаз, потом берем самую верхнюю картинку, ставим ее на нужное место. Если картинка находится на своем месте, но при этом откуда то торчит кусок другого изображения, то значит отступ нужно увеличить.

Еще один момент. Последней в списке идет иконка для списка — зеленая стрелка. Почему она именно последняя? Расположение остальных иконок на картинке нам безразлично, но в списке любой пункт может занимать несколько строк и если зеленая стрелка будет где-то посередине, то на следующих строках будут торчать другие картинки. Посмотрите на картинку списка выше, чтобы понять о чем я говорю.

И так. Я нашел пять иконок, объединил их в один файл. Что делаем дальше? Разумеется пишем код:

• Пункт списка
• Еще один пункт списка
• Пункт списка
• Еще один пункт списка,
  но в две строки
• Пункт списка
• Еще один пункт списка

Это html код списка. Теперь применим к нему наш спрайт:

Ul li{ padding:0 0 0 21px; background:url(«sprites.png») 0 -94px no-repeat; }

Что мы тут сделали? Сделали отступ в каждом

от левого края в 21 пиксель, чтобы текст не заслонял картинку. Потом в качестве фоновой картинки ставим sprites.png. Высота всей картинки со спрайтами в данном случае 110 пикселей и зеленая стрелка находится в самом конце. Высота зеленой стрелки 16 пикселей, то есть стрелка начинается после 94-го пикселя от верха картинки. Это означает что фон мы должны сдвинуть на 94 пикселя вверх. В css коде это написано так «0 -94px», то есть сдвинули на 0 пикселей вправо и 94px пикселя вверх.

Закончим со списком. Теперь сделаем примерно так же ссылки:

A{ padding:0 0 0 20px; background:url(«sprites.png») 0 -42px no-repeat; } a{ padding:0 0 0 20px; background:url(«sprites..png») 0 -21px no-repeat; }

Что означают селекторы a? Очевидно данный селектор заставляет браузер применить данный стиль ко всем ссылкам, у которых есть атрибут href, значение которого начинается со строки http://сайт/. Сам спрайт применяется примерно так же, как и в случае со списком. Я рассмотрю только одну ссылку — ссылку на мой блог.

1. Определяем нужную ссылку по href.. Можно просто присвоить класс нужной ссылке или прописать стили в аттрибут style прямо в html коде. Или идентифицировать нужную ссылку любым другим методом.
2. Делаем отсуп от левого края у конкретной ссылки в 20 пикселей
3. Указываем в качестве фонового изображения картинку sprites.png
4. Картинка которую я подобрал для своего блога находится на расстоянии 21 пиксель от верхнего края, это означает, что фон мы должны сдвинуть на 21 пиксель вниз. В css я это прописал так «0 -21px»

Домашнее задание

Спрайты с градиентами

Теперь посмотрим второй пример.

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

Я покажу как граденты в этом окошке можно сделать спрайтами. Заголовок и подвал окна будут фиксированной высоты — 30 пикселей. Тело окна будет тянуться в зависимости от длины текста.

Теперь напишем html код окошка:

Начинаем применять спрайты. Начнем с заголовка окна:

#window-header{ height:30px; background:#C0C0FF url(«gradients. png») 0 0 repeat-x; }

В файле gradients.png сначала идет градент для заголовка, потом для тела и потом для нижней строки. То есть градент для заголовка начинается от самого верха. Поэтому мы просто ставим в качестве фона сам файл и позицию указываем как «0 0», то есть никуда не отступать. Чтобы градиент растянулся по горизонтали прописываем «repeat-x».

Чтобы градент целиком влез в зголовок, указываем высоту в 30 пикселей.

Точно так же как и заголовок поставим градиент для подвала:

#window-footer{ height:30px; background: #C0FFC0 url(«gradients.png») 0 -60px repeat-x; }

Только на этот раз мы сдвинем картинку вниз на 60 пикселей.

С телом окошка ситуация сложнее. Тело у нас будет растягиваться, в отличии от заголовка и подвала. То есть если мы просто сделаем один div для тела окна и поставим туда градент, то в этом диве появятся сразу все градиенты. Как вариант можно поставить градиент для тела последним по вертикали, но что если у нас несколько градиентов для блоков, которые тянутся? Все сразу не сделаешь последними. Мы сделаем чуть хитрее.

CSS код будет следующий:

#window-body{ position:relative; } #window-body-gradient{ position:absolute; left:0; top:0; width:100%; height:30px; background:url(«gradients.png») 0 -30px repeat-x; } #window-body-text{ position:relative; }

Теперь расскажу подробнее что мы тут сделали. Вот html код тела окна отдельно:

Как видите в тело у нас вложено еще два дива. Первый «window-body-gradient» будет отвечать за градиент. Второй «window-body-text» нужен для текста. Кроме того, как это понятно из CSS кода мы применили position:relative; для всего тела окна целиком.

Для градиентного дива мы указываем position:absolute. Таким образом мы выбили градиентный див из общего потока. Теперь этот див ни на что не влияет. Так как для всего тела целиком у нас указано position:relative, то градиентный див никуда дальше родителя не уплывает. Прикрепляем его к левому и верхнему краю тела окна с помощью «left:0; top:0;». Указываем высоту градиентного дива — 30 пикселей. То есть тут указываем высоту градиента который мы будем прикреплять, если высота дива будет больше высоты градиента, то в диве будут торчать другие спрайты. И наконец прикрепляем к градиентному диву наш файл gradients.png. Как обычно сдвигаем фон вверх на нужное расстояние, в данном случае сдвигаем фон на 30 пикселей вверх.

Теперь в теле окна у нас есть градиент. Но он заслоняет текст. Чтобы текст не заcлонялся обернем весь текст в див и присвоим ему position:relative. После присвоения текст будет поверх градиента.

Вот в общем то и все. Теперь мы расставили все градиенты в наше окошко. И в заголовок, и в тело, и в подвал.

Такие длинные пояснения я делаю, чтобы совсем все было понятно. Но на самом деле если вы немного разбираетесь в верстке, то вам наверное будет достаточно посмотреть сами примеры:

В очередной раз продублировал ссылку.

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

Доброго времени суток, сегодня хочу рассказать вам о том, как сделать 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 спрайты для своих сайтов. Завтра я постараюсь проанализировать на сколько быстрее грузится сайт при использовании этой технологии.

Слово спрайт (англ. sprite — фея, призрак) впервые было использовано мультипликаторами Диснея в несколько ином качестве, мультипликаторы для более быстрого и удобного создания и «оживления» мульт героев сначала рисовали все фазы их движения на прозрачных плёнках, а затем накладывали эти плёнки на основной фон — сцену, и получали кадры мультика, тем самым экономя время, деньги и нервы художников. . эти самые плёнки они и называли спрайтами.

Потом термин спрайт внедрился в компьютерную графику и особо широкое распространение получил в компьютерных играх — но это тоже не совсем то о чем я хочу Вам поведать.. Сегодня я хочу Вам рассказать о так называемых CSS-спрайтах..

Итак, под спрайтами в CSS принято называть одно изображение, которое состоит из нескольких «частей», которые показываются как бы по отдельности в зависимости от действий пользователя..

Что слишком много слов.. покажу пример..

Это спрайт который присутствует на каждой странице данного сайта:

Просто в «спокойном» состоянии Вам показывается одна его часть, а при наведении курсора другая.

Как это сделать? На самом деле все достаточно просто.

В данном примере для блока с фиксированными размерами мы в качестве фона загружаем «двойное» изображение, но так как сам блок из за присвоенных ему размеров ровно в два раза меньше по высоте чем картинка, то браузер показывает лишь первую «часть» фонового изображения, а при наведении курсора срабатывает псевдокласс :hover с свойством background-position которое сдвигает фон вверх, на нужное расстояние, тем самым показывая вторую часть картинки.

Ладно, оставим мой логотип в покое, тем более что я Вам немного слукавил.. сделаем, что-то более полезное для Вас, например вот такую кнопку:

Открываем значит фотошоп и рисуем в нём примерно такой рисунок:

Здесь главное не ошибиться с размерами! вторая часть изображения, где наша кнопка активна, должна быть точно таких же размеров, как и первая часть рисунка, иначе потом, при наведении курсора, все будет «скакать». Лучше всего сначала нарисовать одну часть картинки, потом скопировать её, прогнать через фильтры, что то дорисовать и склеить два изображения в одно.. впрочем, уроки фотошопа не моя стихия..

Итак, у нас получилась «двойная» картинка 175 на 80 пикселей, запомним эти размеры и начнём писать код.

Он у меня получился таким.. смотрим результат и читаем комментарии в коде:

CSS спрайты

---

Кнопка 1
Кнопка 2
Кнопка 3
Кнопка 4

Думаю, многие читатели задаются вопросом: «А зачем вообще нужны эти спрайты если тоже самое можно сделать с помощью двух отдельных картинок, где одна фон для просто ссылки, а вторая для ссылки с :hover , при этом, не сражаясь с фотошопом и не высчитывая координаты фона для CSS??»

Во-первых: Скорость загрузки изображений увеличивается в разы!! Несмотря на то что «двойная» картинка весит столько же, сколько и две отдельно взятых маленьких «одинарных», загрузка одной большой картинки происходит быстрее, так как браузером не создаются дополнительные HTTP запросы серверу.

Помните, когда я Вам показывал свой логотип-спрайт, говорил что слукавил? Так вот моё лукавство заключается в том, что данная картинка содержит в себе не две логических части изображения, а восемнадцать!!

И полностью она выглядит так:

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

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

Браузер : Здравствуй Сервер! я тут от тебя же, по моему запросу, получаю HTML и CSS документы, так вот в них указано, что у тебя в папке «графика».. должна лежать картинка с названием: «картинка1» скинь а?
Сервер : Привет Браузер, давненько не виделись, сейчас посмотрю.. ага есть у меня такая картинка! Лови!!
Браузер : Спасибо, поймал! Но мне еще нужна «картинка2» в той же папке. .
Сервер : Да и такая есть.. отправляю..
Браузер : Загрузил.. но тут еще «картинка3» указана.
Сервер : И не спится же тебе! Держи свою картинку!!
Браузер : Спасибо! Да мне уже саму если честно надоело, но мой пользователь хочет догрузить страницу полностью.. короче у тебя там еще «картинка4» должна быть..
Сервер : Ты меня начинаешь напрягать! На свою картинку!!
Браузер : Извини, но я же не виноват, что здесь столько изображений!!! Нужна «картинка5»!
Сервер : У меня от тебя уже процессор кипит!! Заколебал!! Забирай свою картинку!!
… … …

Дальнейший диалог озвучивать не буду, ибо дальше идет нецензурная брань..

К чему вся эта болтовня между сервером и браузером (клиентом) на которую уходит уйма времени и трафика, к тому же нагружает сервер при большом количестве посетителей сайта, если гораздо быстрее и экономичнее сделать один HTTP запрос и получить все 18 картинок в одном пакете!!

Во-вторых: Загрузка второго изображения при использовании псевдокласса :hover происходит лишь только в тот момент когда пользователь навел курсор на ссылку с первым изображением. Если это небольшое изображение типа кнопки из примера выше, то ничего особо страшного не произойдёт — вторая картинка быстро подгрузится и пользователь ничего не заметит.. а если это большая картинка по весу и размеру?? Тогда пользователь будет наблюдать, как она загружается, хотя он психологически был готов к быстрой смене изображений! Еще один плюс спрайтам! … хотя, если честно, одновременно это и минус.. минус в том случае если пользователь в течении сессии так и не навел курсор.. картинка загрузилась, но так ему и не пригодилась.. но поверьте эта «жертва трафика» оправдывает себя практически всегда!

Ну и в-третьих: Как бы Вам это не показалось странным, но это удобно!! Удобно в коде указывать путь к одному и тому же изображению, удобно его править в фотошопе, к примеру, сделать весь сайт поярче или потемнее работая с одним единственном рисунком, удобно хранить, удобно загружать на сервер, да даже в CSS работать с большим спрайтом удобно! — хотя для этого и нужны определённые навыки и привычка. .

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

CSS спрайты для увеличения скорости загрузки сайта

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

Буквально на днях я вновь вернулся к этой теме и, наконец-то, добился желаемого результата. Начну с рассказа о том, что такое CSS спрайты, каково их предназначение и самое главное — как самостоятельно создать спрайт.

Для подробного описания последовательности создания спрайта я приведу наглядный пример. Таким образом мне удастся разложить по полочкам все действия, чтобы воочию посмотреть на результат. В случае чего — спрашивайте, с удовольствием отвечу. Итак, поехали!

Что такое CSS спрайты, их польза и предназначение на сайте

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

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

CSS Sprite — это способ уменьшить количество изображений путём объединения нескольких изображений в одно. Затем используетcя CSS-свойство позиционирования background-position для отображения только той части изображения, которая вам нужна.

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

Для ручного объединения элементов в один файл потребуется графический редактор и немного времени. Затем необходимо определить относительные координаты каждого элемента в спрайте и написать свойства позиционирования для файла стилей. Я предлагаю облегчить задачу благодаря онлайн инструменту.

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. На основе примера я получил следующий код:

.bg-RSS {
	width: 85px; height: 50px;
	background: url('css_sprites.png') -10px -10px;
}
 
.bg-Twitter {
	width: 85px; height: 50px;
	background: url('css_sprites.png') -115px -10px;
}
 
.bg-Mail {
	width: 85px; height: 50px;
	background: url('css_sprites.png') -220px -10px;
}

Дело остаётся за малым — нажатием кнопки Download скачать готовый файл спрайта с именем css_sprites.png и загрузить на свой сервер. Вы можете переименовать файл, главное в будущем не забудьте сделать тоже самое в файле стилей, а также отредактировать путь к файлу.

В конечном итоге результатом работы онлайн генератора стало такое изображение, в котором собраны воедино все три иконки:

В принципе, на этом создание спрайта завершено. На выходе мы получили файл изображения и готовые стили. А что делать дальше? За основу примера я выбрал иконки, которые являются ссылками на внешние сайты, поэтому каждой ссылке необходимо присвоить свой класс для тега <a> , например: <a href="..."></a>

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

Представьте ситуацию, в которой необходимо заменить одно изображение на другое — придётся менять стили всех элементов, так как изменятся координаты. Избежать подобных проблем позволит создание нескольких спрайтов, объединяющих группы элементов (иконки меню, иконки навигации и т.д.). А вы используете спрайты?

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

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

Вы уже используете 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; /*начальная позиция блока*/ }

   .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 спрайтов будет интересна ещё кому то 🙂

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

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

SVG спрайты

В целях оптимизации и удобства при многократном использовании SVG изображений можно объединить в один файл-спрайт. Как это сделать? Для примера возьмем несколько изображений:

<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
	<g><path d="M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Zm0,26A12,12,0,1,1,28,16,12,12,0,0,1,16,28Z"/><path d="M17,7h25v8.52a2,2,0,0,0,.75,1.56l4.63,3.7,1.24-1.56L17,15.52Z"/></g>
</svg>

<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
	<g><polygon points="28.71 4.71 27.29 3.29 16 14.59 4.71 3.29 3.29 4.71 14.59 16 3.29 27.29 4.71 28.71 16 17.41 27.29 28.71 28.71 27.29 17.41 16 28.71 4.71"/></g>
</svg>

<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
	<g><path d="M16,2,3,6.28V12C3,26.61,15.63,29.94,15.76,30L16,30l.24-.06c.13,0,12.76-3.36,12.76-18V6.28ZM27,12c0,12.1-9.31,15.45-11,16C14.31,27.45,5,24.1,5,12V7.72L16,4.05,27,7.72Z"/><path d="M11.59,15l-1.42,1.41,2.29,2.29a2,2,0,0,0,1.42.59,2,2,0,0,0,1.41-.59l6.54-6.53-1.42-1.42-6.53,6.54Z"/></g>
</svg>

У SVG есть несколько элементов-контейнеров – <g>, <defs> и <symbol>, лучшим для спрайтов является <symbol> т.к. он поддерживает все атрибуты как у <svg>.

Итак, нужно создать файл icons.svg, в нём будет общий контейнер <svg>...</svg>, далее в него помещаются изображения, с заменой <svg> на <symbol> оставляя все другие параметры и добавляется атрибут id для дальнейшего вывода.

<svg>
	<symbol viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
		<g><path d="M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Zm0,26A12,12,0,1,1,28,16,12,12,0,0,1,16,28Z"/><path d="M17,7h25v8.52a2,2,0,0,0,.75,1.56l4.63,3.7,1.24-1.56L17,15.52Z"/></g>
	</symbol>
	<symbol viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
		<g><polygon points="28.71 4.71 27.29 3.29 16 14.59 4.71 3.29 3.29 4.71 14.59 16 3.29 27.29 4.71 28.71 16 17.41 27.29 28.71 28.71 27.29 17.41 16 28.71 4.71"/></g>
	</symbol>
	<symbol viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
		<g><path d="M16,2,3,6.28V12C3,26.61,15.63,29.94,15.76,30L16,30l.24-.06c.13,0,12.76-3.36,12.76-18V6.28ZM27,12c0,12.1-9.31,15.45-11,16C14.31,27.45,5,24.1,5,12V7.72L16,4.05,27,7.72Z"/><path d="M11.59,15l-1.42,1.41,2.29,2.29a2,2,0,0,0,1.42.59,2,2,0,0,0,1.41-.59l6.54-6.53-1.42-1.42-6.53,6.54Z"/></g>
	</symbol>
</svg>

Вывод осуществляется с помощью элемента <use> с ссылкой на файл спрайта и id изображения.

<svg><use xlink:href="/icons.svg#icon-1"></use></svg>
<svg><use xlink:href="/icons.svg#icon-2"></use></svg>
<svg><use xlink:href="/icons.svg#icon-3"></use></svg>

Результат:

Минусы

• Если открыть файл спрайта в браузере, то изображения выводится не будут.
• В старых браузерах (до IE9) тег <use> не поддерживается. Но для них есть плагин https://github.com/jonathantneal/svg4everybody.

Спрайты и CSS псевдоэлементы – эффективный тандем

Перевод статьи: Sprites and CSS pseudo-elements the perfect pair.
Автор: Rick Harris.

Важность использования спрайтов в веб-разработке вполне очевидна и не нуждается в дополнительном объяснении. И если у вас уже есть опыт применения этой технологии в своих проектах, то вам, вероятно, уже известно, что она имеет и отрицательные моменты. Наиболее универсальным подходом для вставки небольших изображений и иконок (по крайней мере, для их временного отображения) можно назвать метод, который для достижения необходимого эффекта предусматривает использование пустых элементов <span> с последующим применением к ним необходимого CSS кода. Этот способ, конечно же, абсолютно неприемлем с точки зрения семантики и может вызвать трудности связанные с обслуживанием сайта в будущем. Если же вы избрали семантически корректный путь веб-разработки и в процессе реализации спрайтов используете исключительно CSS методы, то перед вами предстанут трудности другого вида – чрезвычайно точное проектирование структуры карты CSS спрайта, исключающее дефекты отображения иконок, связанные с позиционированием. Более того, если в будущем вы пожелаете добавить к уже сформированному спрайту несколько изображений, то вы во всей красе ощутите неудобство этого способа.

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

Пример.

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

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

<a href=»http://facebook.com/my-fb-page»>
Facebook
</a>

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

.fb-link {
padding-left: 20px;
background: (my-sprite-map.png) no-repeat 0 -16px;
}

В этом случае, при определенной степени везения и отсутствии эффекта наложения соседних иконок, входящих в общую карту спрайта, мы получим желаемый результат. Но если, всё-таки, какое-либо соседнее, находящееся рядом с требуемой иконкой Facebook, изображение появится в рамках фона форматируемого элемента, в нашем случае ссылки (), то это приведет к нежелательным последствиям. Есть, конечно же, способ, позволяющий избежать подобных проблем – это упомянутый выше, семантически неправильный, использующий пустой <span> элемент:

<a href=»http://facebook.com/my-fb-page»>
<span></span> Facebook
</a>

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

.fb-link.icon {
display: inline-block;
width: 16px;
height: 16px;
background: (my-sprite-map.png) no-repeat 0 -16px;
}

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

.fb-link:before {
content: » «;
display: inline-block;
width: 16px;
height: 16px;
background: (my-sprite-map.png) no-repeat 0 -16px;
}

Во втором случае мы добавили лишь одну строку content: » «, что является обязательным условием использования псевдо-элементов – без определения свойства content и даже если его значением будет пустая строка, они отображаться не будут. В результате такого форматирования, не нарушая никаких семантических требований, мы получили все преимущества использования пустого <span> элемента с целью безопасного применения CSS спрайтов.

На этой странице можно увидеть результаты применения рассмотренного в статье метода использования CSS спрайтов. Несмотря на простоту примера, подобную технологию можно применять в более сложных случаях визуального оформления страницы. К тому же необходимо знать, что вы можете расширить возможности, определяя для каждого html элемента сразу два псевдо-элемента (:before и :after).

Важное отступление, касательно реализации в IE.

Следует иметь в виду, что псевдо-элементы абсолютно не поддерживаются в IE7 и ниже. Для некоторых разработчиков это является камнем преткновения. Чтобы решить проблему, просто применяйте условные операторы (хаки, комментарии). В большинстве случаев для посетителей, пользующихся ранними версиями IE (седьмая и ниже) всегда можно предоставить несколько упрощенный вариант страницы. Для придания более привлекательного вида такой странице, можно поэкспериментировать со свойством border-radius или другими, поддерживаемыми в IE.

Post Views: 529

Советы по оптимизации веб-сайтов

IT блог — Советы по оптимизации веб-сайтов

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

1. Используем CSS-спрайты

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

На своем сайте я использую спрайты везде, где это возможно. Вы можете посмотреть наглядный пример для темной темы сайта.

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

По умолчанию используется более темный цвет кнопки, когда пользователь наводит курсор кнопка подсвечивается, когда он щелкает по ней — подсвечивается еще сильнее. Соответственно за все три состояния отвечает одна картинка, просто, при каждом действии пользователя меняется ее положение. На CSS подобное поведение реализуется с помощью псевдо-селекторов hover и active:

button {
	background:url(../img/my_image.png) 0 0;
}

button:hover {
	background-position: 0 -67px;
}

button:active {
	background-position: 0 -134px;
}
   

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

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

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

Что касается PageSpeed, то выгода в нем составит от 1 до 10%, в зависимости от количества иконок используемых на сайте.

2. Кэш браузера

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

Кэш браузера представляет собой локальное хранилище файлов, скриптов, изображений, которые браузер загружает с различных сайтов. Для включения кэширования на JavaScript, ASP.NET или PHP существует множество способов, но рекомендую вам использовать специальную настройку для кэширования в конфигурационном файле .htaccess, которая выглядит следующим образом:

<IfModule mod_expires.c>
   ExpiresActive On
   ExpiresDefault "access 2 days"
   ExpiresByType application/javascript "access plus 1 year"
   ExpiresByType text/javascript "access plus 1 year"
   ExpiresByType text/css "access plus 1 year"
   ExpiresByType text/x-javascript "access 1 year"
   ExpiresByType image/gif "access plus 1 year"
   ExpiresByType image/jpeg "access plus 1 year"
   ExpiresByType image/png "access plus 1 year"
   ExpiresByType image/jpg "access plus 1 year" 
   ExpiresByType image/x-icon "access 1 year"
   ExpiresByType application/x-shockwave-flash "access 1 year"
</IfModule>

В данном коде используется модуль mod_rewrite, который устанавливает срок кэширования различного типа содержимого сайта: JavaScript’ов, таблиц стилей CSS, изображений различных форматов и содержимого типа Flash.

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

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

<link rel="stylesheet" type="text/css" href="../css/style.css?v1014"/>
<link rel="stylesheet" type="text/css" href="../css/lmenu_style_net.css?v1013"/>
<link href="../css/code.css" rel="stylesheet" type="text/css" />
<script src="../js/pw_script.js?v1013" type="text/javascript"></script>

Как видите, для таблиц стилей в атрибуте href и для скриптов в атрибуте src в конце через вопросительный знак указан номер версии. Допустим, если вы захотите изменить скрипт pw_script.js, вы можете внести изменения в данный файл и указать другой номер версии. Теперь браузер пользователя снова перекэширует этот скрипт.

На счет PageSpeed — включение кэширования на сайте может увеличить рейтинг от 5 до 30%.

3. Оптимизация изображений

Оптимизацию изображений можно разделить на 2 составляющие: выбор правильного формата изображения и использование сжатия.

Что касается формата изображения, то тут вы должны руководствоваться типом его содержимого. Например, если изображение состоит из штриховых линий или содержит большие области однородной заливки, для него лучше использовать формат GIF или PNG. PNG лучше подходит в тех случаях, когда требуется использовать более одного уровня прозрачности. Фотографии следует всегда сохранять в формате JPEG.

Используя сжатие, можно уменьшить размер изображения одним из способов: уменьшить объем (понизить разрешение) или уменьшить контрастность. Оба эти метода напрямую или почти всегда отрицательно сказываются на качестве изображения, поэтому их следует применять с осторожностью.

Эти два метода уменьшают размер файла изображения по-разному. При понижении разрешения количество пикселов, для которых будет выполнено сжатие, уменьшается логарифмически — иными словами, быстро относительно постепенного уменьшения размеров изображения. Слегка или умеренно уменьшить контрастность — тоже эффективный способ, так как он увеличивает диапазон яркости изображения, что подходит как для форматов сжатия с потерями (JPEG), так и для форматов сжатия без потерь (GIF, PNG).

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

В случае JPEG-изображений показатель качества контролируется явно кодеком JFIF. В случае PNG- и GIF-изображений качество является более субъективным показателем; специалист уменьшает качество таких изображений понижая глубину цвета и индексируя цвета, которые должны сохраниться (при этом могут появиться искажения). В общем случае, самые лучшие настройки для GIF-изображений и низкокачественных PNG-изображений вы найдете в режиме Indexed Color при глубине цвета 2, 16, 64 или 256.

После того как вы выберете глубину цвета для изображения, которому требуется сжатие без потерь, вам необходимо будет выбрать метод дизеринга. При индексировании цветов изображения Photoshop предлагает четыре варианта, которые приведены ниже в соответствии с качеством выходных данных при низкой глубине цвета:

• Pattern

• Diffusion

• Noise

• None

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

В качестве примера приведу вам два изображения JPEG: изображение 1 и изображение 2. Как видите, второе изображение сильно сжато, вплоть до того что видны артефакты на границе окна, но при этом более-менее видно содержимое консоли. При этом первое изображение весит 44 кб, а второе всего 16 кб. Можно выбрать промежуточный вариант и сохранить изображение в PNG без потери качества — изображение 3. Этот вариант весит 26 кб и содержит картинку без артефактов.

4. Сжатие скриптов и стилей

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

В развернутом виде библиотека весит 180 кб, а в сжатом 78 кб, экономия более чем на 100 кб при одинаковой функциональности! Удалять пробелы вручную может показаться крайне утомительным занятием, поэтому я рекомендую использовать для этого специальные онлайн-сервисы (JS Compressor, CSS Compressor). Для приложений ASP.NET можно включить сжатие на программном уровне, как это описано в статье Сжатие кода JavaScript и CSS.

Очевидно, что использовать сжатие подобным образом рекомендуется для больших библиотек (наподобие фреймворков jQuery, Angular, Reactи т.п.) и таблиц стилей. В зависимости от количества скриптов и стилей на сайте, подобная оптимизация может повысить рейтинг PageSpeed до 10%.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Отображение значка из Image Sprite

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

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

 .sprite {
    фон: url ("images / mySprite.png") no-repeat;
}  

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

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

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

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

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

Создание меню навигации с помощью CSS Image Sprite

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

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

Foundation HTML для навигации

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

  

    
  Firefox  
    
  Chrome  
    
  Исследователь  
    
  Opera  
    
  Safari  
  

Применение CSS в навигации

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

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

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

  ul.menu {
    тип-стиль-список: нет;
}
ul.menu li {
    отступ: 5 пикселей;
    размер шрифта: 16 пикселей;
    семейство шрифтов: "Trebuchet MS", Arial, sans-serif;
}  

Шаг 2. Установка общих свойств для каждой ссылки

На этом этапе мы установим все общие свойства CSS, которые будут использоваться всеми ссылками.Например, цвет , фоновое изображение , дисплей , отступ и т. Д.

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

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

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

  ul.menu li.firefox a {
    background-position: 0 0;
}
ул.menu li.chrome a {
    фоновая позиция: 0 -100 пикселей;
}
ul.menu li.ie a {
    background-position: 0 -200 пикселей;
}
ul.menu li.safari a {
    фоновая позиция: 0 -300 пикселей;
}
ul.menu li.opera a {
    фоновая позиция: 0 -400 пикселей;
}  

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

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

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

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

  ul.menu li.firefox a: hover {
    background-position: 0-50 пикселей;
}
ul.menu li.chrome a: hover {
    background-position: 0 - 150 пикселей;
}
ul.menu li.ie a: hover {
    background-position: 0 - 250 пикселей;
}
ul.menu li.safari a: hover {
    background-position: 0 -350px;
}
ul.menu li.opera a: hover {
    background-position: 0 -450px;
}  

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

  




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



    

        
  Firefox  
        
  Chrome  
        
  Исследователь  
        
  Opera  
        
  Safari  
    
 
  

Три способа анимации изображения листа спрайтов с помощью CSS или JS | автор: Sagar Shrestha

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

В этом примере мы будем использовать следующий лист спрайтов:

HTML:

CSS:

 # sprite-image {
 height: 325px; 
 ширина: 184 пикс; 
 фон: url ("...ссылка на изображение выше ... ") 
 0px 0px; 
} 

Приведенный выше код CSS отобразит первое изображение или спрайт из таблицы спрайтов.

Обратите внимание, что высота каждого спрайта составляет 325 пикселей, а ширина составляет 184 пикселя. (Ширина каждого спрайта = общая ширина листа спрайтов / общее количество спрайтов)

JavaScript:

Демо:

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

Давайте используем шагов () , чтобы создать простую анимацию листа спрайтов.

HTML:

CSS:

 # sprite-image {
 height: 325px; 
 ширина: 184 пикс; 
 background: url ("... ссылка на изображение выше ...") 
 0px 0px; 
 анимация: воспроизведение шагов 0,8 с (8) бесконечно; 
} 
 @keyframes play {
 100% {
 background-position: -1472px; 
} 
} 

Поскольку таблица спрайтов содержит 8 спрайтов изображений, количество шагов будет равно 8.Мы анимируем фоновое положение листа спрайтов. Общая ширина таблицы спрайтов составляет 1472 пикселей, анимация выполняется справа налево.

Демо:

Phaser — это быстрая, бесплатная и увлекательная игровая среда HTML5 с открытым исходным кодом, которая предлагает рендеринг WebGL и Canvas в настольных и мобильных веб-браузерах. Игры можно скомпилировать для iOS, Android и собственных приложений с помощью сторонних инструментов. Вы можете использовать JavaScript или TypeScript для разработки. Чтобы узнать больше о Phase framework, вы можете щелкнуть здесь.

Код:

Демо:

Адаптивный CSS Sprite Generator

Около

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

Спрайт CSS — это один файл изображения, содержащий несколько отдельных изображений. Вы можете использовать спрайты, чтобы ваши веб-сайты загружались быстрее, уменьшая количество HTTP-запросов, которые ваши пользователи должны делать. Каждый запрос будет содержать служебные данные HTTP-заголовков (включая файлы cookie) и задержку соединения.Используя один файл изображения вместо нескольких, вы можете значительно сократить время, необходимое для загрузки ваших страниц.

Что означает «Адаптивный»?

Есть несколько определений, но в данном случае мы имеем в виду, что размер изображения можно изменять в соответствии с размером экрана, например, используя max-width: 100%; . Обычно это не работает со спрайтами CSS, но техника на этой странице позволяет это.

Что я получу и как им пользоваться?

Этот инструмент генерирует:

• Файл изображения
• Блок кода CSS
• Тег для каждого изображения

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

Часто задаваемые вопросы

Кто это написал?

Грег, он же Роборг — я профессиональный программист PHP в Just Say Please.
Вы можете подписаться на меня в Twitter

Как мне сообщить об ошибке?

На данный момент только через Twitter.

Как долго вы храните мои исходные изображения и спрайты?

Они не хранятся на сервере.

Могу ли я загружать изображения только для личных целей?

Да.

Есть ли API?

На данный момент нет. Напишите мне в Твиттере, если вам интересно.

Это проект с открытым исходным кодом

На данный момент нет, но если я получу достаточно интереса, я могу очистить код и выпустить его.

Как написан этот сайт?

Генератор спрайтов написан на PHP с использованием функций изображения GD. Прозрачные PNG создаются вручную.

Что это за подозрительно выглядящие «данные:»?

Это прозрачный PNG-файл с кодировкой base-64, размер исходного изображения. Это используется для правильного соотношения сторон.

Последние новости

Май 2014

• Улучшенная обработка ошибок
• Увеличен лимит памяти

январь 2014

• Изобретены отзывчивые спрайты CSS!

Устойчивый веб-дизайн: CSS Sprites

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

Что такое CSS-спрайт?

Заимствованные из старых видеоигр, «спрайты» использовались для увеличения скорости загрузки графики на ваш экран. Идея заключалась в том, что компьютер будет захватывать графику и сохранять его в своей памяти, а затем отображать только части этого изображения по мере необходимости. Сегодня тот же принцип применяется к веб-дизайну.С точки зрения непрофессионала W3schools определяет CSS Sprite как набор изображений, которые помещаются в одно изображение.

Как помогают CSS-спрайты?

В экологичном веб-дизайне скорость вашего сайта и его эффективность и экологичность идут рука об руку. Они связаны из-за количества энергии, необходимой для работы веб-сайта. Чем меньше обрывков приходится выполнять Интернету, чтобы загрузить вашу страницу (в зависимости от количества используемых вами данных, размера ваших файлов и т. Д.)), тем меньше энергии требуется для питания каждой страницы и всего вашего веб-сайта. Таким образом, создание более быстрой страницы загрузки приводит к более устойчивой странице. Что делает CSS-спрайты настолько полезными как для устойчивости, так и для скорости страницы, так это то, что они сокращают количество HTTP-запросов, необходимых для загрузки этой конкретной страницы. Уменьшая количество запросов к серверу, вы экономите пропускную способность и, в конечном итоге, используете меньше энергии.

Например, если вы посмотрите на Apple Sprite выше, вы увидите, что имеется 36 отдельных изображений.Теперь, если вы загрузили все 36 изображений на свой веб-сайт, это будет означать, что для загрузки страницы необходимо 36 различных запросов к серверу. Но если вы объедините их все в одно изображение и вызовете разные части этой графики в определенное время по мере необходимости с помощью CSS, вам нужно будет загрузить только это одно изображение. На странице будет загружено одно изображение большего размера, а не 36 изображений меньшего размера. Однако спрайт меньше по размеру, чем 36 отдельных изображений, сохраненных по отдельности.

Для более глубокого изучения CSS-спрайтов ознакомьтесь со статьей Smashing Magazine, в которой представлены методы, инструменты и руководства, которые вам понадобятся, чтобы узнать, как реализовать их на своем веб-сайте.

Зайдите в Ecograder и посмотрите, насколько экологичен ваш веб-сайт.

CSS Image Sprites Использование и несколько простых трюков

Производительность

Если говорить о преимуществах, то это снижает количество https-запросов к серверу.Если вы разработали изображения индивидуально (одно изображение, один файл), браузер должен отправить несколько запросов для извлечения изображений одно за другим с сервера и его отображения. Поэтому первое преимущество (или преимущество), которое приходит нам в голову, — это производительность .

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

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

Уменьшение количества https-запросов снизит полезное использование полосы пропускания, тем самым заставив пользователей улыбнуться, особенно если они используют соединения 2G или 3G с ограниченным пакетом.

Использование CSS с Image Sprite

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

Говоря о координатах изображения, веб-разработчики сочли этот пост и его код полезными для определения координат x и y изображения. Скрипт написан на jQuery и использует расширение.offset (), который возвращает координаты событий мыши.

После того, как мы получим точные координаты, мы можем использовать CSS для установки фонового изображения, используя значения x и y. Используя свойство фона CSS, мы можем легко настроить изображение для ряда элементов, таких как & ltli>, & ltdiv> или & ltnav>.

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

Вот пример!

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

Разметка и CSS

& lt! DOCTYPE html>
& lthtml>
& lthead>
    & lttitle> Спрайты изображений CSS & lt / title>

    & ltstyle type = "text / css">
        #topmenu {width: auto; font: 15px Verdana;}
        #topmenu ul
        {
            маржа: 0; отступ: 0;
        }
        #topmenu li
        {
            дисплей: встроенный блок;
            ширина: 55 пикселей;
            отступ: 5 пикселей 20 пикселей;
            граница: сплошная 1px #CCC;
        }
        #topmenu # n1
        {
            фон: URL-адрес без повторения ('../../css-tutorials/sprite-image.png ') 70px 3px;
        }
        #topmenu # n2
        {
            background: no-repeat url ('../../ css-tutorials / sprite-image.png') 69px -32px;
        }
        #topmenu # n3
        {
            background: no-repeat url ('../../ css-tutorials / sprite-image.png') 69px -66px;
        }
    & lt / style>
& lt / head>
& ltbody>
    & ltp> Показывать меню с разными изображениями, извлеченными из Image Sprite! & lt / p>
    & ltdiv>
        & ltul>
            & ltli> Nav 1 & lt / li>
            & ltli> Nav 2 & lt / li>
            & ltli> Nav 3 & lt / li>
        & lt / ul>
    & lt / div>
& lt / body>
& lt / html> 

Попробовать

Выход

Если вы веб-разработчик, но не дизайнер, то вы должны спланировать элементы навигатора и, соответственно, попросить вашего дизайнера разработать спрайт с умом. Внимательно посмотрите на изображение, и вы заметите, что расстояние между каждым изображением пропорционально высоте каждого навигатора (меню — & ltli>) на нашей странице.

Спрайт динамического изображения CSS

Используя CSS, мы можем отображать изображения динамически.Когда пользователь наводит указатель мыши на навигатор, он должен заменить существующее изображение другим (черно-белые изображения). Для этого не нужно писать скрипт, но простой CSS-трюк с этим справится.

Добавьте следующие три строки в раздел «Стиль» своей HTML-страницы.

#topmenu # n1: hover {background-position: 70px -97px;}
#topmenu # n2: hover {background-position: 69px -132px;}
#topmenu # n3: hover {background-position: 69px -166px;} 

В начале нашего дизайна мы установили координаты первого навигатора как 70 пикселей и 3 пикселя, которые отображали первый цветной значок.При наведении указателя мыши на навигатор мы изменим положение фона на «70 пикселей и -97 пикселей», расположение аналогичного изображения с черным и белым цветом. Следуйте аналогичным методам позиционирования для двух других навигаторов.

Заключение

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

CSS-спрайты — это обычно большие изображения с хорошей коллекцией маленьких изображений или значков. Никогда не добавляйте в список большие изображения.

← предыдущаяследующая →

Понравилась статья? Подпишитесь сейчас и получайте все последние статьи и советы прямо в свой почтовый ящик.

Как объединить изображения с помощью CSS-спрайтов в WordPress

Хотя название звучит немного странно, объединение изображений с помощью спрайтов CSS — популярный метод повышения производительности, который может ускорить работу вашего сайта WordPress за счет уменьшения количества HTTP-запросов, необходимых для загрузки изображений на ваш сайт.

Используя генератор спрайтов CSS для WordPress, вы можете воспользоваться этим методом оптимизации производительности с минимальными усилиями с вашей стороны. Вам нужно будет работать с CSS и HTML на базовом уровне , но вам не нужно понимать основной код, и мы покажем вам, где именно все разместить.

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

Что значит объединять изображения с помощью CSS-спрайтов?

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

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

Это проблема, потому что при прочих равных меньше HTTP-запросов означает более быструю загрузку сайта.

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

По сути, это означает, что вы объединяете все свои отдельные изображения в один файл изображения. Затем вы используете CSS для управления этим единственным изображением, чтобы оно показывало только определенное изображение, которое вы хотите, в каждом месте. Таким образом, вы по-прежнему можете показывать на своей странице пять отдельных изображений — все они взяты из одного файла изображения.

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

Когда следует объединять изображения с помощью CSS-спрайтов в WordPress?

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

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

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

По этим причинам вы хотите ограничить использование спрайтов CSS до декоративных изображений .

Вот несколько примеров, когда CSS-спрайты имеют смысл:

• Декоративные значки на вашей домашней странице (, если вы уже не используете иконочный шрифт )
• Логотипы / изображения ваших клиентов или людей, которые оставили вам отзывы
• Значки для общего доступа в социальных сетях

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

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

Например, эти изображения на домашней странице AWeber могут быть хорошим кандидатом для CSS-спрайтов, потому что:

• Они не особо важны для целей SEO.
• Потеря возможности добавлять замещающий текст не повлияет отрицательно на доступность страницы.

Как CSS-спрайты работают на высоком уровне

Вот основной двухэтапный процесс объединения изображений с помощью спрайтов CSS:

1. Используйте инструмент генератора спрайтов CSS, чтобы объединить несколько изображений в один файл изображения.
2. Используйте CSS и HTML, которые предоставляет инструмент генератора спрайтов, чтобы отображать только определенную часть всего файла изображения, содержащую изображение, которое вы хотите отобразить.

Допустим, вы хотите отобразить на главной странице два отдельных изображения:

1. Флаг США
2. Французский флаг

Во-первых, вы должны использовать генератор спрайтов CSS, чтобы объединить отдельные изображения каждого флага в одно изображение. Вот как выглядит комбинированное изображение:

. Затем вы должны добавить CSS, который инструмент предоставляет на ваш сайт, а затем отобразить каждое изображение, добавив

   Facebook 
  

  .facebook-icon {
    дисплей: блок;
    ширина: 100 пикселей;
    высота: 100 пикселей;
    фон: url (css-sprite-example.png) без повтора;
    отступ текста: 100%;
    переполнение: скрыто;
    упаковка: без упаковки;
}
  

  .facebook-icon {
    дисплей: блок;
    ширина: 100 пикселей;
    высота: 100 пикселей;
    фон: url (css-sprite-example.png) без повтора;
    отступ текста: 100%;
    переполнение: скрыто;
    упаковка: без упаковки;
}

.facebook-icon: hover {
  фоновая позиция: 0 -100 пикселей;
}