Resize toàn bộ hình ảnh trong website WordPress với Imsanity

Đa số website và shop online hiện tại thường upload ảnh trực tiếp từ camera hoặc điện thoại mà không qua xử lý, dẫn đến những hình ảnh có kích thước khổng lồ (thường từ 3000-6000px, dung lượng 5-15MB).

Mặc dù WordPress từ phiên bản 5.3 đã tự động scaled down ảnh lớn hơn 2560px, nhưng việc này vẫn chưa đủ để tối ưu hoàn toàn. Việc resize ảnh một cách chủ động và có kiểm soát mang lại những lợi ích quan trọng:

• Tối ưu hiệu suất website: Ảnh có kích thước nhỏ hơn giúp website tải nhanh hơn, cải thiện trải nghiệm người dùng và SEO ranking.
• Tiết kiệm dung lượng hosting: Ảnh được nén và resize sẽ giảm đáng kể dung lượng lưu trữ, giúp tiết kiệm chi phí hosting.
• Cải thiện băng thông: Ảnh nhỏ hơn giúp giảm lượng dữ liệu truyền tải, đặc biệt quan trọng với người dùng di động.
• Tự động hóa quy trình: Không cần phải resize thủ công từng ảnh trước khi upload, tiết kiệm thời gian và công sức.
• Đồng nhất kích thước: Đảm bảo tất cả ảnh trên website có kích thước phù hợp và nhất quán.

Cài đặt plugin Imsanity

Trước tiên, bạn cần cài đặt plugin Imsanity:

1. Vào Plugins > Add New trong WordPress admin
2. Tìm kiếm “Imsanity”
3. Cài đặt và kích hoạt plugin

Cấu hình Imsanity trong WordPress Admin

Truy cập cài đặt

Sau khi cài đặt, vào Settings > Imsanity để cấu hình plugin.

Các tùy chọn cấu hình chính

• Enable Imsanity: Bật/tắt chức năng resize tự động khi upload ảnh mới.
• Maximum Width/Height: Thiết lập kích thước tối đa cho ảnh. Ví dụ: 1920×1080 cho ảnh chất lượng cao nhưng vẫn tối ưu.
• JPG/PNG Quality: Thiết lập chất lượng nén (khuyến nghị 80-90 cho JPG).
• Convert BMP to JPG: Chuyển đổi ảnh BMP sang JPG để tiết kiệm dung lượng.
• Delete Originals: Xóa ảnh gốc sau khi resize (cần cân nhắc kỹ).

Cấu hình nâng cao

• Multisite Settings: Cấu hình riêng cho từng site trong mạng multisite.
• Bulk Resize: Resize hàng loạt ảnh đã upload trước đó.
• Other Images: Resize ảnh trong thư mục khác ngoài Media Library.

Sau khi cấu hình xong bạn có thể click vào Start Resizing All Images để bắt đầu resize toàn bộ image

Sử dụng WP-CLI để resize ảnh

Cài đặt WP-CLI

Nếu chưa có WP-CLI, cài đặt bằng cách dưới đây, hoặc xem chi tiết hơn tại bài viết này

curl -O https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar
chmod +x wp-cli.phar
sudo mv wp-cli.phar /usr/local/bin/wp

Các lệnh WP-CLI cho Imsanity

Resize toàn bộ ảnh tự động:

wp imsanity resize --noprompt

Resize với xác nhận:

wp imsanity resize

Resize cho multisite:

wp imsanity resize --url=https://example.com --noprompt

Resize trên server từ xa:

wp imsanity resize --ssh=user@server.com:/path/to/wordpress --noprompt

Kiểm tra trạng thái trước khi resize:

wp imsanity status

Tùy chọn nâng cao với WP-CLI

Resize với giới hạn thời gian:

timeout 3600 wp imsanity resize --noprompt

Resize và log kết quả:

wp imsanity resize --noprompt > resize_log.txt 2>&1

Resize trong background:

nohup wp imsanity resize --noprompt > resize.log 2>&1 &

Quy trình resize hàng loạt ảnh có sẵn

Bước 1: Backup dữ liệu

Trước khi resize hàng loạt, hãy backup toàn bộ website và database.

Bước 2: Cấu hình plugin

Thiết lập các thông số resize phù hợp trong Settings > Imsanity.

Bước 3: Thực hiện resize

Có thể sử dụng giao diện admin hoặc WP-CLI:

• Qua admin: Vào Settings > Imsanity > Bulk Resize, chọn “Resize All Images”.
• Qua WP-CLI: Chạy lệnh wp imsanity resize --noprompt.

Bước 4: Kiểm tra kết quả

Sau khi hoàn thành, kiểm tra:

• Kích thước file ảnh đã giảm
• Chất lượng ảnh vẫn chấp nhận được
• Website hoạt động bình thường

Tùy chỉnh Resize theo nhu cầu

Resize theo Post Type

Để resize ảnh chỉ cho post type cụ thể, bạn có thể dùng code:

add_filter('imsanity_skip_image', function($skip, $file) {
    // Lấy post_id từ request
    $post_id = isset($_REQUEST['post_id']) ? absint($_REQUEST['post_id']) : 0;

    // Nếu có post_id thì kiểm tra post type
    if ($post_id) {
        $post_type = get_post_type($post_id);

        // Danh sách post type cần bỏ qua resize
        $excluded_types = ['product', 'gallery', 'custom_type_slug'];

        if (in_array($post_type, $excluded_types, true)) {
            return true; // Bỏ qua resize
        }
    }

    // Kiểm tra đường dẫn file có chứa folder post type (phòng trường hợp không có post_id)
    if (isset($_SERVER['HTTP_REFERER'])) {
        $referer = $_SERVER['HTTP_REFERER'];
        $excluded_patterns = ['post_type=product', 'post_type=gallery', 'custom_type_slug'];
        foreach ($excluded_patterns as $pattern) {
            if (strpos($referer, $pattern) !== false) {
                return true;
            }
        }
    }

    return $skip;
}, 10, 2);

• $_REQUEST['post_id'] được lấy khi upload ảnh trong post editor.
• get_post_type() sẽ trả về post type của bài viết chứa ảnh.
• $_SERVER['HTTP_REFERER'] là phương án dự phòng khi post_id không tồn tại (ví dụ ảnh được upload trực tiếp qua media library nhưng từ trang edit.php?post_type=...).

Lưu ý quan trọng

Backup trước khi resize: Luôn backup trước khi thực hiện resize hàng loạt.

Test trên staging: Thử nghiệm trên môi trường staging trước khi áp dụng lên production.

Giám sát hiệu suất: Theo dõi tác động của việc resize đến hiệu suất website.

Cấu hình phù hợp: Điều chỉnh kích thước và chất lượng phù hợp với nhu cầu website.

Việc sử dụng Imsanity kết hợp với WP-CLI sẽ giúp bạn quản lý ảnh hiệu quả, tối ưu hiệu suất website và tiết kiệm tài nguyên hosting một cách tự động và chuyên nghiệp.