WordPress 7.1 AVIF HEIC thay đổi cách WordPress xử lý ảnh khi đăng bài: trình duyệt có thể giải mã, nén, đổi kích thước và tạo các ảnh con trước khi gửi dữ liệu lên máy chủ. Nhờ đó, PHP không phải đảm nhiệm toàn bộ quy trình xử lý ảnh nặng như trước. Tính năng này đặc biệt hữu ích với ảnh AVIF, HEIC từ iPhone và các máy chủ dùng hosting chia sẻ có giới hạn CPU, RAM hoặc thời gian chạy PHP.
Cơ chế mới sử dụng bản dựng WebAssembly của libvips chạy trong Web Worker. Đây là một cải tiến tăng cường dần (progressive enhancement), không loại bỏ hoàn toàn quy trình xử lý phía máy chủ. Nếu trình duyệt hoặc thiết bị không đáp ứng điều kiện, WordPress vẫn có thể quay về luồng xử lý cũ.
WordPress 7.1 AVIF HEIC xử lý ảnh như thế nào?
Ở quy trình truyền thống, người dùng tải ảnh gốc lên máy chủ, sau đó WordPress gọi GD hoặc Imagick để tạo thumbnail, ảnh trung gian và các kích thước responsive. Với ảnh lớn, bước này có thể làm tăng mức sử dụng bộ nhớ PHP, kéo dài thời gian phản hồi hoặc gây lỗi vượt giới hạn bộ nhớ.
Trong WordPress 7.1, trình duyệt có thể thực hiện các bước sau trước khi upload:
- Giải mã ảnh JPEG, PNG, WebP, AVIF và một số định dạng HEIC/HEIF.
- Đổi kích thước theo thiết lập kích thước ảnh của WordPress.
- Nén và mã hóa lại ảnh bằng pipeline libvips chạy qua WebAssembly.
- Tạo các ảnh con và gửi từng tệp đã xử lý lên máy chủ.
- Giữ ảnh HEIC gốc dưới dạng tệp nguồn đi kèm trong những trường hợp cần thiết.
Trang giới thiệu chính thức của WordPress cho biết quy trình này giúp giảm mức sử dụng CPU và bộ nhớ máy chủ, đồng thời hỗ trợ AVIF, HEIC và HDR gain map trong hệ thống media mới (theo wordpress.org).
Điểm quan trọng là bạn thường không cần tự cài WebAssembly libvips bằng SSH hay thêm thư viện PHP. Pipeline được tải khi cần từ trình chỉnh sửa, thay vì làm tăng đáng kể gói JavaScript ban đầu.
Cách giảm tải PHP khi đăng ảnh trong WordPress 7.1
1. Đáp ứng điều kiện trình duyệt và thiết bị
Luồng WebAssembly đầy đủ được thiết kế ưu tiên cho các trình duyệt Chromium hiện đại và thiết bị có đủ tài nguyên. Tài liệu kiểm thử của WordPress lưu ý rằng quá trình xử lý phía trình duyệt cần hơn 2 GB RAM và kết nối ổn định trong các kịch bản phù hợp (theo make.wordpress.org).
HEIC còn phụ thuộc vào codec nền tảng. Chrome, Edge hoặc Brave trên macOS có thể xử lý theo codec khả dụng; Windows cần hỗ trợ HEVC; Safari có thể dùng đường xử lý HEIC riêng. Vì vậy, không nên tuyên bố rằng mọi trình duyệt đều chuyển đổi HEIC giống nhau.
2. Giữ nguyên thiết lập kích thước ảnh hợp lý
Chuyển việc xử lý sang trình duyệt không có nghĩa là nên cho phép ảnh gốc quá lớn. Hãy kiểm tra các kích thước trong Cài đặt → Media và chỉ giữ những kích thước thực sự được theme hoặc block sử dụng. Quá nhiều kích thước sẽ làm tăng thời gian xử lý trên máy người đăng và tạo thêm tệp trong thư viện.
Ví dụ, website tin tức có thể giữ kích thước lớn cho ảnh đầu bài, kích thước trung bình cho danh sách bài viết và một kích thước vuông cho thẻ mạng xã hội. Không nên tạo hàng loạt kích thước chỉ vì plugin cũ từng yêu cầu chúng.
Nếu bạn đang nâng cấp cả plugin và theme, hãy tham khảo checklist kiểm thử WordPress 7.1 trước khi áp dụng trên website đang có người dùng đăng bài.
3. Kiểm tra đường fallback phía máy chủ
Không phải mọi tệp đều được xử lý ở trình duyệt. Các định dạng ngoài danh sách hỗ trợ, trình duyệt yếu hoặc thiết bị thiếu khả năng WebAssembly có thể quay về server-side processing. Do đó, máy chủ vẫn cần GD hoặc Imagick hoạt động ổn định cho các trường hợp dự phòng.
Trong DevTools, mở tab Network, tải một ảnh JPEG hoặc AVIF và quan sát các request media. Sau đó so sánh mức CPU, RAM và thời gian xử lý PHP-FPM trước và sau khi bật WordPress 7.1. Kết quả đáng tin cậy phải dựa trên cùng loại ảnh, cùng kích thước và cùng số lượng tệp, không chỉ dựa vào cảm nhận upload nhanh hơn.
Để giảm rủi ro khi cập nhật, bạn cũng nên xem quy trình kiểm tra plugin trước khi cập nhật và thử nghiệm bằng bản staging trước khi thay đổi website thật.
Giới hạn và lỗi thường gặp khi xử lý ảnh trong trình duyệt
| Tình huống | Nguyên nhân có thể gặp | Cách xử lý |
|---|---|---|
| Ảnh HEIC không upload được | Trình duyệt thiếu codec hoặc không chạy được đường xử lý phù hợp | Thử Chrome/Edge trên thiết bị hỗ trợ HEVC hoặc chuyển ảnh sang JPEG |
| Ảnh AVIF HDR bị lỗi | Pipeline WebAssembly hoặc bộ mã hóa chưa hỗ trợ đầy đủ độ sâu màu | Dùng AVIF 8-bit hoặc kiểm tra đường fallback trên staging |
| Máy người dùng bị chậm | Ảnh quá lớn hoặc thiết bị có ít RAM | Giảm kích thước ảnh trước khi upload, tránh xử lý hàng loạt quá lớn |
| Plugin không còn chạy như trước | Một số hook xử lý ảnh phía máy chủ không được gọi khi client-side processing hoạt động | Kiểm tra tài liệu plugin và thử luồng server-side khi cần |
Tài liệu phát triển của Gutenberg ghi rõ một số hook như wp_image_editors, image_make_intermediate_size và image_memory_limit có thể không được gọi khi xử lý phía trình duyệt đang hoạt động (theo GitHub WordPress Gutenberg). Đây là điểm cần kiểm tra nếu website có plugin watermark, CDN, tối ưu ảnh hoặc quy trình hậu xử lý tùy biến.
Trong thực tế, lựa chọn an toàn nhất là xem client-side processing như một lớp tăng tốc, không phải lý do để tắt hoàn toàn khả năng xử lý ảnh trên máy chủ. Hãy kiểm tra ba chỉ số: thời gian hoàn tất upload, mức sử dụng PHP-FPM và kích thước các tệp được tạo. Nếu cả ba cải thiện mà chất lượng ảnh vẫn đạt yêu cầu, WordPress 7.1 đang mang lại đúng lợi ích kỳ vọng.
Nguồn tham khảo
