Создание спрайтов в Blogger


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

Пример:

Это одна картинка, в которой объединены все из коллекции "офис".

Пример css кода.

Правила для каждого из изображений (по названию файлов):
.sprite-Marker{ background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhOgLKttNL2Bmh5C_UwRKlfttqVQXxSkBvpDTRbhW71uPoHl7o-pMQlHknvkKWsd1GN6F19Xq9MwQnYLgR8HkVGtlYlfDgTVBvMqSXzHLEN8bQaQhrmacrgQnIY7_RVzHYNxRcxiteQ6Y/s1600/csg-4e95e673302ed.png) no-repeat top left; background-position: 0 0; width: 90px; height: 90px; } 
.sprite-Notebook{ background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhOgLKttNL2Bmh5C_UwRKlfttqVQXxSkBvpDTRbhW71uPoHl7o-pMQlHknvkKWsd1GN6F19Xq9MwQnYLgR8HkVGtlYlfDgTVBvMqSXzHLEN8bQaQhrmacrgQnIY7_RVzHYNxRcxiteQ6Y/s1600/csg-4e95e673302ed.png) no-repeat top left; background-position: -140px 0; width: 90px; height: 90px; } 
.sprite-ParcelTape{ background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhOgLKttNL2Bmh5C_UwRKlfttqVQXxSkBvpDTRbhW71uPoHl7o-pMQlHknvkKWsd1GN6F19Xq9MwQnYLgR8HkVGtlYlfDgTVBvMqSXzHLEN8bQaQhrmacrgQnIY7_RVzHYNxRcxiteQ6Y/s1600/csg-4e95e673302ed.png) no-repeat top left; background-position: -280px 0; width: 90px; height: 90px; } 
.sprite-PencilSharpener{ background-position: -420px 0; width: 90px; height: 90px; } 
.sprite-Scissors{ background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhOgLKttNL2Bmh5C_UwRKlfttqVQXxSkBvpDTRbhW71uPoHl7o-pMQlHknvkKWsd1GN6F19Xq9MwQnYLgR8HkVGtlYlfDgTVBvMqSXzHLEN8bQaQhrmacrgQnIY7_RVzHYNxRcxiteQ6Y/s1600/csg-4e95e673302ed.png) no-repeat top left; background-position: -560px 0; width: 90px; height: 90px; } 
.sprite-TapeMeasure{ background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhOgLKttNL2Bmh5C_UwRKlfttqVQXxSkBvpDTRbhW71uPoHl7o-pMQlHknvkKWsd1GN6F19Xq9MwQnYLgR8HkVGtlYlfDgTVBvMqSXzHLEN8bQaQhrmacrgQnIY7_RVzHYNxRcxiteQ6Y/s1600/csg-4e95e673302ed.png) no-repeat top left; background-position: -700px 0; width: 90px; height: 90px; }
Их можете прописать в часть шаблона, отвечающую за css или между тегами <style></style> на страницу или в html виджет/гаджет блоггера.

После создания этих стилей, любую иконку из полоски можно вставить в пост, например, блочным элементом ↓
<div class="sprite-TapeMeasure"></div>

Или ссылкой через тег а:
<a href="http://blogger.omg-linux.ru"><div class="sprite-TapeMeasure">
</div></a>

... в любое место ↓

+
= ?
Как сделать такие ссылки, можете подсмотреть в редакторе блоггера, в html режиме, не забудьте добавить нужный класс.

А в создании спрайта вам поможет замечательный сервис ru.spritegen.website-performance.org, генерирующий спрайты.
Просто закачиваете архив с изображениями, крутите настройки, на выходе получается довольно точный результат.

Верхняя рулетка является ссылкой.
зы: Кстати, летающая птичка твиттера сделана при помощи спрайта.

3 комментария:

  1. Вот оно как называется - спрайт! Век живи век учись. Познавательный пост получился.

    ОтветитьУдалить
  2. Я так понял страницы сайта намного быстрее открываться будут. Полезная штука. Надо будет попробовать.

    ОтветитьУдалить
  3. Да, если страницы тормозит графика, то несомненно будут они быстрее открываться со спрайтом (эту технологию использует и гул и яху).
    Простая математика:
    1) для примера я использовал 6 иконок "офис" общим весом в почти 500 килобайт.
    2) после объединения в один файл, этот файл весит 138 килобайт (а если сжать при сохранении в фотошопе. будет ещё меньше)

    Иконки советую искать (кому надо) на softicons.com. Всё бесплатно, удобный поиск, сортировка по размерам.

    ОтветитьУдалить