Лишний вес картинки

Лишний вес картинки. Сервис pr-cy.Здравствуйте, уважаемые читатели!  В продолжение темы оптимизации картинок, рассмотрим вопрос об уменьшении объема изображения. Лишний вес картинки также мешает быстрой загрузке блога, тем самым уменьшает скорость загрузки сайта в целом.

Сервис 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, вводим необходимые данные для авторизации. После авторизации, находим файл на рабочем столе и закачиваем его на блог.

Лишний вес картинки. Filezilla.

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

Лишний вес картинки. Результат оптимизации.

Также  рекомендую, ознакомиться со следующей информацией и здесь.

С уважением, Михаил Сойкин.

Спасибо, что поделились статьей в социальных сетях!

Запись опубликована в рубрике Полезные программы. Добавьте в закладки постоянную ссылку.

3 комментария на «Лишний вес картинки»

  1. Константин говорит:

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

    [Ответить]

  2. Семен говорит:

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

    [Ответить]

  3. Виктор говорит:

    Крайне полезная информация! Многие из нас не придают значения медленной скорости загрузки и причинам этого, однако это влияет на ранжирование, — Яндекс не любит «тормозные» сайты.
    Небольшое замечание: картинки не видны. Поставьте плагин responsive-lightbox.
    Картинка будет эффектно увеличиваться при клике до размеров загруженного оригинала.

    [Ответить]

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

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