Объединение картинок в СSS спрайты
CSS спрайт – это своего рода графический архив, где в один, не больших размеров файл, собраны различного рода графические элементы дизайна (логотипы, иконки, градиенты…). Вместо кучи мелких файлов получается один, но тут не стоит всё, и вся собирать в одном месте, так как слишком большой файл — это тоже проблема. Лучше сделать 2 – 3 небольших спрайта. Всяко лучше два, три запроса, чем один громоздкий, либо пару десятков мелких. Выглядит спрайт примерно так:
На страницу такая графика выводиться не через привычный тег <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, он выдаёт сразу готовые варианты для размещения на сайте:
Метод прост в использовании, но не стоит с ним перебарщивать, так как BASE64 хеш строки с кодированными изображениями очень длинные и будут утяжелять размер HTML документа, либо CSS файла. Но как я говорил выше, текстовый контент при помощи Gzip, сжимается намного эффективнее, чем графика.
Также сокращать запросы к серверу можно путём браузерного кеширования, которое реализуется набором определённых HTTP-заголовков. Вот об этом далее и поговорим.
