Оптимизация изображений или как сделать css-спрайты?

Здравствуйте, уважаемые читатели блога SdelaemBlog.ru. Сегодня поговорим о том, как оптимизировать скорость загрузки блога или сайта, с помощью объединения изображений интернет-проекта в так называемые спрайты.

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

Какие пункты мы рассмотрим в этой статье:

• Что такое CSS-спрайты (sprites)?
• Какие инструменты понадобятся, для создания css-спрайтов?
• Как сделать css-спрайты?
• Как подключить css-спрайт к сайту?

Что такое CSS-спрайты (sprites)?

CSS-спрайты — это графический файл (изображение), в котором располагаются несколько других изображений, которые в свою очередь можно вывести на страницах сайта, с помощью файла style.css. Я думаю вы уже поняли, для чего применяются спрайты? Для уменьшения трафика и ускорения загрузки страницы сайта.

Какие инструменты понадобятся, для создания css-спрайтов?

Чтобы сделать спрайты, нам понадобятся всего лишь два инструмента: Это браузер Google Chrome и плагин Sprite Me, для этого браузера, который поможет нам в создании нужного графического элемента.

Как установить браузер, я думаю вы разберетесь, а возможно даже, у вас уже установлен Google Хром, тогда вам остается только установить плагин.

Для установки плагина, нужно перейти по адресу: http://spriteme.org/.

На этой странице вы можете посмотреть demo (демонстрацию работы плагина). Почитать часто задаваемые вопросы (FAQ). А также, опробовать работу этого дополнения, с помощью кнопки Run SpriteMe.

А чтобы установить дополнение, достаточно перетащить, зажатием левой кнопки мыши, ссылку SpriteMe, в панель закладок браузера.

Теперь, у нас все готово и можно приступать к созданию css-спрайтов.

Как сделать css-спрайты?

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

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

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

Теперь, для создания файла, нужно кликнуть по кнопке «make all» или в верхнем окне — «make sprite», и подождать пока спрайт будет создан.

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

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

Все, теперь css-спрайт готов, остается только загрузить его на сервер и подключить нужные css-стили.

Как подключить css-спрайт к сайту?

Для того, чтобы файл начал работать на сайте, нужно с помощью бесплатного ftp-клиента, закачать рисунок на сервер, в папку, в которой находятся все картинки шаблона. После чего, нужно вернуться в браузер и нажать на кнопку «export css».

Откроется новая вкладка, в которой будут перечеркнуты стили файла style.css, которые следует заменить на новые, указанные ниже.

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

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

Вот, пожалуй, и все на сегодня. До новых встреч. Если остались вопросы — жду в комментариях.