Website WordPress nào rồi cũng gặp cùng một vấn đề. Ảnh là thứ nặng nhất trên trang, biên tập viên tải lên đúng thứ máy ảnh xuất ra, và điểm mobile phải chịu hậu quả. Câu trả lời quen thuộc là cài một plugin tối ưu ảnh, và các ứng viên quen thuộc là Smush, ShortPixel và Imagify.

Có một cách tiếp cận thứ hai hoạt động khác hẳn, và phép so sánh hiếm khi được làm công bằng vì đây không phải sản phẩm tương đương. Cloudflare Image Transformations không nén ảnh của bạn rồi lưu kết quả. Nó viết lại ảnh ngay tại thời điểm ảnh được yêu cầu. Hiểu được khác biệt đó đã là phần lớn của quyết định.

Điểm phân biệt quyết định: các plugin xử lý và lưu bản sao đã tối ưu của ảnh bạn. Cloudflare biến đổi theo yêu cầu và lưu kết quả ở biên. Plugin tính tiền theo số ảnh bạn sở hữu. Cloudflare tính tiền theo số biến thể riêng biệt bạn phục vụ. Hai mô hình này hợp với những website rất khác nhau.

Hai cách tiếp cận khác nhau ở đâu

Một plugin tối ưu truyền thống làm việc trên thư viện media. Nó lấy từng ảnh bạn tải lên, gửi tới máy chủ của nhà cung cấp hoặc xử lý cục bộ, nén lại, rồi ghi kết quả trở lại. Thư viện của bạn cuối cùng chứa các file đã tối ưu, thường ở nhiều kích thước. Việc xử lý diễn ra một lần, lúc tải lên hoặc trong một lượt chạy hàng loạt, và kết quả nằm trên origin của bạn.

Biến đổi ảnh đảo ngược điều đó. Bản gốc của bạn không bị đụng tới. Khi khách yêu cầu một ảnh, yêu cầu đi qua Cloudflare, nơi ảnh được đổi kích thước và chuyển định dạng trên đường đi rồi kết quả được lưu đệm. Không có gì được ghi ngược vào thư viện, và bạn có thể đổi kích thước phục vụ bất cứ lúc nào bằng cách sửa một URL thay vì xử lý lại cả thư viện.

Điều này có một hệ quả thực tế mà nhiều người phát hiện muộn. Với plugin, nếu sang năm bạn quyết định ảnh thu nhỏ phải có kích thước khác, bạn phải tạo lại toàn bộ thư viện. Với biến đổi ảnh, bạn sửa một tham số.

Gói miễn phí mỗi bên thực sự cho gì

Đây là chỗ phép so sánh trở nên cụ thể, và cũng là chỗ các trang tiếp thị ít giúp ích nhất.

Smush, của WPMU DEV, có hơn một triệu lượt cài đặt đang hoạt động. Gói miễn phí có nén không mất dữ liệu và có mất dữ liệu, tối ưu hàng loạt và tải trễ. Những giới hạn cần biết: ảnh trên năm megabyte bị bỏ qua hoàn toàn, và thứ phần lớn người dùng thực sự muốn, tức chuyển đổi WebP và AVIF, phân phối qua CDN và tự động đổi kích thước, đều là tính năng Pro. Bản miễn phí là công cụ nén, không phải một dây chuyền định dạng hiện đại.

ShortPixel có hơn ba trăm nghìn lượt cài và dùng mô hình tín dụng. Một tín dụng cho mỗi ảnh hoặc ảnh thu nhỏ được xử lý, với một trăm tín dụng miễn phí mỗi tháng. Nghe có vẻ hào phóng cho đến khi bạn nhớ rằng WordPress tạo nhiều kích thước thu nhỏ cho mỗi lần tải lên, nên một bức ảnh có thể tiêu bốn hoặc năm tín dụng. Tín dụng không giới hạn hằng tháng là 9,99 đô la, còn gói mua một lần bắt đầu từ 19,99 đô la. WebP và AVIF được bao gồm, và có CDN trong các gói cao cấp.

Imagify, của WP Media, cũng vượt một triệu lượt cài. Gói miễn phí là hai mươi megabyte ảnh mỗi tháng, khoảng hai trăm ảnh. Chuyển đổi WebP và AVIF có trong mọi gói kể cả gói miễn phí, đây là vị thế hào phóng nhất trong ba cái tên xét về định dạng. Không có CDN trong sản phẩm.

Cloudflare Image Transformations cho bạn năm nghìn lượt biến đổi duy nhất mỗi tháng ở gói Free, sau đó năm mươi xu mỗi nghìn. Một lượt biến đổi duy nhất là một tổ hợp riêng biệt giữa ảnh và tham số trong mỗi tháng dương lịch, nên phục vụ cùng một ảnh đã đổi kích thước cho năm mươi nghìn khách chỉ tính một lần. Chọn định dạng tự động tính là một lượt duy nhất ngay cả khi một số trình duyệt nhận AVIF còn số khác nhận WebP.

Mô hình nào cho website nào

Câu trả lời thành thật phụ thuộc vào hình dạng thư viện của bạn, không phải vào sản phẩm nào tốt hơn.

Website nhỏ với thư viện ổn định. Vài trăm ảnh hiếm khi thay đổi. Bất kỳ plugin nào cũng xử lý thoải mái, và riêng gói miễn phí của Imagify nhiều khả năng bao trọn. Trường hợp này có rất ít lý do để thêm Cloudflare vào hệ thống.

Danh mục lớn với nhiều kích thước. Một cửa hàng hàng nghìn sản phẩm, mỗi sản phẩm cần ảnh thu nhỏ, ô lưới và ảnh chi tiết. Cách tính theo tín dụng trừng phạt nặng kiểu này, vì mỗi ảnh thu nhỏ của mỗi sản phẩm đều tiêu tín dụng. Biến đổi ảnh tính theo biến thể riêng biệt bất kể bạn có bao nhiêu sản phẩm, và phần giảm cho yêu cầu lặp lại khiến các trang được xem nhiều không tốn thêm gì.

Website nhiều lưu lượng nhưng ít ảnh. Biến đổi ảnh tỏa sáng ở đây, vì việc tính tiền hoàn toàn không bám theo lưu lượng. Một bài viết lan truyền phục vụ cùng mười hai bức ảnh cho một trăm nghìn người vẫn là mười hai lượt biến đổi.

Website tải lên liên tục. Một tòa soạn thêm hàng chục ảnh mỗi ngày sẽ dùng hết hai mươi megabyte của Imagify hoặc một trăm tín dụng của ShortPixel trong vài ngày. Cả hai đều cần gói trả phí. Cloudflare có thể cũng vậy, tùy mỗi lần tải lên cần bao nhiêu kích thước.

Không có Cloudflare trước website. Khi đó biến đổi ảnh hoàn toàn không phải lựa chọn nếu không chuyển DNS, và plugin là phương án thực dụng.

Những chi phí không ai nhắc tới

Hai khoản luôn vắng mặt trong mọi bảng so sánh.

Dung lượng lưu trữ. Các plugin giữ bản tối ưu bên cạnh bản gốc làm tăng dung lượng đĩa, đôi khi đáng kể, vì WordPress vốn đã tạo nhiều kích thước cho mỗi lần tải lên và plugin còn thêm các phiên bản đã chuyển đổi của từng cái. Trên hosting dùng chung giá rẻ, đây thỉnh thoảng mới là giới hạn thật sự chứ không phải tốc độ.

Xử lý lại. Đổi giao diện, kích thước ảnh đổi theo, và thiết lập dựa trên plugin cần một lượt tạo lại toàn bộ. Trên thư viện lớn đó là hàng giờ tải cho máy chủ, và đây chính là lúc người ta phát hiện nhà cung cấp có giới hạn CPU.

Không điều nào trong hai điều trên là lý do để tránh plugin. Chúng chỉ là chi phí nằm ngoài trang báo giá, và chúng nghiêng về mô hình biến đổi theo yêu cầu khi thư viện lớn dần.

Làm sao biết bạn đang trả cho cái gì

Trước khi chọn, hãy đếm bốn thứ về website của chính bạn. Việc này mất một buổi chiều và quyết định vấn đề đáng tin hơn bất kỳ bảng so sánh nào.

Bạn có bao nhiêu ảnh. Số trong thư viện media, không phải số trang. Con số này quyết định mô hình tín dụng có khả thi hay không.

Mỗi ảnh cần bao nhiêu kích thước. Kiểm tra xem giao diện thực sự yêu cầu gì. WordPress mặc định tạo nhiều kích thước cho mỗi lần tải lên, và phần lớn giao diện chỉ dùng hai hoặc ba trong số đó. Nếu giao diện đăng ký tám kích thước tùy chỉnh và dùng bốn, bạn đang trả tiền xử lý bốn cái còn lại với mọi plugin trong danh sách này, và trả tiền biến đổi chúng với Cloudflare nữa. Cắt bớt danh sách đó là tiền miễn phí trong cả hai trường hợp.

Thư viện thay đổi thường xuyên đến đâu. Một tòa soạn tải lên hằng ngày có vấn đề khác với một trang giới thiệu sửa lần cuối năm ngoái. Hạn mức tháng trừng phạt bên thứ nhất và chẳng liên quan gì tới bên thứ hai.

Ảnh chiếm bao nhiêu lưu lượng. Chỉ mô hình của Cloudflare là không nhạy với điều này, và chỉ các gói CDN của plugin mới tính tiền cho nó. Website nhiều lưu lượng với ít ảnh là trường hợp rõ ràng nhất ủng hộ biến đổi ảnh.

Viết bốn con số đó ra và lựa chọn thường tự hiện. Đoán sai thì bạn sẽ phát hiện lúc gia hạn, hoặc khi một lượt tạo lại hàng loạt hết thời gian giữa chừng danh mục.

Dùng cả hai

Hai cách này không loại trừ nhau, và kết hợp thường là câu trả lời hợp lý. Nén lúc tải lên bằng plugin để bản gốc không nặng vô ích, rồi để biến đổi ảnh lo phần kích thước và chuyển định dạng lúc phân phối. Bạn có thư viện nhẹ hơn và lượng truyền nhẹ hơn, và không hệ thống nào làm trùng việc của hệ thống kia.

Điều bạn không nên làm là chạy hai hệ thống cùng chuyển định dạng. Hai plugin tranh nhau tạo WebP sẽ cho kết quả rối và lãng phí xử lý, và đó là nguyên nhân thường gặp của những bức ảnh hiển thị đúng trên máy tính nhưng vỡ trên trình duyệt di động cũ.

Nếu bạn muốn tự động hóa phần Cloudflare trên WordPress mà không phải viết Worker, plugin tôi duy trì sẽ viết lại URL ảnh sang biến đổi, điền các thuộc tính chiều rộng và chiều cao còn thiếu, và cho phép bạn đưa vào danh sách trắng những nguồn ngoài mà bạn không muốn đụng tới. Nó miễn phí và không thêm hệ thống tín dụng riêng.

Về cơ chế của định dạng URL và cách dùng Worker, xem Cloudflare Image Transformations . Nếu bạn cũng đang quyết định nên đặt file ở đâu, bài Cloudflare R2 cho lưu trữ ảnh bàn về phía lưu trữ và phí egress bằng không.

Tìm câu trả lời cho website của bạn

Quyết định quy về những con số bạn có thể đếm trong một buổi chiều: bạn có bao nhiêu ảnh, mỗi ảnh cần bao nhiêu kích thước, thư viện thay đổi thường xuyên đến đâu, và Cloudflare đã đứng trước website của bạn chưa. Bốn câu trả lời đó chỉ rõ về một trong hai lựa chọn, và trả lời sai thì tốn kém theo kiểu về sau gỡ ra rất phiền.

Mecanik thực hiện kiểm tra hiệu năng WordPress đo xem ảnh thực sự khiến bạn tốn bao nhiêu trước khi đề xuất bất kỳ thay đổi nào, và đảm nhận việc triển khai qua công việc phát triển WordPress khi cách khắc phục vượt quá việc cài đặt một thứ gì đó.

Bài viết liên quan: Ảnh sản phẩm WooCommerce: vì sao trang danh mục chậm , WooCommerce chậm: nguyên nhân thật sự và cách sửa , Giá Cloudflare R2 giải thích - Chi phí thực tế vs S3 và Backblaze , Cloudflare Email Routing - Email miễn phí với tên miền riêng .

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

Cloudflare Image Transformations có tốt hơn Smush hay ShortPixel không? Không phải tốt hơn mà là khác. Plugin nén và lưu bản sao đã tối ưu rồi tính tiền theo số ảnh bạn sở hữu. Cloudflare biến đổi theo yêu cầu và tính theo biến thể riêng biệt. Danh mục lớn thường nghiêng về Cloudflare, thư viện nhỏ ổn định thường nghiêng về plugin.

Plugin ảnh nào có gói miễn phí tốt nhất? Imagify có chuyển đổi WebP và AVIF ngay ở gói miễn phí, thứ mà Smush giới hạn cho bản Pro, nhưng chỉ cho hai mươi megabyte mỗi tháng. ShortPixel cho một trăm tín dụng hằng tháng, dù ảnh thu nhỏ của WordPress tiêu vài tín dụng mỗi lần tải lên. Cloudflare cho năm nghìn lượt biến đổi duy nhất.

Tôi có thể dùng plugin tối ưu và Cloudflare cùng lúc không? Có, và thường là hợp lý. Nén lúc tải lên bằng plugin để bản gốc không nặng vô ích, rồi để Cloudflare lo kích thước và chuyển định dạng. Tránh chạy hai hệ thống cùng chuyển sang WebP, vì việc đó lãng phí xử lý và cho kết quả không nhất quán.

Tôi có cần Cloudflare đứng trước website để dùng biến đổi ảnh không? Có. Biến đổi ảnh áp dụng cho ảnh phục vụ qua một vùng thuộc tài khoản Cloudflare của bạn. Nếu DNS không ở Cloudflare, hoặc ảnh đến từ nhà cung cấp ngoài tài khoản, các yêu cầu sẽ bỏ qua cơ chế này và plugin là lựa chọn thực tế.

Tối ưu ảnh có thực sự cải thiện Core Web Vitals không? Thường là có, vì ảnh chiếm phần lớn dung lượng trang và bức lớn nhất thường chính là phần tử Largest Contentful Paint. Phục vụ ảnh đúng kích thước ở định dạng hiện đại làm giảm trực tiếp chỉ số đó, nhưng sẽ không sửa được sự chậm do script hay thời gian phản hồi máy chủ.