Оптимизация изображений в WordPress

Картинки — неотъемлемая часть любого сайта. Они делают контент привлекательнее, понятнее, живее. Но с другой стороны — «тяжёлые» изображения могут значительно тормозить загрузку сайта. А это влияет на пользовательский опыт и позиции в поисковой выдаче. Оптимизация изображений в WordPress — несложный процесс, который можно автоматизировать. В этой статье расскажем, зачем это нужно, как это делать правильно и какие инструменты помогут вам в этом.

Зачем оптимизировать картинки и что дает оптимизация?

Оптимизация изображений — это процесс уменьшения их «веса» без потери качества. Цель — ускорить загрузку страниц и сэкономить ресурсы сервера.

Что дает оптимизация картинок:

1. Быстрее загружается сайт
   Маленькие по размеру картинки грузятся гораздо быстрее. Пользователю не нужно ждать — он сразу видит контент. Особенно важно это для мобильных пользователей и при медленном интернете.
2. Улучшение SEO
   Скорость загрузки сайта — один из важных факторов ранжирования в поисковиках. Оптимизация изображений помогает сократить время загрузки страницы, а значит — улучшить позиции в поиске.
3. Экономия места на хостинге
   Большие изображения занимают много места. Если вы часто загружаете картинки на сайт, хостинг может начать требовать доплату за превышение лимита. Оптимизированные изображения занимают меньше места и позволяют избежать лишних расходов.
4. Снижение нагрузки на сервер
   Чем меньше «весит» изображение, тем меньше ресурсов тратит сервер на его обработку. Это особенно актуально, если на сайте много трафика или изображений в высоком разрешении.
5. Улучшение пользовательского опыта
   Быстрые сайты нравятся пользователям. Никто не хочет ждать, пока загрузится картинка. А если сайт тормозит, человек просто уходит. Оптимизация помогает удержать посетителя и делает сайт приятнее в использовании.

Способы оптимизации картинок в WordPress

Есть несколько простых и эффективных способов сделать картинки легче и не потерять в качестве.

1. Загружайте изображения нужного размера
   Если вы планируете вставить на сайт картинку шириной 800 пикселей, не стоит загружать туда изображение 4000×3000. Сначала уменьшите его в редакторе или сервисе, а потом загружайте в WordPress.
2. Используйте правильные размеры при выводе
   WordPress сам создает копии изображений разных размеров при загрузке. Используйте именно тот размер, который подходит вашему шаблону. Например:

the_post_thumbnail('medium'); // вместо 'full', если достаточно среднего размера

Подробнее о размерах изображений и миниатюрах можно узнать в статье: Миниатюры WordPress: как включить, изменить и вывести.

3. Используйте изображения в нужном формате
   Формат изображения имеет значение. Правильно подобранный формат — это уже половина успешной оптимизации:
   JPEG — идеален для фотографий и изображений с множеством цветов и плавными переходами. Он хорошо сжимается с минимальной потерей качества.
   PNG — подходит для изображений с прозрачным фоном, графикой, схемами, иконками. Лучше передает резкие границы, но обычно «весит» больше, чем JPEG.
   SVG — векторный формат, отлично подходит для логотипов, иконок и любой графики, созданной в векторе. Не теряет качество при масштабировании и «весит» очень мало.

Единственный минус — WordPress по умолчанию не поддерживает загрузку SVG, но это можно решить с помощью кода или плагинов. Об этом мы писали в статье как разрешить загрузку svg в WordPress.

4. Сжимайте изображения перед загрузкой
   Перед тем как загрузить изображение в медиатеку WordPress, можно сжать его в любом графическом редакторе или использовать онлайн-сервис TinyPNG. Это особенно полезно, если вы не используете автоматические плагины.
5. Используйте формат WebP
   WebP — современный формат изображений от Google, который дает отличное сжатие без потери качества. Он поддерживается большинством браузеров и отлично работает с WordPress (особенно в новых версиях). Вы можете конвертировать картинки в WebP с помощью плагинов или вручную.

Плагины для оптимизации изображений

В WordPress есть много плагинов для автоматической оптимизации изображений. Рассмотрим два популярных и удобных варианта: Smush и EWWW Image Optimizer.

Smush (бесплатная версия)

Smush — один из самых популярных плагинов для оптимизации изображений в WordPress. Даже в бесплатной версии он предлагает впечатляющий набор функций: автоматическое сжатие изображений при загрузке, массовую оптимизацию уже загруженных файлов, удаление ненужных метаданных и настройку размеров изображений.

Основные функции Smush Free:

• Автоматическая оптимизация при загрузке;
• Пакетная оптимизация до 50 изображений за один клик;
• Сжатие изображений без потери качества (lossless);
• Удаление метаданных (EXIF, GPS, информация о камере);
• Настройка максимальной ширины и высоты изображений;
• Поддержка форматов JPEG, PNG и GIF;
• Совместимость с Gutenberg и классическим редактором.

Как начать пользоваться Smush:

1. Зайдите в админку WordPress и установите плагин Smush.
2. Активируйте плагин и в админке появится новый раздел Smush. Откройте его чтобы приступить к настройке плагина.

Основные разделы и настройки Smush

1. Панель управления
   Здесь вы видите общее состояние оптимизации: сколько изображений уже оптимизировано, сколько ещё можно сжать, и есть ли проблемы.

2. Массовая обработка
   Позволяет оптимизировать изображения, которые были загружены до установки плагина. Бесплатная версия обрабатывает по 50 файлов за один раз — но вы можете запускать повторно до тех пор, пока всё не будет оптимизировано.

3. Обработка каталогов
   В этом разделе можете оптимизировать изображения в папках, отличных от стандартной медиатеки (например, если вы загружаете изображения через FTP или плагин галереи).

Сейчас нас интересует раздел Массовая обработка. В блоке Настройки нужно установить параметры для обработки изображений. Все параметры хорошо описаны в админке и у вас не должно возникнуть проблем.

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

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

Smush: преимущества и недостатки

• Очень прост в использовании даже для новичков.
• Сжимает без потери качества.
• Автоматическая работа после первоначальной настройки.
• Отлично работает с любой темой и другими плагинами.
• Имеет удобную статистику и рекомендации по оптимизации.

• Нет поддержки WebP в бесплатной версии.
• Пакетная оптимизация ограничена 50 изображениями за раз.
• Некоторые функции (например, CDN, суперсжатие, конвертация форматов) доступны только в версии Pro.

EWWW Image Optimizer

EWWW Image Optimizer — еще один гибкий и функциональный плагин для оптимизации изображений в WordPress. В отличие от многих аналогов, он обрабатывает изображения прямо на вашем сервере, без отправки в сторонние облачные сервисы. Это значит, что вы сохраняете полную конфиденциальность и не зависите от лимитов бесплатных тарифов.

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

Функции EWWW Image Optimizer (Free)

• Автоматическая оптимизация при загрузке;
• Массовая оптимизация уже загруженных изображений;
• Удаление ненужных метаданных;
• Настройка максимальной ширины и высоты;
• Поддержка форматов JPG, PNG, GIF, WebP;
• Конвертация изображений в WebP;
• Поддержка Lazy Load (отложенной загрузки);
• Оптимизация файлов за пределами медиатеки (через Custom Folders).

Установка и настройка EWWW Image Optimizer

Установите и активируйте плагин в админке. Появится новый раздел Настройки > EWWW Image Optimizer.

После активации плагина, все новые загруженные картинки будут автоматически оптимизированы.

В упрощенном режиме настройки вы можете активировать удаление мета-данных изображений, переопределить максимальный размер, доступный к загрузке в WordPress, включить отложенную загрузку картинок на сайте и активировать создание изображений в формате WebP.

Продвинутый режим содержит огромное количество настроек. Вы можете установить уровень оптимизации каждого формата изображений (JPG, PNG, GIF и т.д.), можете подключить дополнительную директорию с изображениями, не в рамках структуры WordPress, в которой будут оптимизированы картинки и многое другое. В рамках данной статьи рассмотреть все продвинутые настройки не представляется возможным. Вы можете изучить их в админке вашего сайта и используя документацию плагина.

Чтобы запустить массовую обработку уже загруженных изображений вашего сайта нажмите кнопку Оптимизировать локальные изображения и запустите оптимизацию.

EWWW Image Optimizer: плюсы и минусы

• Не требует регистрации и API-ключей.
• Безлимитная массовая оптимизация (в отличие от Smush Free).
• Поддержка WebP даже в бесплатной версии.
• Можно оптимизировать любые изображения на сайте, а не только из медиатеки.

• Интерфейс менее дружелюбный, чем у Smush (особенно для новичков).
• Некоторые настройки требуют технического понимания.

Заключение

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

Начните с простого: установите плагин вроде Smush или EWWW Image Optimizer. Эти инструменты позволяют автоматизировать процесс и не требуют технических знаний. Со временем можно настроить работу с WebP, подключить lazy load и продумать размер изображений на каждой странице.