Cloudflare Image Transformations - Đổi Kích Thước Và Tối Ưu Ngay Tức Thì

Nếu Cloudflare Images là nơi hình ảnh của bạn cư ngụ, thì Cloudflare Image Transformations là động cơ giúp chúng nhanh. Nó đổi kích thước, nén và chuyển hình ảnh của bạn sang các định dạng hiện đại ngay khi chúng được yêu cầu, chỉ dùng bản gốc mà bạn đã có. Không cần bước build, không cần thumbnail tạo sẵn, không có các bản sao riêng làm bừa bộn kho lưu trữ của bạn. Bạn yêu cầu kích thước và định dạng mong muốn trong URL, và Cloudflare tạo ra nó tại biên rồi lưu vào bộ nhớ đệm.

Hướng dẫn này là người bạn đồng hành thực hành cho bài tổng quan của tôi về lưu trữ hình ảnh trên Cloudflare. Nó giải thích hai cách chạy biến đổi, những tham số quan trọng, chi phí năm 2026, và cách tự động hóa toàn bộ trên WordPress và PrestaShop.

Tóm tắt

• Biến đổi đổi kích thước, nén và chuyển hình ảnh sang WebP/AVIF theo yêu cầu, từ một bản gốc duy nhất
• Hai phương pháp: một định dạng URL đơn giản (/cdn-cgi/image/...) và một Cloudflare Worker để kiểm soát hoàn toàn
• format=auto tự động phân phối AVIF hoặc WebP tùy theo trình duyệt hỗ trợ điều gì
• Giá hào phóng: 5.000 lượt biến đổi duy nhất đầu tiên mỗi tháng là miễn phí, rồi 0,50 USD cho mỗi 1.000
• Biến đổi không còn yêu cầu gói Pro, một thay đổi đáng kể so với những năm trước
• Bạn có thể biến đổi hình ảnh từ nguồn gốc của mình hoặc từ Cloudflare R2 , và tự động hóa tất cả với plugin và Worker miễn phí của tôi

Cloudflare Image Transformations hoạt động thế nào

Theo cách truyền thống, việc phân phối hình ảnh đáp ứng nghĩa là tạo sẵn mọi kích thước trước. Bạn tải lên một bức ảnh, và CMS của bạn sẽ tạo một thumbnail, một phiên bản trung bình, một phiên bản lớn và cứ thế, mỗi cái được lưu thành một tệp riêng. Điều này lãng phí kho lưu trữ, làm chậm việc tải lên, và vẫn không bao giờ khớp chính xác với kích thước mà một thiết bị cụ thể cần.

Biến đổi hình ảnh lật ngược điều này. Bạn lưu một bản gốc. Khi trình duyệt của một khách truy cập yêu cầu một kích thước cụ thể, Cloudflare tạo kích thước đó ngay tức thì, tối ưu nó, và lưu kết quả vào bộ nhớ đệm tại biên. Khách truy cập tiếp theo cần cùng phiên bản đó nhận được bản sao trong bộ nhớ đệm ngay lập tức. Bạn không bao giờ tự tạo hay lưu một bản dẫn xuất, vậy mà mọi thiết bị đều nhận được một hình ảnh phù hợp với màn hình và khả năng hỗ trợ định dạng của nó.

Kết quả cho khách truy cập của bạn: một bức ảnh 1 MB đến dưới dạng AVIF 100 đến 200 KB, có kích thước vừa khít với khung nhìn của họ, được phân phối từ một vị trí biên gần đó.

Phương pháp 1: biến đổi hình ảnh qua định dạng URL

Cách đơn giản nhất để biến đổi một hình ảnh là bọc URL của nó trong một đường dẫn đặc biệt trên vùng (zone) của chính bạn:

1https://example.com/cdn-cgi/image/<options>/<source-image-url>

Một ví dụ thực tế đổi kích thước về 800px chiều rộng, đặt chất lượng là 75 và tự động chọn định dạng tốt nhất:

1https://example.com/cdn-cgi/image/width=800,quality=75,format=auto/https://example.com/uploads/photo.jpg

Để dùng cái này, hãy bật Transformations cho vùng của bạn trong bảng điều khiển Cloudflare (dưới mục Images). Sau khi bật, bất kỳ hình ảnh nào trên vùng đó đều có thể được biến đổi chỉ bằng cách dựng URL. Đây là cách nhanh nhất để bắt đầu và không cần mã.

Các tùy chọn hữu ích nhất là:

Phương pháp 2: biến đổi hình ảnh qua một Cloudflare Worker

Để kiểm soát thực sự, bạn biến đổi bên trong một Cloudflare Worker bằng thuộc tính cf.image trên một yêu cầu fetch. Điều này cho phép bạn áp dụng logic: chọn kích thước dựa trên thiết bị, giới hạn những hình ảnh nào có thể được biến đổi, hoặc viết lại các liên kết hình ảnh của cả một trang.

 1export default {
 2  async fetch(request) {
 3    const options = {
 4      cf: {
 5        image: {
 6          width: 800,
 7          quality: 75,
 8          format: "auto",
 9          fit: "scale-down",
10        },
11      },
12    };
13
14    // The image you want to transform
15    const imageURL = "https://example.com/uploads/photo.jpg";
16    return fetch(imageURL, options);
17  },
18};

Cách tiếp cận Worker chính là thứ vận hành công cụ riêng của tôi, vì nó có thể viết lại đầu ra HTML cuối cùng của một site, bao gồm cả hình ảnh được chèn bởi theme, plugin, và thậm chí CSS nội tuyến, điều mà cách chỉ dùng URL không thể tự mình chạm tới. Nếu bạn muốn học Workers rộng hơn, tài liệu Workers chính thức là một điểm khởi đầu tuyệt vời.

Biến đổi hình ảnh từ R2 hoặc nguồn từ xa

Bạn không bị giới hạn ở hình ảnh trên cùng một vùng. Biến đổi có thể kéo từ một nguồn gốc từ xa, khiến chúng trở thành đối tác hoàn hảo cho lưu trữ đối tượng Cloudflare R2 . Giữ bản gốc trong một bucket R2, biến đổi chúng khi phân phối, và không trả gì cho egress vì R2 không tính phí egress. Tôi trình bày chi tiết mẫu cụ thể này trong hướng dẫn về lưu trữ hình ảnh trên Cloudflare R2 .

Khi biến đổi hình ảnh không nằm trên vùng của chính bạn, hãy nhớ cho phép tên miền nguồn trong cài đặt biến đổi của bạn, nếu không Cloudflare sẽ từ chối lấy chúng.

Giá Cloudflare Image Transformations

Kinh tế ở đây rất thân thiện, đặc biệt với các site nhỏ và vừa. Dựa trên bảng giá Images chính thức cho năm 2026:

Một “lượt biến đổi duy nhất” là một tổ hợp tùy chọn riêng biệt áp dụng cho một hình ảnh gốc trong một tháng. Yêu cầu cùng phiên bản width=800,format=auto của một bức ảnh một nghìn lần vẫn được tính là một lượt biến đổi duy nhất, vì 999 lần còn lại được phục vụ từ bộ nhớ đệm. Đó là lý do số lượt biến đổi thực tế vẫn thấp ngay cả trên các site bận rộn: bạn có ít tổ hợp hình ảnh-và-kích thước riêng biệt hơn nhiều so với số lượt xem trang.

Thay đổi lớn đáng nhắc lại: biến đổi trước đây nằm sau một gói Pro trả phí. Giờ chúng có sẵn trên gói miễn phí, lên đến hạn mức 5.000 hằng tháng đó. Với một blog nhỏ hoặc một portfolio, tối ưu hình ảnh tức thì giờ thực tế là miễn phí.

Tự động hóa trên WordPress và PrestaShop

Dựng URL biến đổi bằng tay thì ổn với vài hình ảnh, nhưng một site thực có hàng trăm, và chúng được tạo động. Đó là phần khó, và đó chính xác là điều mà các công cụ miễn phí của tôi giải quyết.

• Plugin WordPress. Plugin Cloudflare Image Resizing của tôi (GitHub ) viết lại các liên kết hình ảnh của bạn để chúng tự động đi qua biến đổi.
• Cloudflare Worker. Cloudflare Image Resizing Worker của tôi viết lại HTML cuối cùng để phủ kín hoàn toàn, bao gồm cả hình ảnh được chèn bởi plugin và theme và hình ảnh được tham chiếu bên trong CSS.

Để có hướng dẫn đầy đủ, sao-chép-và-dán, hãy đọc Cloudflare Image Resizing cho WordPress và Cloudflare Image Resizing cho PrestaShop . Giữa plugin và Worker, mọi hình ảnh trên site của bạn cuối cùng được tối ưu mà bạn không phải chạm vào một template nào.

Nếu bạn thích lưu trữ và quản lý thư viện hình ảnh trực tiếp qua sản phẩm Cloudflare Images, Easy Cloudflare Images là ứng dụng máy tính miễn phí của tôi để tải lên và tối ưu hình ảnh trên Windows, macOS và Linux.

Một bài kiểm tra trước-và-sau nhanh

Cách trung thực để đánh giá bất kỳ tối ưu nào là đo lường nó.

1. Chọn một trang nhiều hình ảnh và chạy nó qua PageSpeed Insights . Ghi lại Largest Contentful Paint và tổng dung lượng hình ảnh.
2. Bật biến đổi và áp dụng width và format=auto cho hình ảnh của trang đó (qua phương pháp URL, Worker, hoặc plugin của tôi).
3. Chạy lại bài kiểm tra. Bạn sẽ thấy tải trọng hình ảnh giảm mạnh và LCP cải thiện, thường chuyển một điểm số không đạt sang màu xanh.

Sự cải thiện đo được đó chính là điều thường tạo khác biệt cho cả trải nghiệm người dùng lẫn thứ hạng tìm kiếm.

Những điểm chính

• Cloudflare Image Transformations tạo ra hình ảnh đã tối ưu, đúng kích thước, theo yêu cầu, từ một bản gốc duy nhất
• Phương pháp URL (/cdn-cgi/image/...) là khởi đầu nhanh nhất; một Worker cho bạn quyền kiểm soát lập trình hoàn toàn
• format=auto lo việc thương lượng AVIF/WebP thay cho bạn, với một phương án dự phòng an toàn cho trình duyệt cũ hơn
• 5.000 lượt biến đổi duy nhất đầu tiên mỗi tháng là miễn phí, rồi 0,50 USD cho 1.000, không phí egress
• Biến đổi giờ hoạt động trên gói miễn phí, không cần đăng ký Pro
• Kết hợp biến đổi với R2 để có một thư viện media không egress, và tự động hóa mọi thứ với plugin và Worker của tôi

Câu hỏi thường gặp

Khác biệt giữa Cloudflare Images và Image Transformations là gì? Cloudflare Images là sản phẩm rộng hơn, lưu trữ, tối ưu và phân phối hình ảnh. Image Transformations là khả năng đổi kích thước và tối ưu bên trong nó. Bạn có thể dùng biến đổi trên hình ảnh được lưu trong Cloudflare Images, trong R2, hoặc trên nguồn gốc của riêng bạn, mà không nhất thiết phải lưu chúng trong sản phẩm Images.

Tôi có cần gói trả phí để dùng biến đổi hình ảnh không? Không, không còn nữa. Biến đổi có sẵn trên gói miễn phí lên đến 5.000 lượt biến đổi duy nhất mỗi tháng. Vượt mức đó, bạn trả 0,50 USD cho 1.000, và không có phí egress.

format=auto làm gì? Nó bảo Cloudflare kiểm tra header Accept của trình duyệt và phân phối định dạng hiệu quả nhất mà nó hỗ trợ, thường là AVIF hoặc WebP, và quay về định dạng gốc (như JPEG hoặc PNG) cho các trình duyệt không hỗ trợ định dạng hiện đại.

Tôi có thể biến đổi hình ảnh không được lưu trên Cloudflare không? Có. Biến đổi có thể lấy từ một nguồn gốc từ xa, bao gồm một bucket Cloudflare R2 hoặc một máy chủ bên ngoài, miễn là bạn cho phép nguồn đó trong cài đặt biến đổi của mình.

Điều gì được tính là một lượt biến đổi duy nhất cho việc tính phí? Một tổ hợp tùy chọn riêng biệt áp dụng cho một hình ảnh gốc trong một tháng tính phí. Các yêu cầu lặp lại cho cùng phiên bản đã biến đổi được phục vụ từ bộ nhớ đệm và chỉ được tính một lần, giữ cho chi phí thực tế thấp.

Làm thế nào để áp dụng điều này trên toàn bộ một site WordPress hoặc PrestaShop? Dùng plugin WordPress miễn phí của tôi để thiết lập tự động nhanh, hoặc triển khai Cloudflare Worker của tôi để phủ kín hoàn toàn, viết lại mọi liên kết hình ảnh, bao gồm cả những liên kết trong CSS. Cả hai đều được ghi tài liệu trong các hướng dẫn từng bước theo nền tảng của tôi.