Объединение картинок в СSS спрайты

CSS спрайт – это своего рода графический архив, где в один, не больших размеров файл, собраны различного рода графические элементы дизайна (логотипы, иконки, градиенты…). Вместо кучи мелких файлов получается один, но тут не стоит всё, и вся собирать в одном месте, так как слишком большой файл — это тоже проблема. Лучше сделать 2 – 3 небольших спрайта. Всяко лучше два, три запроса, чем один громоздкий, либо пару десятков мелких. Выглядит спрайт примерно так:

CSS спрайты

На страницу такая графика выводиться не через привычный тег <img>, а через присвоение нужному селектору CSS свойств с координатами необходимого элемента. Так левый верхний угол по оси X и Y будет иметь координаты 0 0. Вычислять координаты удобно при помощи программы Photoshop и активированной координатной сетки.

CSS правила будут примерно такими:

.icon {
background: url(images/sprite.png) 0 -35px repeat-x;
width:32px;
height:32px
}

А в HTML вывод будет осуществлён так:

<span class=»icon»></span>

BASE64 кодирование

Иногда бывает не целесообразно, или не удобно изображение помещать в спрайт, а от лишнего запроса избавиться надо. Тут на помощь может прийти кодирование изображения в строку средствами алгоритма BASE64. Кодированные таким образом изображения можно выводить как через CSS, так и при помощи тега <img>:

<img src=»data:image/png;base64,iVBORw0KGgoAAAANSUhEUgA AAAoAAAAKCAYAAACNMs+9AAAABmJLR0QA/… CYII=»>

Либо так:

.icon{
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAeCAIAA…uQmCC)repeat-x;
width:32px;
height:32px
}

А кодировать можно через онлайн сервис www.base64-image.de, он выдаёт сразу готовые варианты для размещения на сайте:

CSS спрайты

Метод прост в использовании, но не стоит с ним перебарщивать, так как BASE64 хеш строки с кодированными изображениями очень длинные и будут утяжелять размер HTML документа, либо CSS файла. Но как я говорил выше, текстовый контент при помощи Gzip, сжимается намного эффективнее, чем графика.

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

Добавить комментарий

Ваш e-mail не будет опубликован.

scroll to top