Оглавление

Введение

Ускорить сайт, работающий на WordPress, — задача, которая всегда актуальна для веб-разработчика. Особенно, когда речь идёт о сжатии и оптимизации изображений. Плохая оптимизация графики может привести к замедленной загрузке страниц и, как следствие, к недовольству посетителей и снижению позиций в поисковой выдаче. Поэтому давайте разберёмся, как оптимизировать изображения для WordPress с помощью команд Linux, автоматизировать процесс сжатия через cron, и заодно настроим поддержку WebP, чтобы ускорить загрузку и улучшить SEO.

Установим необходимые утилиты для Linux

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

sudo apt update
sudo apt install jpegoptim optipng gifsicle webp -y
  • jpegoptim — сжатие JPEG.
  • optipng — сжатие PNG без потерь.
  • gifsicle — сжатие GIF.
  • webp — конвертация в WebP, более современный и эффективный формат.

Сжатие и оптимизация изображений

1. Оптимизация JPEG с помощью jpegoptim

JPEG — популярный формат для фотографий, поэтому начнем с его оптимизации:

jpegoptim --max=85 --strip-all image.jpg
  • --max=85 — устанавливаем качество на 85%.
  • --strip-all — удаляет ненужные метаданные (EXIF и т.д.).

Автоматизация для всех JPEG файлов в WordPress директории:

find /var/www/html/wp-content/uploads -iname '*.jpg' -exec jpegoptim --max=85 --strip-all {} \;

2. Сжатие PNG с помощью optipng

Для PNG, которые часто используются для логотипов и иконок:

optipng -o7 image.png
  • -o7 — максимальное сжатие без потерь.

Оптимизируем все PNG файлы в загрузках WordPress:

find /var/www/html/wp-content/uploads -iname '*.png' -exec optipng -o7 {} \;

3. Сжатие GIF с помощью gifsicle

Если у вас на сайте есть анимационные GIF:

gifsicle -O3 image.gif -o image-optimized.gif
  • -O3 — максимальная оптимизация.

Конвертация изображений в WebP

Формат WebP от Google обеспечивает высокое качество при меньшем размере файлов:

cwebp -q 80 image.jpg -o image.webp
  • -q 80 — качество сжатия 80%.

Конвертируем все JPEG и PNG в WebP:

find /var/www/html/wp-content/uploads \( -iname '*.jpg' -o -iname '*.png' \) -exec sh -c 'cwebp -q 80 "$1" -o "${1%.*}.webp"' _ {} \;

Проблема: Ссылки на JPEG и PNG в базе данных WordPress

После конвертации файлов в WebP возникает вопрос: как заставить WordPress автоматически использовать WebP, если браузер поддерживает этот формат? Просто заменить ссылки в базе данных нельзя, так как это нарушит работу сайта.

Для решения этой проблемы у нас есть несколько вариантов:

Решение 1: Подмена через .htaccess для Apache

Если ваш сервер работает на Apache, добавьте в файл .htaccess:

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{REQUEST_FILENAME} (.+)\.(jpe?g|png)$
RewriteCond %{DOCUMENT_ROOT}/$1.webp -f
RewriteRule (.+)\.(jpe?g|png)$ $1.webp [T=image/webp,E=accept:image/webp,L]
</IfModule>

Как это работает:

  1. Сервер проверяет, поддерживает ли браузер WebP (HTTP_ACCEPT image/webp).
  2. Если запрашиваемый файл — JPEG или PNG, и существует WebP версия, сервер автоматически подставляет её.

Решение 2: Использование PHP-фильтров для WordPress

Если вы используете Nginx или хотите управлять подменой изображений на уровне WordPress, можно добавить PHP-код в файл functions.php вашей темы:

function serve_webp_if_available($content) {
    if (strpos($_SERVER['HTTP_ACCEPT'], 'image/webp') !== false) {
        $content = preg_replace_callback('/<img[^>]+src=["\']([^"\']+)\.(jpg|jpeg|png)["\']/', function ($matches) {
            $webp_url = $matches[1] . '.webp';
            if (file_exists(get_home_path() . str_replace(site_url() . '/', '', $webp_url))) {
                return str_replace($matches[0], str_replace($matches[2], 'webp', $matches[0]), $matches[0]);
            }
            return $matches[0];
        }, $content);
    }
    return $content;
}
add_filter('the_content', 'serve_webp_if_available');

Как это работает:

  • Фильтр the_content проверяет все изображения на странице.
  • Если браузер поддерживает WebP и такой файл существует, он автоматически подставляется.

Автоматизация с помощью cron

Чтобы ваш сервер автоматически сжимал и конвертировал изображения, настройте cron:

crontab -e

Добавьте:

# Сжимаем JPEG и PNG каждую ночь
0 2 * * * find /var/www/html/wp-content/uploads -iname '*.jpg' -exec jpegoptim --max=85 --strip-all {} \;
0 2 * * * find /var/www/html/wp-content/uploads -iname '*.png' -exec optipng -o7 {} \;

# Конвертация в WebP
0 3 * * * find /var/www/html/wp-content/uploads \( -iname '*.jpg' -o -iname '*.png' \) -exec sh -c 'cwebp -q 80 "$1" -o "${1%.*}.webp"' _ {} \;

Если вы используете Nginx и хотите настроить автоматическую подгрузку WebP изображений вместо JPEG или PNG, это тоже можно сделать с помощью правил rewrite. В отличие от Apache, Nginx не поддерживает .htaccess, но мы можем настроить всё прямо в конфигурации сервера.

Решение: Nginx rewrite для WebP

Добавим правила в ваш файл конфигурации Nginx (например, /etc/nginx/sites-available/your-site):

server {
    listen 80;
    server_name your-domain.com;

    # Корневая директория сайта
    root /var/www/html;

    location ~* \.(jpe?g|png)$ {
        # Проверка, поддерживает ли браузер WebP
        set $webp_suffix "";
        if ($http_accept ~* "image/webp") {
            set $webp_suffix ".webp";
        }

        # Если файл .webp существует, используем его
        if (-f $request_filename$webp_suffix) {
            rewrite ^(.+)\.(jpe?g|png)$ $1$webp_suffix break;
        }

        # Обслуживаем оригинальный файл, если WebP версия отсутствует
        try_files $uri =404;
    }
}

Как это работает:

  1. Проверка поддержки WebP: Если браузер отправляет заголовок Accept: image/webp, мы устанавливаем суффикс .webp.
  2. Проверка наличия файла: Если WebP версия изображения существует, сервер использует её.
  3. Обычный файл: Если WebP версия не найдена, используется оригинальное изображение (JPEG или PNG).

Перезагрузка Nginx для применения изменений

После редактирования конфигурации перезагрузите Nginx:

sudo nginx -t
sudo systemctl reload nginx

Проверка

  1. Откройте ваш сайт в браузере, который поддерживает WebP (например, Google Chrome).
  2. Проверьте загруженные изображения с помощью DevTools (F12 → Network), чтобы убедиться, что браузер подгружает .webp версии файлов.

Автоматизация конвертации через cron

Если вы уже настроили автоматическое создание WebP версий через cron, как описано ранее, теперь ваш Nginx сервер будет автоматически подгружать оптимизированные файлы без необходимости менять ссылки в базе данных WordPress.

Дополнительные советы

Если вы используете кеширование, не забудьте очистить кеш после изменения конфигурации. Это особенно важно для Nginx с FastCGI Cache или других методов кеширования, чтобы новые правила начали применяться.

Теперь ваш сайт автоматически будет использовать WebP, ускоряя загрузку страниц и улучшая SEO, не требуя ручного изменения ссылок в базе данных WordPress.

Заключение

Теперь ваш WordPress-сайт готов использовать WebP и оптимизированные версии изображений. Это значительно ускорит загрузку страниц и повысит ваш PageSpeed Score, что в свою очередь, улучшит SEO.

Используйте решение, которое подходит именно вам: .htaccess, PHP-фильтры или плагины. А если у вас уже настроены cron задачи — можно расслабиться и больше не беспокоиться о размерах изображений.

P.S. Как говорят опытные WordPress разработчики: «Если можно автоматизировать — автоматизируй». А пока ваша система оптимизирует изображения каждую ночь, можно налить себе кофе и не волноваться о скорости загрузки сайта.