Полезное

Оптимизация изображений для сайта в спрайт с помощью Cyotek Spriter

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


C помощью Cyotek Spriter это легко делать. Она небольшая и к тому же бесплатная.

Открываем программу Cyotek Spriter, создаем новый лист. В проводнике Windows выделяем нужные нам рисунки, хватаем и ведем их в окно программы Cyotek Spriter, отпускаем мышку.

Например: на закладке IMAGE мои граватары таким образом поместились в новом проекте программы, которая сама автоматически их выстроила, см. рис.1. Нажимаем далее закладку CSS, видем каскадные стили с параметрами расположения рисунков, их количество и url (ссылка) к нашему рисунку, можем уже их скопировать и вставить на наш сайт, например в style.css и незабываем вставить свой путь до рисунка в URL.

Далее оптимизируем изображение в OptiPNG  - если на выходе хотим получить оптимизированное изображение формата PNG, если JPEG - то не надо оптимизировать. Осталось на верху кнопкой SAVE SPRITE сохранить рисунок или кнопкой EXPORT - экспортировать наш готовый проект на компьютер.

Оптимизированное изображение закидываем в папку IMAGES на сайт и повторюсь не забываем прописать этот путь (ссылку)  в параметры url нашего css.

Оптимизация изображений для сайта в спрайт
Оптимизация изображений для сайта в спрайт

Осталось на сайте в нужном месте применить эти граватары:

<div class="gravatar<?php echo(mt_rand(1,12)); ?>"></div>
С помощью PHP граватары рандомно (произвольно) будут меняться. Граватары - это частный случай, лучше использовать граватары с ru.gravatar.com (для Wordpress) или вообще подключить комментарии с бесплатного disqus.com (многие так делают).

С помощью спрайта можно легко с оптимизировать мелкие статичные рисунки в 1 средний по размеру файл. Различные измерители скорости сайта только обрадуются, например: Google PageSpeed Insights или Pingdom Website Speed Test.

Разработчик: Cyotek
Поддержка Windows: XP/7/8/10 (32/64-bit)
Размер: 5 Мб


Поделиться с друзьями:

Оставить комментарий


 Какая вторая буква в слове nbmhhp ?