Custom domain cho Cloudinary trên WordPress

Đây là cấu hình liên quan tới xử lý ảnh mà mình đang khá hài lòng, gần như miễn phí, có thể áp dụng trên mọi nền tảng (Jetpack Photon chỉ cho chạy trên WordPress) link ảnh đẹp, sạch sẽ, các ảnh được xử lý tạo thumbail, nén ảnh ….. qua các công nghệ hàng đầu từ Cloudinary, tốc độ load ảnh rất gần với load trực tiếp từ localhost, trong trường hợp trang có lượng truy cập cực lớn, hoặc khách ở nhiều nơi trên thế giới, có thể chuyển sang dùng Cloudflare cache để tận dụng CDN tốt hơn

Các bước tuần tự như sau

Cloudinary khả năng nén, tối ưu hóa bằng các công nghệ liên quan tới ảnh cực kì mạnh, rất nhiều công ty lớn sử dụng dịch vụ của họ

Trong tất cả các plugin, dịch vụ về ảnh mình từng dùng, Cloudinary cho ra dung lượng nhỏ nhất mà chất lượng gần như không thay đổi, tùy biến siêu nhiều, nếu thích có thể giảm dung lượng xuống rất nhỏ mà chất lượng chỉ thay đổi chút ít

Ngoài chuyện hỗ trợ định dạng AVIF rất mới, họ còn bóc tách, xem nội dung tấm ảnh, biết ảnh chụp cái gì, người, động vật hay cây cối, vật thể  (khá giống google images, facebook), nên khi sử dụng các tùy chọn biến thể ảnh, nó có thể tạo thumbnail chính xác hơn tới đối tượng bạn mong muốn

Cloudinary sẽ hiệu quả hơn nếu bạn làm các shop bán hàng, ảnh thumbnail sẽ hiện, zoom chính xác hơn vào chủ thể, trên các blog cơ bản kiểu thèng bibica.net, thumbnail đa phần chỉ là làm nhỏ lại tấm ảnh, các ưu điểm mạnh của Cloudinary gần như không dùng tới, khá là phí :]]

Thứ duy nhất mình có thể phàn nàn về Cloudinary là vấn đề CDN, dù họ dùng tới 3-4 dịch vụ CDN khác nhau ( Akamai, Fastly, Cloudflare), nhưng đôi khi, ở Việt Nam truy cập các ảnh từ Cloudinary khá chậm

Đăng kí tài khoản Cloudinary

Tạo tài khoản Cloudinary miễn phí, tại phần Account sẽ thấy Cloud Name của tài khoản (có thể ấn edit để đổi sang 1 tên dễ nhớ)

Sau đó đi tới Upload, tạo Auto upload mapping

• Folder: đặt tên tùy ý, chủ yếu để nhớ
• URL prefix: điền đường dẫn tới thư mục uploads trên WordPress

Các ảnh thông thường sẽ có url là:

https://bibica.net/wp-content/uploads/2023/09/2023-09-25-10-27-33.png

Sau khi tạo Auto upload mapping, Cloudinary sẽ có url là:

https://res.cloudinary.com/xinclub/f_webp,q_auto,dpr_auto/img/2023/09/2023-09-25-10-27-33.png

Trong đó xinclub là Cloud Name, img là Folders bạn vừa chọn, giữa 2 giá trị này là các giá trị f_webp,q_auto,dpr_auto,w_500,h_300 … để tùy biến ảnh, tùy bạn đưa vào

Cloudinary cho phép tạo rất nhiều các auto upload mapping khác nhau, bạn có thể tạo thêm nhiều folder cho các ảnh từ Gravatar, Github ….

Custom domain và cache qua Webinoly Reverse Proxy FastCgi Cache

File cấu hình như bên dưới

# REVERSE PROXY NGINX CONFIGURATION by Webinoly

location / {
    proxy_set_header Connection "";
    proxy_http_version 1.1;

    # WebinolyProxyCacheStart
    proxy_cache img_bibica_net;
    proxy_cache_key "$scheme$request_method$host$request_uri";
    
    proxy_cache_valid 200 10y;
    proxy_cache_valid 301 302 303 307 308 404 410 451 1m;
    proxy_cache_use_stale error timeout invalid_header updating http_500 http_502 http_503 http_504;
    proxy_cache_background_update on;
    proxy_cache_lock on;
    proxy_buffer_size 16k;
    proxy_buffers 16 16k;
    
    set $skip_cache_img_bibica_net 0;
    include apps.d/img.bibica.net*site_custom_cache.conf;
    proxy_cache_bypass $skip_cache_img_bibica_net;
    proxy_no_cache $skip_cache_img_bibica_net;
    # WebinolyProxyCacheEnd
    proxy_connect_timeout 300;
    proxy_send_timeout    300;
    proxy_read_timeout    300;
    proxy_ignore_headers   Set-Cookie;
    proxy_intercept_errors on;
    #proxy_next_upstream error timeout http_500;
    
    # Upstream defined here: conf.d/upstream_proxy.conf
    proxy_pass https://res.cloudinary.com/xinclub/f_webp,q_auto:best/img/;
        
}

location /auto/ {
    proxy_set_header Connection "";
    proxy_http_version 1.1;

    # WebinolyProxyCacheStart
    proxy_cache img_bibica_net;
    proxy_cache_key "$scheme$request_method$host$request_uri";
    
    proxy_cache_valid 200 10y;
    proxy_cache_valid 301 302 303 307 308 404 410 451 1m;
    proxy_cache_use_stale error timeout invalid_header updating http_500 http_502 http_503 http_504;
    proxy_cache_background_update on;
    proxy_cache_lock on;
    proxy_buffer_size 16k;
    proxy_buffers 16 16k;
    
    set $skip_cache_img_bibica_net 0;
    include apps.d/img.bibica.net*site_custom_cache.conf;
    proxy_cache_bypass $skip_cache_img_bibica_net;
    proxy_no_cache $skip_cache_img_bibica_net;
    # WebinolyProxyCacheEnd
    proxy_connect_timeout 300;
    proxy_send_timeout    300;
    proxy_read_timeout    300;
    proxy_ignore_headers   Set-Cookie;
    proxy_intercept_errors on;
    #proxy_next_upstream error timeout http_500;
    
    # Upstream defined here: conf.d/upstream_proxy.conf
    proxy_pass https://res.cloudinary.com/xinclub/w_500,f_webp,q_auto:best/img/;
        
}

Link custom là img.bibica.net

Hiện tại thì mình dùng 2 kích thước, 1 là chiều rộng 500 px cho ảnh thumbnail, còn lại là giữ nguyên kích thước gốc

• w_500 là vị trí thumbnail -> đường dẫn img/bibica.net/auto/ (chất lượng ảnh dùng auto best)
• Ở ảnh full thì giữ nguyên kích thước gốc, đường dẫn img.bibica.net (chất lượng ảnh dùng auto best)

Các tùy biến ảnh như 500,f_webp,q_auto:best, Cloud Name và Folder images đều đã được ẩn hoàn toàn, link đã ngắn gọn và sạch sẽ hết sức có thể

• Ảnh thực tiếp từ WordPress ban đầu là: https://img.bibica.net/2023/09/2023-09-25-10-27-33.png
• Link sau khi được Cloudinary xử lý và Reverse Proxy https://img.bibica.net/2023/09/2023-09-25-10-27-33.png
• Trong trường hợp muốn dùng ảnh có chiều rộng tối đa 500px, thêm /auto/ vào sau domain: https://img.bibica.net/auto/2023/09/2023-09-25-10-27-33.png

Bạn có thể thêm các tùy biến ảnh khác nhau, tùy vào sở thích, mình đang dùng 2 tùy chọn là /f_webp/q_auto:best/ ảnh nén về .webp và chất lượng ảnh tốt nhất có thể, kể cả ảnh thumbnail

Nếu thích hoặc đú đởn, có thể dùng trực tiếp custom domain các link Cloudinary lên chính domain gốc bibica.net, nhìn link ảnh là hú hồn con chồn, vì cứ tưởng ảnh gốc là để trên host 😀 có điều tách ra 1 domain phụ làm link ảnh cho dễ quản lý và cấu hình, chung hết 1 domain nhìn chằng chịt lắm 😛

Set ảnh vào các vị trí phù hợp

Sử dụng Code Snippets tạo 1 file php với nội dung:

 function cloudinary_photon_custom($attr, $attachment, $size) {
     
$image_id   = get_post_thumbnail_id();
$image_meta = wp_get_attachment_metadata( $image_id );
$image_path = get_attached_file( $image_id );
     
     if ($size === 'thumbnail') {
         $attr['src'] = "https://img.bibica.net/auto/".$image_meta['file'];
     } 
   else if ($size === 'large') {
        $attr['src'] = "https://img.bibica.net/w_768/".$image_meta['file'];
    }
 
     return $attr;
 }
 add_filter('wp_get_attachment_image_attributes', 'cloudinary_photon_custom', 999 , 3);

Đoạn code này mình làm thủ công, đó là cứ ảnh size thumbnail thì đập thẳng luôn link https://img.bibica.net/auto/ vào 😀 sau đó nối với thư mục và tên file

Nếu bạn dùng nhiều định dạng hơn thì cứ thêm vào

Khắc phục tạm lỗi trên thì ở vị trí thumbnail, featured image, để tránh việc trùng tên với các album trước đây tạo, ở vị trí đó mình set dùng ảnh medium hay 1 tên mới tùy ý chưa dùng là được

Ban đầu tính nhờ tay bạn già Vượng Nguyễn viết hộ phần này, mà thấy hắn cũng bận, nên thôi, cứ google loạn hết cả lên, xong cắt dán đủ kiểu, không hiểu sao cuối cùng cũng có chạy :]] bạn nào rành code chắc chỉ cần 5 phút là viết xong với xử lý tốt cái lỗi mình nói ở trên rồi

Lúc này, chúng ta đã xử lý cơ bản các ảnh ở các vị trí thumbnail và featured image

Về các ảnh trong nội dung bài viết có thể dùng Lucas String Replace, để tìm và thay thế các link, mình thì để tăng trải nghiệm xem bài, các ảnh bên trong nội dung bài viết, giữ nguyên ảnh gốc, nên chỉ cần đổi img.bibica.net/ sang img.bibica.net/ là xong

Hiệu quả?

Cấu hình cho bài này, nó chỉ hiệu quả, nếu bạn dùng location Việt Nam mà muốn ảnh được xử lý thông qua Cloudinary, cần dùng thêm FastCgi Cache

Link ảnh rất gọn cũng có thể là 1 ưu điểm 😀 nếu bạn nào làm theo bài này, gần như không ai biết là đang dùng Cloudinary để nén ảnh, tạo thumbnail, vì các thông tin bị ẩn đi sạch sẽ

Sử dụng Auto upload mapping, có một ưu điểm nhỏ, các ảnh sẽ được kéo về Cloudinary với cấu trúc thư mục tương tự trên WordPress, trong trường hợp bạn xóa nhầm ảnh, vẫn còn 1 nơi để sơ cua

Cách này cũng có thêm 1 ưu điểm, bạn có thể set chính xác các tùy biến vào vị trí mình mong muốn, ví dụ ở ảnh thumbnail, có thể giảm chất lượng ảnh, chọn các tỷ lệ cắt, zoom khác nhau …. các plugin khác đa phần áp dụng cùng 1 bộ lọc cho tất cả vị trí

Quy đổi 1 cách chính xác thì với Cloudinary miễn phí, bạn có thể có 100 credit, điểm này có thể quy đổi ra 100GB bandwidth, 100GB storage hoặc 100.000 lượt chuyển đổi mỗi tháng

Cấu hình như trong bài, gần như Cloudinary chỉ sử dụng khi bạn vừa upload ảnh lên, lưu file vào server của Cloudinary sau đó chuyển đổi định dạng, 1 tấm ảnh khoảng 200-300kb …. các con số gần như không đáng kể

Bạn có thể dùng 20 credit miễn phí ban đầu, trong trường hợp ảnh nhiều quá, thì share sang Twitter, Facebook, cho bạn bè vào đăng kí thành viên để lấy thêm credit

Kết luận:

Hiện tại mình đang sử dụng chính xác cấu hình Cloudinary trong bài này cho mọi bức ảnh bạn thấy trên trang bibica.net 😀

Có thử dùng nhiều công nghệ nén ảnh khác nhau từ nhiều dịch vụ, thử vài dịch vụ CDN khác, có hỗ trợ location Việt Nam …. đều cảm thấy không hiệu quả bằng cấu hình như bài này, chắc đây cũng là bài cấu hình cuối cùng liên quan tới xử lý ảnh trên thèng bibica.net, tại không có hình thức nào tối ưu hơn nữa

Mình đang bỏ dần Jetpack Photon để chuyển sang Cloudinary, lý do chính nhất vì nó phù hợp với cách cấu hình FastCgi Cache ở bài này, trên Jetpack, đôi khi tấm ảnh cứ bị MISS cache sau 1 thời gian sử dụng 😛