С Вашей графикой все в порядке?

Попробуйте угадать, что является основной причиной медленной работы вашего сайта? Мы уже упустим тот вопрос, что скорость работы вашего сайта напрямую влияет на его посещаемость (так, в англоязычном сегменте поиска Google и в мобильной его версии "быстрые сайты" хорошо ранжируются, также "скорость" уменьшает число отказов). Распространенными ответами на этот вопрос будут приблизительно такие версии:

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

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

Об этом заявили и акцентировали на этом внимание вебмастеров сотрудники команды разработки поискового сервиса Google на недавней видеоконференции. Впрочем, помешанные на скорости в Google уже давно всем советуют бороться с весом графики и даже, в свое время, продвигали собственный формат картинок под названием WebP, предполагавший еще большее сжатие в отличие JPEG, что существенно увеличило бы скорость загрузки сайтов, как и скорость интернета в целом, где вес картинок - основной объем трафика.

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

Между тем, под оптимизацией изображения под web-сайты подразумевается удаление ненужных байт из файлов изображений, конвертация изображения в оптимальный сжатый формат. Все это происходит практически без потери качества и не меняет внешний вид. То есть, пользователь на вашем сайте видит картинку такого качества как и раньше, но грузится она в его браузер на порядок быстрее. И так со всеми графическими файлами, которых на странице десятки, сотни, а порой и тысячи!

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

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

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

Кто готов бесплатно оптимизировать графику вашего сайта онлайн инструментами?

TOP-5 продвинутых инструментов оптимизации графики

Watermarkly: если нужна поддержка всех форматов и подгонка под желаемый размер
Watermarkly: если нужна поддержка всех форматов и подгонка под желаемый размер

Watermarkly - позволяет уменьшить фото до желаемого размера в килобайтах. Также можно указать степень компрессии. С выбранной опцией "Высокое качество" файл будет больше, но визуально не изменится. Позволяет обработать до 10 фото без ограничения размера. Платная версия без ограничений стоит 990 рублей (единовременный платёж).

TinyPNG: если нужна хорошая оптимизация формата PNG
TinyPNG: если нужна хорошая оптимизация формата PNG

TinyPNG - работает в первую очередь с форматом PNG (не брезгует и jpg), поддерживает drag’n’drop, загрузку нескольких файлов одновременно. Работает довольно быстро!

Shrink Pictures: помимо оптимизации работает с размером
Shrink Pictures: помимо оптимизации работает с размером

Shrink Pictures - если нужны собственные настойки оптимизации изображения,  возможность изменить соотношение сторон и размеры картинки или специальные эффекты.

Web Resizer: оптимизация, размер и другие опции
Web Resizer: оптимизация, размер и другие опции

Web Resizer - помимо оптимизации изображения умеет применять к ним некоторые опции: изменить размер картинки, повернуть ее, задать свой уровень качества.

Online Image Optimizer от Dynamic Drive
Online Image Optimizer от Dynamic Drive: оптимизирует JPG, GIF и PNG

Online Image Optimizer - оптимизирует JPG, GIF и PNG, умеет загружать картинки по URL изображения, конвертировать из одного формата в другой.

 PageSpeed Insights: оптимизация от Google

Кстати, инструмент измерения скорости от Google, известный как PageSpeed Insights умеет автоматически (помимо измерения показаний основных параметров загрузки сайта) оптимизировать сайт на лету. Достаточно пролистать страницу вниз и увидите там ссылку - "Скачать оптимизированные изображения, ресурсы JavaScript и CSS для этой страницы" (в архиве будут как раз указанные сжатые файлы проверяемой в инструменте страницы).

PageSpeed Insights, как инструмент оптимизации сайта
PageSpeed Insights, как инструмент оптимизации сайта

Разумеется, сильно уповать на автоматику не стоит, после загрузки обязательно проверить корректность предложенных улучшений и не только применительно к инструменту PageSpeed Insights, но и любому онлайн оптимизатору!

Оцените материал:
Звёзд: 1Звёзд: 2Звёзд: 3Звёзд: 4Звёзд: 5 (3 голоса, рейтинг: 5,00 из 5)
Загрузка...

Вячеслав - типичный интернетчикВячеслав Скоблей (ака files) - типичный интернетчик. Скитаюсь интернетом, пишу на PHP, увлекаюсь созданием веб-сайтов на Wordpress, решаю многочисленные проблемы, которые до появления интернета не существовали...

Специализируюсь на безопасности сайтов: защищаю сайты от атак и взломов, занимаюсь лечением вирусов на сайтах и профилактикой...

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

2 комментарий

  1. Весьма полезный материал!
    Смело ставлю 5 звезд.

  2. GladWeb says:

    +5 за миниатюру записи)))
    Сжали "меня", только очки забыли))

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *