Здравствуйте, уважаемые читатели! В продолжение темы оптимизации картинок, рассмотрим вопрос об уменьшении объема изображения. Лишний вес картинки также мешает быстрой загрузке блога, тем самым уменьшает скорость загрузки сайта в целом.
Сервис pr-cy.ru
Как можно определить, какие картинки этому мешают. Для этого существуют различные программы, но сегодня мы воспользуемся сервисом pr-cy.ru/speed_test, который позволяет проверить быстроту загрузки сайта. Результаты проверки предоставляются в процентном отношении к его максимальному значению.
Для проверки своего сайта вводим URL-адрес сайта и нажимаем — анализировать.
После проверки сайта, на этой странице можно ознакомиться с рекомендациями, которые дает сервис по увеличению скорости загрузки сайта.
Эти рекомендации касаются следующих направлений — не использованию переадресации с целевой страницы, включению сжатия, использованию кэш браузера, сокращению время ответа сервера, сокращению CSS, сокращению HTML, сокращению JavaScript, удалению кода JavaScript и CSS, блокирующий отображение верхней части страницы, оптимизации изображения, оптимизации загрузку видимого контента.
Данные рекомендации касаются сайтов для увеличения их скорости загрузки на компьютер. Имеются рекомендации для телефонов, смартфонов, планшетов. Если есть ошибки, в каком либо из этих позиций, то их необходимо исправлять.
Устранение ошибок оптимизации изображений
Сегодня мы остановимся на устранении замечаний по оптимизации иллюстраций. Для этого открываем рекомендации раздела оптимизации изображений. В моем случае предлагаются уменьшить размер 8 картинок.
Рассмотрим первую ссылку иллюстрации, которую необходимо сжать на 73% -73,6 кБ. Копируем ссылку и размещаем ее в поисковой строке браузера, нажимаем кнопку ввода. После открытия иллюстрации, наводим на ее бегунок, нажимаем правую клавишу мышки и сохраняем данное изображение на рабочем столе компьютера.
Графический редактор Photoshop
Сейчас необходимо ее оптимизировать. Уменьшение объема картинку будем производить в графическом редакторе Фотошоп.
Открываем нужное изображение, нажимаем файл и сохраняем его как для web и устройств. Сохраняем изображение в формате jpeg, и выбираем качество сжатия. Нам необходимо ее сохранить, уменьшив объем более чем на 73,6 кБ. После выполнения всех действий сохраняем изображения на рабочем столе, не изменяя имя файла.
Загрузка файла через FileZilla
Далее необходимо загрузить сохраненный файл на блог. Воспользуемся FTP- клиентом FileZilla, вводим необходимые данные для авторизации. После авторизации, находим файл на рабочем столе и закачиваем его на блог.
Итак, вес первой ссылки уменьшился. По такому же сценарию проходим по остальным картинкам, которые нужно уменьшать. Лишний вес картинки и всех других изображений приведен в соответствие с рекомендациями. Быстрота загрузки сайта, благодаря оптимизации картинок, увеличилась.
Также рекомендую, ознакомиться со следующей информацией и здесь.
С уважением, Михаил Сойкин.
Спасибо, что поделились статьей в социальных сетях!
Довольно неплохой инструмент, а самое главное нужный, ведь картинки большого объема сжирают трафик и тормозят загрузку, а это не есть хорошо)
[Ответить]
Спасибо большое за подробный ответ. Ведь это может выльется в очень большую проблему, когда посетители будут заходить на ваш сайт. Даже сам яндекс будет понижать вас в поисковой выдаче. Поэтому, надо всё делать нормально, с самого начала ведения блога.
[Ответить]
Крайне полезная информация! Многие из нас не придают значения медленной скорости загрузки и причинам этого, однако это влияет на ранжирование, — Яндекс не любит «тормозные» сайты.
Небольшое замечание: картинки не видны. Поставьте плагин responsive-lightbox.
Картинка будет эффектно увеличиваться при клике до размеров загруженного оригинала.
[Ответить]