Как изменить размер и оптимизировать изображения в WordPress без плагинов

Работа с изображениями — одна из частых задач при создании и поддержке сайтов на WordPress. Часто возникает необходимость изменить размер загружаемых изображений и оптимизировать их для быстрой загрузки сайта. В этой статье мы подробно разберем, как сделать это без использования плагинов, используя только возможности WordPress и собственный код.

Почему важно изменять размер и оптимизировать изображения в WordPress

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

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

Добавление собственных размеров изображений в WordPress

Для добавления нового размера изображения используется функция add_image_size(). Лучше делать это в файле functions.php вашей темы или в плагине темы.

function wpteam_add_custom_image_sizes() {
    add_image_size('wpteam-small-thumb', 150, 150, true); // Кроп с обрезкой
    add_image_size('wpteam-large', 1024, 768, false); // Пропорциональное изменение размера
}
add_action('after_setup_theme', 'wpteam_add_custom_image_sizes');

Параметры функции:

• 150 и 150 — ширина и высота в пикселях;
• true — обрезать изображение по центру до точных размеров;
• false — изменить размер пропорционально, не обрезая.

После добавления нового размера нужно пересоздать миниатюры для уже загруженных изображений, иначе новые размеры не появятся. Для этого можно использовать плагин Regenerate Thumbnails или через WP CLI.

Оптимизация изображений при загрузке с помощью фильтров WordPress

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

function wpteam_set_jpeg_quality($quality) {
    return 75; // Уменьшаем качество до 75% для баланса качества и размера
}
add_filter('wp_editor_set_quality', 'wpteam_set_jpeg_quality');

Это простое изменение позволяет значительно уменьшить размер файлов без заметной потери качества на большинстве изображений.

Пример конвертации PNG в JPEG при загрузке

Для дополнительной оптимизации можно конвертировать PNG-изображения в JPEG, если они не содержат прозрачности. Это требует перехвата процесса загрузки и обработки файлов.

function wpteam_convert_png_to_jpeg($file) {
    $image_type = $file['type'];
    if ($image_type === 'image/png') {
        $image = imagecreatefrompng($file['tmp_name']);
        if (!$image) return $file;

        $jpeg_path = $file['tmp_name'] . '.jpg';
        imagejpeg($image, $jpeg_path, 75); // Качество 75
        imagedestroy($image);

        // Заменяем данные файла на JPEG
        $file['tmp_name'] = $jpeg_path;
        $file['type'] = 'image/jpeg';
        $file['name'] = preg_replace('/\.png$/i', '.jpg', $file['name']);
    }
    return $file;
}
add_filter('wp_handle_upload_prefilter', 'wpteam_convert_png_to_jpeg');

Этот код конвертирует PNG в JPEG при загрузке, если PNG не содержит прозрачности (прозрачность не проверяется в этом простом примере, для продакшена стоит добавить проверку). Это позволит уменьшить размер изображений на сайте.

Использование функции для вывода изображений нужного размера

Чтобы вывести в шаблоне изображения с нужным размером, используем функцию wp_get_attachment_image() или the_post_thumbnail() с указанием имя размера.

if (has_post_thumbnail()) {
    the_post_thumbnail('wpteam-small-thumb');
}

Или с дополнительными атрибутами:

echo wp_get_attachment_image(get_post_thumbnail_id(), 'wpteam-large', false, array(
    'class' => 'custom-class',
    'alt' => get_the_title()
));

Дополнительные советы по оптимизации изображений без плагинов

Оптимизация перед загрузкой

Перед загрузкой изображений стоит их оптимизировать в графических редакторах (Photoshop, GIMP) или онлайн-сервисах. Это уменьшит нагрузку на сервер и ускорит загрузку.

Lazy Loading через атрибут loading

Начиная с WordPress 5.5, встроена поддержка ленивой загрузки изображений с помощью атрибута loading="lazy". Чтобы убедиться, что все изображения на сайте лениво загружаются, можно дополнительно фильтровать вывод:

function wpteam_add_lazy_loading($content) {
    return preg_replace('/<img(.*?)>/', '<img loading="lazy"$1>', $content);
}
add_filter('the_content', 'wpteam_add_lazy_loading');

Это улучшит скорость загрузки страниц за счет отложенной загрузки изображений, которые не видны сразу.

Удаление ненужных размеров изображений

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

function wpteam_remove_unused_image_sizes() {
    remove_image_size('medium_large');
    remove_image_size('1536x1536');
}
add_action('init', 'wpteam_remove_unused_image_sizes');

Это позволит уменьшить количество файлов и упростить управление медиа.

Заключение по теме оптимизации и изменения размеров изображений в WordPress без плагинов

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