Оптимизированные для WordPress изображения: сжатие, задержка загрузки

Изображения являются важной частью контента сайта, но они также являются "убийцей номер один", замедляющим скорость - неоптимизированное изображение высокого разрешения (например, 5 МБ) может привести к увеличению времени загрузки страницы на 3-5 секунд, что напрямую заставит пользователя потерять терпение. Хорошо, что оптимизация изображений проста - с помощью двух основных средств, таких как "сжатие размера" и "отложенная загрузка", вы можете сократить время загрузки изображений более чем на 50%. В этом разделе мы будем использовать плагин для полностью автоматической оптимизации, с которой могут справиться новички без каких-либо технических знаний.

Почему фотографии должны быть оптимизированы? 3 надежных данных

• На изображения обычно приходится 60%-80% от общего объема загрузки сайта (гораздо больше, чем на другой контент, такой как текст и код).
• На каждую 1 секунду увеличения времени загрузки показатель оттока пользователей возрастает на 20% (особенно чувствительны к скорости мобильные пользователи).
• Неоптимизированные изображения могут напрямую снижать показатели Google PageSpeed (что влияет на SEO-рейтинг).

основная цель: Сжимает размер изображения 50%-80% без заметной потери качества и позволяет "загружать по требованию" не первоэкранные изображения.

II. Метод 1: Сжатие изображения (автоматическое уменьшение объема с помощью плагинов)

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

Шаг 1: Установите и активируйте плагин Smush

1. Войдите в бэкэнд WordPress и перейдите в раздел "Плагины → Установить плагин".
2. Найдите в поиске "Smush", найдите плагин с надписью "Developed by WPMU DEV" и нажмите "Установить" → "Активировать".

Шаг 2: Настройте автоматическое сжатие (для новых изображений не требуется ручная обработка)

После активации плагин автоматически перейдет на страницу настроек, настройте ее следующим образом:

1. Включить автоматическое сжатие: На вкладке "Настройки" убедитесь, что отмечена опция "Автоматически сжимать вновь загруженные изображения" (она отмечена по умолчанию), чтобы последующие загрузки автоматически сжимались без необходимости делать это вручную.
2. Выберите режим сжатия：
   • Сжатие без потерь" (опция по умолчанию) рекомендуется новичкам: удаляются только лишние данные, качество изображения не теряется, степень сжатия около 30%-50%.
   • Если вам нужна более высокая степень сжатия (например, если размер изображения все еще слишком велик), вы можете выбрать "Сжатие с потерями": небольшая потеря качества изображения (едва заметная невооруженным глазом), со степенью сжатия до 60%-80% (необходимо включить эту опцию, нажав "Дополнительные настройки").
3. Сохранить настройки: Нажмите кнопку "Сохранить настройки" в нижней части страницы.

Шаг 3: Пакетное сжатие существующих изображений (одна операция, оптимизация в масштабах всей сети)

Если на сайте уже есть большое количество несжатых изображений (например, ранее загруженные изображения статей), воспользуйтесь функцией "Пакетное сжатие", чтобы оптимизировать их одним щелчком мыши:

1. На странице плагина Smush перейдите на вкладку "Batch Smush" слева.
2. Нажмите "Начать сейчас", и плагин автоматически просканирует все изображения в вашей медиатеке.
3. После сканирования нажмите "Применить Smush к XX изображениям", система выполнит пакетное сжатие (процесс может занять несколько минут, ждать не нужно, может выполняться в фоновом режиме).
4. Просмотр результатов сжатия: После завершения сжатия на экране появится сообщение "Total Space Saved" (например, "12MB saved"), а также сравнение объема каждого изображения до и после сжатия.

Метод 2: Отложенная загрузка (позволяя изображениям загружаться по требованию)

Принцип Lazy Load заключается в следующем:Изображение начнет загружаться только тогда, когда пользователь прокрутит страницу до позиции изображенияТаким образом, первый экран (первая область, которую вы видите при открытии страницы) будет загружен первым. Таким образом, изображения первого экрана (первой области, которую вы видите при открытии страницы) будут загружаться первыми, а изображения, не относящиеся к первому экрану (например, изображения следующих статей и нижнего колонтитула), не будут загружаться до поры до времени, что значительно сокращает время первоначальной загрузки.

Включите отложенную загрузку в один клик с помощью плагина Smush (дополнительные плагины не требуются).

В Smush встроена отложенная загрузка, не нужно устанавливать отдельный плагин с шагами настройки:

1. На странице плагина Smush перейдите на вкладку "Задержка загрузки" слева.
2. Отметьте "Включить отложенную загрузку" и настройте, как рекомендуется ниже:
   • "Тип изображения с задержкой загрузки": выберите все (изображение, аватар, миниатюра и т. д.).
   • "Исключить изображения первого экрана": рекомендуется отметить (изображения первого экрана не задерживаются, чтобы пользователи могли быстро увидеть основное содержимое при открытии страницы).
   • "Анимация загрузки": оставьте по умолчанию (показывает небольшую анимацию, чтобы предупредить пользователей о том, что изображение загружается).
3. Нажмите "Сохранить настройки", и отложенная загрузка немедленно вступит в силу.

Убедитесь, что действует отложенная загрузка

1. Откройте страницу любой статьи на сайте (содержащую несколько изображений) и нажмите F12, чтобы открыть браузер "Инструменты разработчика".
2. Нажмите на вкладку "Web", чтобы обновить страницу и посмотреть, как загружается изображение:
   • При первоначальной загрузке в списке "Сеть" будет показано только первое изображение экрана.
   • Прокрутите страницу вниз, записи о загрузке этих изображений появятся в списке "Сеть" только тогда, когда появятся изображения, не относящиеся к первому экрану, что свидетельствует о том, что действует отложенная загрузка.

Дополнительные советы по оптимизации изображений, которые обязательно нужно знать новичкам.

1. выберите правильный формат изображения (это важнее, чем сжатие)

Выбор правильного формата перед загрузкой изображения может уменьшить его размер в источнике:

• Фотографии / Сложные изображения: При использовании формата WebP (30%-50% меньше JPG и с лучшим качеством изображения) плагин Smush может автоматически конвертировать JPG/PNG в WebP (включите "Автоконвертирование в WebP" в разделе "Дополнительные настройки").
• Простая графика / иконки: Используйте формат PNG (поддерживает прозрачный фон, небольшой размер), избегайте JPG.
• Никогда не используйте формат BMP, TIFF: Эти форматы имеют большой размер и не подходят для использования в Интернете.

2. контролируйте размер изображений (не используйте функцию "уменьшение размера изображений")

Многие новички загружают изображение высокого разрешения (например, 3000×2000 пикселей), сделанное фотоаппаратом, напрямую и устанавливают его для отображения в формате 300×200 пикселей через WordPress - это неправильно! Ведь браузер все равно будет загружать оригинальное большое изображение, тратя полосу пропускания и время.

правильный подход：

• Перед загрузкой используйте инструменты для работы с изображениями (например, "Paint" или "Canva"), чтобы обрезать размер изображения до фактического размера дисплея (например, 1200 пикселей для баннера на первом экране).
• Если вы не умеете пользоваться инструментами для работы с изображениями, вы можете установить плагин "Imsanity" для автоматического сжатия больших загружаемых изображений до заданного размера (например, максимальная ширина 1200 пикселей).

3. Избегайте злоупотребления изображениями (больше - не значит лучше)

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

V. Решение общих проблем

1. значительно ли ухудшается качество изображения после сжатия?

• Если вы используете "Lossy Compression", вы можете уменьшить степень сжатия в настройках Smush ("Advanced Settings" → "Compression Strength" до 50%).
• Рекомендуется использовать "Сжатие без потерь" + "Формат WebP", чтобы сбалансировать размер и качество изображения.

2. Задержка загрузки приводит к ненормальному отображению изображений (например, пустые, неправильно расположенные)?

• Убедитесь, что первое изображение экрана исключено (если исключение не выполнено, загрузка первого изображения экрана может происходить с задержкой, а также может появиться кратковременный пробел).
• Если некоторые изображения должны загружаться немедленно, вы можете ввести имя CSS-класса изображения в поле "Исключить" в настройках Smush "Задержка загрузки" (требуется простое знание кода, новички могут временно отключить задержку загрузки на странице, где находится изображение).

3. Нет значительного увеличения скорости после оптимизации?

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

короткие

Оптимизация изображений - это операция с самым высоким коэффициентом окупаемости инвестиций в оптимизацию скорости сайта. С плагином Smush настройка занимает 10 минут, а время загрузки изображений можно сократить более чем на 50%. Основные шаги: установка Smush → включение автоматического и пакетного сжатия → включение отложенной загрузки (исключение изображений на первом экране).

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