Tối Ưu Hình Ảnh Website: Dùng WebP, AVIF Cho Web Nhanh

Tối ưu hình ảnh website: đừng để ảnh 3MB làm web chậm và đầy hosting

Có một tình huống mình gặp khá thường xuyên. Khách báo: “Web em dạo này load chậm quá, hosting cũng báo sắp đầy”. Mình mở thư mục media ra xem thì thấy hàng trăm file PNG, JPG, cái nào cũng 2-3MB, có cái gần 5MB, thường là ảnh chụp từ điện thoại hoặc file thiết kế gửi nguyên bản.

Nguyên nhân gần như luôn là một: hình ảnh chưa được tối ưu. Tin vui là cái này sửa được, và không cần rành kỹ thuật. Bài này mình giải thích đơn giản để bạn tự làm được.

Vì sao ảnh nặng làm web chậm?

Khi khách mở trang, trình duyệt phải tải toàn bộ ảnh về máy. Một trang có 10 ảnh, mỗi ảnh 2MB nghĩa là khách phải tải khoảng 20MB. Với 4G hoặc wifi yếu, trang sẽ trắng một lúc rồi ảnh mới hiện dần.

Hậu quả không chỉ là khách khó chịu. Khách bỏ đi, Google cũng chấm điểm tốc độ thấp, nên thứ hạng SEO bị ảnh hưởng. Còn phía hosting, ảnh chiếm phần lớn dung lượng. Chưa kể WordPress còn tự tạo thêm nhiều bản thu nhỏ cho mỗi ảnh bạn upload, nên một file nặng nhân lên thành vài file nặng.

WebP và AVIF là gì?

Đây là hai định dạng ảnh đời mới, sinh ra để nhẹ hơn mà nhìn vẫn đẹp.

WebP do Google phát triển. Theo các so sánh mình tham khảo, WebP thường nhẹ hơn JPG khoảng 25-35% ở chất lượng nhìn tương đương. Trình duyệt hiện nay gần như đều đọc được, nên bạn có thể dùng yên tâm.

AVIF mới hơn, nén còn tốt hơn nữa, nhiều bài đo cho thấy nhẹ hơn WebP thêm khoảng 20-30%, nhất là với ảnh chụp lớn. Đổi lại, tốc độ xuất file chậm hơn và vẫn còn một tỷ lệ nhỏ trình duyệt cũ không mở được.

Cả hai đều hỗ trợ nền trong suốt như PNG, nên logo, icon vẫn dùng được.

Vậy nên chọn WebP hay AVIF?

Câu trả lời thực tế của mình: với đa số website doanh nghiệp, cứ dùng WebP là đủ. Dễ làm, ít rủi ro, hiệu quả rõ. AVIF phù hợp khi bạn có nhiều ảnh lớn như banner, ảnh sản phẩm chất lượng cao, và có người kỹ thuật lo phần dự phòng cho trình duyệt cũ.

Còn JPG, PNG thì chưa bỏ hẳn. PNG vẫn ổn cho ảnh nhỏ cần giữ nét như icon, sơ đồ có chữ. Nhưng ảnh chụp thật mà để PNG thì rất phí.

Quy trình 4 bước trước khi upload ảnh

1. Bước 1: Thu nhỏ kích thước ảnh. Ảnh chụp điện thoại thường rộng 4000px, trong khi web chỉ hiển thị khoảng 1200-1920px. Cứ thu về đúng cỡ cần dùng, dung lượng giảm ngay mà mắt thường không thấy khác.
2. Bước 2: Chuyển sang WebP. Dùng công cụ miễn phí như Squoosh (squoosh.app) chạy ngay trên trình duyệt, kéo ảnh vào, chọn WebP, có thanh trượt so sánh trước và sau.
3. Bước 3: Chỉnh chất lượng hợp lý. Với WebP, mức chất lượng khoảng 75-80 thường là điểm cân bằng tốt. Đừng để 100, tốn dung lượng mà mắt không phân biệt được.
4. Bước 4: Đặt tên file rõ ràng. Thay vì IMG_2045.webp, hãy đặt kiểu thiet-ke-noi-that-phong-khach.webp. Có lợi cho SEO và dễ quản lý về sau.

Dung lượng bao nhiêu là hợp lý?

Đây là con số mình hay đưa cho khách, dựa trên kinh nghiệm làm web chứ không phải quy chuẩn cứng:

• Ảnh banner lớn: nên dưới 200KB
• Ảnh trong bài viết, ảnh sản phẩm: nên dưới 100KB
• Ảnh thu nhỏ (thumbnail), logo: nên dưới 50KB

Nếu ảnh của bạn đang 1-3MB thì chuyển WebP và thu nhỏ đúng cỡ, thường giảm được hơn 80-90%. Nghe có vẻ khó tin nhưng đúng là vậy.

Nếu web của bạn chạy WordPress

WordPress cho upload WebP từ bản 5.8, và AVIF từ bản 6.5. Tuy nhiên có hai lưu ý nhỏ.

Thứ nhất, WordPress chỉ chấp nhận file WebP bạn upload, chứ không tự đổi JPG thành WebP. Nên tốt nhất là chuyển trước rồi upload, hoặc dùng plugin tự chuyển đổi.

Thứ hai, AVIF còn phụ thuộc vào máy chủ có hỗ trợ thư viện xử lý ảnh phù hợp hay không. Nếu hosting chưa hỗ trợ thì upload AVIF có thể lỗi. Vì thế mình thường khuyên khách đi WebP trước cho chắc.

Ngoài ra, bật lazy load (chỉ tải ảnh khi khách cuộn tới) cũng giúp trang vào nhanh hơn, nhưng đừng áp dụng cho ảnh đầu trang.

Những lỗi khách hay mắc

• Upload thẳng ảnh gốc từ điện thoại hoặc máy ảnh
• Dùng PNG cho ảnh chụp người, sản phẩm
• Đổi đuôi file thủ công từ .jpg sang .webp (cách này không nén gì cả, chỉ đổi tên)
• Nén quá tay làm ảnh vỡ, mờ, nhất là ảnh banner
• Quên xóa ảnh cũ không dùng trong thư viện media

Mẫu website AZWEB đã tối ưu sẵn bằng WebP

Để tiết kiệm công cho khách, toàn bộ mẫu website AZWeb đều dùng ảnh WebP ngay từ đầu. Nhờ vậy trang nhẹ, tải nhanh và hosting cũng đỡ tốn dung lượng. Bạn có thể mở thử vài mẫu, so sánh tốc độ với website hiện tại của mình sẽ thấy khác biệt rõ.

Nếu bạn muốn website có thêm chức năng như đặt lịch, thanh toán, đa ngôn ngữ, hãy xem thêm các mẫu website tích hợp plugin. Ảnh trong những mẫu này cũng đã được tối ưu theo cùng chuẩn.

Lời kết

Tối ưu hình ảnh là việc nhỏ nhưng hiệu quả lớn nhất trong các việc tăng tốc website, và gần như không tốn thêm chi phí. Chỉ cần nhớ ba điều: thu nhỏ đúng cỡ, chuyển sang WebP, kiểm tra dung lượng trước khi upload.

Nếu web của bạn đang chậm mà chưa biết nguyên nhân, cứ nhắn mình. Mình kiểm tra giúp xem ảnh có phải thủ phạm không, thường chỉ mất vài phút.