Автоматичне перетворення зображень у WebP під час завантаження у WordPress

Оптимізація зображень — важливий етап прискорення завантаження сайту та підвищення його позицій у пошуковій видачі. Один з ефективних способів досягти цього — автоматичне перетворення зображень у формат WebP під час завантаження у WordPress. Нижче розглянемо, як працює цей механізм і які переваги він дає.

Як працює перетворення зображень у WebP під час завантаження?

Для автоматичного перетворення використовується фільтр wp_handle_upload, який перехоплює завантажувані зображення та перетворює їх у формат WebP за допомогою бібліотек ImageMagick або GD.

Основні етапи роботи коду:

• Перевірка типу файлу (JPEG, PNG, GIF);
• Використання wp_get_image_editor() для редагування;
• Збереження зображення у форматі WebP;
• Заміна шляху та URL на новий WebP-файл;
• Видалення оригіналу (JPEG/PNG/GIF).

add_filter( 'wp_handle_upload', 'wpturbo_handle_upload_convert_to_webp' );
 
function wpturbo_handle_upload_convert_to_webp( $upload ) {
    if ( $upload['type'] == 'image/jpeg' || $upload['type'] == 'image/png' || $upload['type'] == 'image/gif' ) {
        $file_path = $upload['file'];
 
        // Check if ImageMagick or GD is available
        if ( extension_loaded( 'imagick' ) || extension_loaded( 'gd' ) ) {
            $image_editor = wp_get_image_editor( $file_path );
            if ( ! is_wp_error( $image_editor ) ) {
                $file_info = pathinfo( $file_path );
                $dirname   = $file_info['dirname'];
                $filename  = $file_info['filename'];
 
                // Create a new file path for the WebP image
                $new_file_path = $dirname . '/' . $filename . '.webp';
 
                // Attempt to save the image in WebP format
                $saved_image = $image_editor->save( $new_file_path, 'image/webp' );
                if ( ! is_wp_error( $saved_image ) && file_exists( $saved_image['path'] ) ) {
                    // Success: replace the uploaded image with the WebP image
                    $upload['file'] = $saved_image['path'];
                    $upload['url']  = str_replace( basename( $upload['url'] ), basename( $saved_image['path'] ), $upload['url'] );
                    $upload['type'] = 'image/webp';
 
                    // Optionally remove the original image
                    @unlink( $file_path );
                }
            }
        }
    }
 
    return $upload;
}

Переваги використання WebP на сайті

WebP — сучасний формат зображень від Google, який забезпечує більший ступінь стиснення без втрати якості.

Переваги:

• Зменшення розміру файлів на 25-35%;
• Швидке завантаження сторінок;
• Покращення показників Core Web Vitals;
• Підтримка анімації (альтернатива GIF);
• SEO-ефект: пришвидшення сайту сприяє зростанню позицій.

Чому варто реалізувати автоматичне перетворення?

Ручне перетворення займає багато часу. Цей підхід:

• Працює на рівні завантаження в адмінці WordPress;
• Не потребує додаткових плагінів;
• Підтримує базові формати (JPEG, PNG, GIF);
• Сумісний із популярними бібліотеками обробки зображень.

Технічні вимоги для роботи

Як впровадити на свій сайт

• Відкрийте файл functions.php вашої теми;

• Вставте наведений код;

• Переконайтесь, що на сервері активований ImageMagick або GD;
• Завантажте зображення через адмінку WordPress і перевірте результат.

Висновок

Впровадження автоматичного перетворення зображень у WebP — це простий та ефективний спосіб покращити швидкість сайту й підвищити його SEO. Код, наведений вище, дозволяє реалізувати цю функцію без додаткових плагінів і навантаження на сервер.