Ảnh thường là phần nặng nhất của một trang web, và công cụ đo tốc độ hay khuyên “phân phát hình ảnh ở định dạng mới”. Định dạng được nhắc nhiều nhất là WebP. Bài này dành cho người đang tự quản trị website: WebP là gì, hai cách chuyển ảnh (làm tay trước khi tải lên, hoặc để WordPress tự làm), ảnh nào nên và không nên chuyển, và những lỗi hay gặp sau khi chuyển.
WebP là gì, nhẹ hơn bao nhiêu
WebP là định dạng ảnh do Google phát triển cho web. Theo trang WebP của Google, ảnh WebP nén không mất dữ liệu nhỏ hơn PNG khoảng 26%, ảnh WebP nén có mất dữ liệu nhỏ hơn JPEG cùng chất lượng khoảng 25–34%. WebP hỗ trợ cả nền trong suốt như PNG và ảnh động như GIF. Các trình duyệt phổ biến hiện nay đều hiển thị được WebP.
WordPress cho tải ảnh WebP lên thư viện từ bản 5.8 (2021), dùng như ảnh JPEG hay PNG. Từ bản 6.5, WordPress hỗ trợ thêm AVIF, định dạng còn nhẹ hơn nữa, với điều kiện máy chủ hosting hỗ trợ xử lý AVIF.
Cách 1: Chuyển trước khi tải lên
Cách này hợp khi bạn tải ít ảnh và muốn tự chọn chất lượng từng ảnh.
- Thu nhỏ kích thước trước. Ảnh chụp từ điện thoại thường rộng vài nghìn điểm ảnh, trong khi khung hiển thị trên web hẹp hơn nhiều. Thu về cỡ gần với khung hiển thị lớn nhất trên website thường giúp nhẹ đi nhiều, trước cả khi đổi định dạng.
- Chuyển bằng Squoosh. Squoosh là ứng dụng web nén ảnh, xử lý ngay trên máy bạn nên ảnh không bị gửi đi đâu. Kéo ảnh vào, chọn WebP, kéo thanh chất lượng và so hai nửa ảnh trước, sau rồi tải về.
- Nhiều ảnh một lúc: Google cung cấp công cụ dòng lệnh cwebp (chạy trên Windows, macOS, Linux) để chuyển hàng loạt; hợp với người quen dùng dòng lệnh hoặc nhờ bộ phận kỹ thuật.
Cách 2: Để WordPress tự chuyển khi tải lên
Nếu nhiều người cùng đăng bài, đừng trông vào việc ai cũng nhớ chuyển ảnh. Plugin Modern Image Formats do nhóm Hiệu năng của WordPress (WordPress Performance Team) phát triển sẽ tự tạo bản WebP hoặc AVIF cho ảnh tải lên: mặc định dùng AVIF nếu máy chủ hỗ trợ, không thì dùng WebP. Tuỳ chọn của plugin nằm ở Cài đặt, mục Media (Settings, Media).
Lưu ý quan trọng ghi trên trang plugin: chỉ ảnh tải lên sau khi cài mới được chuyển. Ảnh cũ trong thư viện cần tạo lại các kích thước (bằng plugin tạo lại ảnh thu nhỏ hoặc lệnh WP-CLI) thì mới có bản định dạng mới. Có nhiều plugin tối ưu ảnh khác xử lý được cả thư viện cũ; chọn một plugin duy nhất, đừng bật hai plugin cùng chuyển ảnh.
Ảnh nào nên chuyển, ảnh nào không
| Loại ảnh | Nên dùng | Ghi chú |
|---|---|---|
| Ảnh chụp: sản phẩm, công trình, con người | WebP nén có mất dữ liệu (hoặc AVIF) | Thu nhỏ kích thước trước khi chuyển |
| Ảnh có nền trong suốt | WebP có nền trong suốt | Nhẹ hơn PNG, giữ được viền |
| Logo, biểu tượng | SVG nếu có tệp gốc dạng vector | Nét ở mọi cỡ màn hình; không có SVG thì dùng WebP |
| Ảnh chụp màn hình nhiều chữ | WebP không mất dữ liệu | Nén có mất dữ liệu dễ làm nhoè chữ |
| Ảnh động | WebP động, hoặc video ngắn | Theo Google, WebP động thường nhẹ hơn GIF |
| Tệp gửi đối tác, in ấn | Giữ JPEG, PNG gốc | Không phải phần mềm nào cũng mở được WebP |
Sau khi chuyển: kiểm tra và tránh lỗi hay gặp
- Giữ ảnh gốc ở máy hoặc ổ lưu trữ, để sau này cần in hay làm lại vẫn có bản chất lượng cao nhất.
- Nhìn bằng mắt trên điện thoại và màn hình lớn: vùng trời, da người, chữ nhỏ là chỗ dễ lộ vệt nén. Thấy vệt thì tăng chất lượng lên một nấc.
- Xoá bộ nhớ đệm của plugin đệm, hosting hoặc mạng phân phối nội dung, rồi mở trang ở cửa sổ ẩn danh để chắc khách đang nhận ảnh mới.
- Đo lại tốc độ bằng PageSpeed Insights trên điện thoại. Ảnh chỉ là một trong nhiều việc; các việc còn lại có trong bài 7 việc nâng điểm PageSpeed mà không đổi thiết kế.
Nếu website vẫn chậm sau khi đã xử lý ảnh, nguyên nhân có thể nằm ở hosting, plugin hay mã bên thứ ba; xem Website chậm vì đâu: 6 nguyên nhân hay gặp. Muốn có người lo phần tối ưu ảnh, cập nhật và theo dõi tốc độ định kỳ, xem gói Lưu trữ và bảo trì website.
Tóm lại
- WebP nhẹ hơn JPEG, PNG đáng kể theo số liệu của Google, có nền trong suốt và ảnh động; WordPress hỗ trợ WebP từ bản 5.8, AVIF từ bản 6.5.
- Chuyển tay bằng Squoosh hoặc cwebp, hoặc để plugin Modern Image Formats tự chuyển ảnh mới tải lên; ảnh cũ cần tạo lại kích thước.
- Thu nhỏ kích thước trước, giữ ảnh gốc, logo ưu tiên SVG, rồi xoá bộ nhớ đệm và đo lại tốc độ.