SdelaemBlog

Создание Сайтов и их настройка

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

Главная Статьи Полезное Инструменты Вебмастера Оптимизация изображений или как сделать css-спрайты?

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

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

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

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

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

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

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

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

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

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

Как установить Sprite Me?

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

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

Как установить дополнение spriteme?

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

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

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

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

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

Как оптимизировать изображения сайта?

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

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

Как создать css-спрайты?

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

Как скачать готовый css-спрайт?

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

Как скачать готовый css-спрайт?

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

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

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

Как экспортировать css-стили для css -спрайта?

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

Что нужно для работы css-спрайта?

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

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

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

Оставьте свой коммент
ДОСТАВКА СТАТЕЙ ПОЧТОЙ, на дом

Ознакомьтесь с условиями хранения ваших данных

Комментарии

  1. Эльвира

    Спасибо. Не знала о спрайтах, честно. Сейчас устанавливаю.

    4 года назад15.06.2013 Ответить
  2. Михаил Веб

    @ Эльвира: Не за что. Возникнут вопросы — обращайтесь

    4 года назад15.06.2013 Ответить
  3. Алексей Черкасов

    Спасибо, хорошая статья. Только вот не пойму, картинки из папки шаблонов после установления кода можно удалять ?

    3 года назад09.09.2014 Ответить
  4. Михаил Веб

    @ Алексей Черкасов:
    Здравствуйте.
    Те из которых создавался спрайт, да.
    Остальные нет, включая сами спрайты.

    3 года назад15.09.2014 Ответить
  5. artem

    здравствуйте. у меня почему-то spriteMe предлагает не все картинки объединить в спрайты. к примеру, социальные иконки он вообще почему-то проигнорировал. не подскажете, как эту проблему можно решить?

    2 года назад08.02.2015 Ответить
  6. artem

    и еще один вопрос: если я правильно понимаю, этот способ предполагает прописывать в стилях постороннюю ссылку вида

    _http://www.jaredhirsch.com/coolrunnings/public_images/20a7e03692/spriteme1.png?

    можно ли как-то без нее обойтись?

    2 года назад09.02.2015 Ответить
  7. Михаил Веб

    @ artem:
    Здравствуйте.
    Я так понимаю изображения, которые не объединяются, находятся в блоке Non-Sprited Images? Дело в том, что действительно не все изображения могут быть объединены в одно изображение, например, изображение, которое повторяется по горизонтали или вертикали, а также другие спрайты также могут быть не включены.
    Социальные иконки, как раз, могут быть уже выполнены в виде отдельного спрайта, отсюда и может возникать проблема.
    Что касается решения проблемы, то все довольно просто, как написано в статье, достаточно перетащить нужный элемент из одного блока в другой, но при этом необходимо все таки понимать, как организованы спрайты и почему определенная картинка не была включена в спрайт.
    Нет, это не так. Вы не обязаны прописывать ссылку на сторонний сайт, где будет храниться Ваш спрайт. Достаточно просто скачать готовое изображение и загрузить его на Ваш сервер, а затем при прописывании свойств CSS подставлять свои пути до картинок, то есть на свой сервер, а не сторонний, предложенный по умолчанию.

    2 года назад10.02.2015 Ответить
  8. Гульнара

    Михаил, Вы даете очень интересные советы, хочется ими воспользоваться. Но возникает вопрос? Вы сами спрайтами пользуетесь? Далее, скорость загрузки Ваших страниц по Alexa — very slow, вид Вашего блога очень странный. Сайд бары и вся реклама ушла в самый низ, требуется горизонтальная прокрутка. Или Вы уже забросили этот блог? На мои вопросы Вы ответили, запрос на подтверждение подписки я не получила?

    2 года назад14.05.2015 Ответить
  9. Михаил Веб

    @ Гульнара:
    Здравствуйте.
    Спасибо.
    Для этой темы спрайты не использую, так как руки не дошли доделать нормально шаблон. Но в будущем, планирую. В прошлой теме спрайты использовал.
    Блог не заброшен, но шаблон требует существенной доработки и оптимизации.
    Про подписку, не понял. Если вы не получили письмо о подтверждении подписки, попробуйте поискать его в папке спам. Оно должно было прийти.

    2 года назад23.05.2015 Ответить
  10. Олег

    Что то мне этот сервис не очень удобен, надо поискать по лучше

    2 года назад09.10.2015 Ответить

Чтобы оставить комментарий, заполните, пожалуйста форму ниже:

Смайлы

Нажимая на кнопку "Комментировать" Вы согласшаетесь с условиями политики конфиденциальности

Обязательно для Заполнения!

Обязательно для Заполнения!

Проверка комментариев включена. Прежде чем Ваши комментарии будут опубликованы пройдет какое-то время.

Отправить жалобу разработчику сайта

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

[contact-form-7 404 "Not Found"]

Спасибо большое за поддержку проекта! :)

Для поддержки проекта, выберите убодный способ для оплаты: