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

Зачем уменьшать?

При проверке по PageSpeed Insights или по Lighthouse в панели разработчика скорость загрузки статьи определяется как “Низкий”. При этом в блоке “Оптимизация” выводится рекомендация “Настройте подходящий размер изображений”:

Значит, нам нужно сжать вес фотографии без потери качества путем уменьшения размера. 

Как уменьшать

1. Открываем в отдельных вкладках статью, для которой нужно уменьшить изображения и онлайн-сервис https://ezgif.com/resize.

2. Загружаем изображение

Копируем адрес картинки, вставляем его в соответствующее поле на ezgif.com и нажимаем зарузить.

Раз:

Два и три::

Картинка загрузится на экран. 

3. Под картинкой ищем поле Width (ширина), задаем размер 700, нажимаем Enter или синюю кнопку “Resize Image”.

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

 

4. Проверяем, как изменился вес изображения

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

Важно: Если разница выводится зеленым шрифтом и ее число отрицательное – все ок, картинка уменьшилась. 

Редко случается, что при изменении размеров картинки этим сервисом ее вес увеличивается. Если так произошло, то нажимаем кнопку “Optimize”, чтобы дополнительно сжать картинку.

 

5. Сохраняем изображение

Нажимаем на дискету:

Для удобства сохраняем изображение под старым именем в какую-нибудь папку на компьютере. 

 

6. Замена изображений в статье

Если на сайте не настроено кеширование изображений, можно просто перезалить все картинки в ту же папку на сервере, где хранятся старые изображения (заменить старые на новые). 

Если же настроен кеш, например, CloudFlare и путь, указанный к изображению в статье, не меняется, то картинки будут грузится из кеша, а не с сервера, а пользователи и поисковики не заметят никаких изменений. 

Как делаем в таком случае:

1. Создаем на сервере новую папку для новых картинок. 
2. Заливаем туда уменьшенные картинки.
3. Копируем код статьи (Кнопка Source) в какой-нибудь редактор (Google Docs тоже подойдет). 
4. Автозаменой меняем старую папку на новую, копируем этот код.
5. В режиме Source в статье удаляем старый код и ставим новый.
6. Переключаемся в режим редактора и проверяем, все ли картинки подгрузились.
7. Сохраняем статью, открываем ее по URL на сайте, нажимаем CTRL+F5 и еще раз внимательно проверяем, все ли ок.

Теперь можно еще раз снять показатели скорости загрузки страницы.

Источник