Оптимизация графики на сайте

Под графикой на сайте понимаются разные иллюстрации и картинки, которые используются в шаблонах и контенте. Они могут быть нескольких форматов: .jpg (.jpeg), .png, .gif. Самым тяжелым считается png-24 с полупрозрачными элементами. Легче всего - .jpeg, а .gif позволяет сохранять картинки в движении. Эти отличительные качества форматов стоит помнить и использовать на проекте. Незачем добавлять обычные статичные иллюстрации в .png, если они не содержат прозрачных элементов, в то же время использование в шаблонах проекта иконок в .jpg тоже встречается крайне редко. Выявить проблемы позволит простой аудит сайта.

Зачем нужна оптимизация графики на сайте?

Оптимизированные картинки легче по весу и поэтому быстрее грузятся. Посетители, попав на сайт с тяжелой графикой, быстро покидают его, т.к. на ожидание, пока прогрузятся все изображения, может уйти много времени. Особенно разница заметна при использовании мобильного интернета в зоне с плохим покрытием сети. Со старых, выпущенных давно устройств, которые поддерживают максимум 3G, а то и вовсе они могут быть рассчитаны только на GPRS. Просматривать страницы без оптимизированной графики на сайте сложно и долго, гораздо проще перейти на другой ресурс, если он работает быстрее.

Плюсы оптимизации графики на сайте для дальнейшего продвижения:

• Меньше отказов;
• Положительные оценки по метрикам Яндекса и Google;
• Посетители дольше задерживаются на страницах;
• Минимальная скорость загрузки.

Проверить, нуждается ли сайт в оптимизации графики, можно в разных сервисах, например, в PageSpeed Insights от Google. Он предоставит рекомендации и даст понять, сколько места позволит высвободить данная процедура.

Оптимизировать картинки – выгодно. Сжатые и уменьшенные изображения занимают гораздо меньше места на сервере. Каждым тарифом хостинга предусмотрены некоторые ограничения, за превышение дисковой квоты взимается дополнительная плата, а сайт может быть перенесен на другой сервер, менее производительный и с расположенными по соседству такими же нарушителями.

Основные направления работы по оптимизации графики на сайте

Оптимизация графики включает в себя:

• Уменьшение размеров самих иллюстраций (а не правка высоты и ширины в стилях);
• Сжатие картинок (уменьшение их веса);
• Внедрение спрайтов в дизайн проекта (все картинки шаблона расположены в одном файле, а не подгружаются по отдельности);
• Удаление ненужной информации о файле (например, комментарии, они точно не нужны).

Программы для оптимизации графики на сайте

Самый простой вариант для начинающих пользователей – это онлайн-сервисы. Они позволяют быстро сократить размер и вес снимка, не прибегая к установке софта. Также разные сервисы можно использовать и для объединения несколько картинок в спрайты, один из вариантов – http://spriteme.org.

Сжать изображения без потери качества можно сервисами https://tinypng.com и http://punypng.com. Интерфейс обоих сайтов понятен интуитивно, несмотря на то, что он они на английском. Использование сервисов – бесплатно.

Для оптимизации графики на сайте можно также использовать разные программы. Лучше установить специальный софт, который выполняет только одну функцию – сжимает файлы. Например, программу FileOptimizer. Уменьшить размер и вес изображений также позволяет PhotoShop, однако эта программа не создана для сжатия графики, но у нее есть функция сохранения «Сохранить для WEB», которая позволяет установить параметры изображения. При настройке ползунка «качество» можно выбрать разные варианты. Даже уменьшение качества на 1-10% способно значительно облегчить файл, а человеческий глаз при просмотре данного изображения на мониторе просто не увидит разницы.

Оптимизация графики для сайта – это важная часть работ по продвижению ресурса, причем она должна вестись всеми участниками процесса, а не только seo-специалистом: дизайнером или верстальщиком при раскройке макета, контент-менеджером при добавлении товаров, статей в блог, описаний, администратором при публикации новостей компании. И гораздо быстрее в самом начале проработать иллюстрации (неважно, о какой работе идет речь), чем потом возвращаться к этому вопросу.