Cách chuyển ảnh website sang WebP an toàn, từng bước
WebP có thể làm ảnh của bạn nhẹ hơn JPG khoảng một phần tư đến một phần ba ở cùng chất lượng, và trình duyệt nào hiện nay cũng hiển thị được. Chuyển sang WebP rất dễ nếu bạn làm đúng thứ tự và tránh vài cái bẫy. Bài này giải thích các đánh đổi và đưa ra một kế hoạch an toàn.
WebP là gì và vì sao đáng cân nhắc
WebP là định dạng ảnh do Google tạo ra. Nó có thể nén ảnh chụp có bỏ bớt dữ liệu như JPG, hoặc nén giữ nguyên dữ liệu như PNG, và hỗ trợ nền trong suốt cùng ảnh động. Vì hiệu quả hơn, cùng một bức ảnh thường nhỏ hơn rất nhiều, nghĩa là trang nhanh hơn và băng thông tốn ít hơn. Bài giải thích về WebP nói rõ hơn về nền tảng của nó.
WebP so với JPG và PNG: ưu và nhược điểm
| Định dạng | Điểm mạnh | Điểm yếu |
|---|---|---|
| WebP | File nhỏ hơn, nền trong suốt, có cả chế độ bỏ bớt dữ liệu lẫn giữ nguyên | Một số công cụ và nền tảng cũ vẫn từ chối |
| JPG | Dùng được ở mọi nơi | File lớn hơn, không có nền trong suốt |
| PNG | Giữ nguyên dữ liệu, có nền trong suốt | Rất lớn với ảnh chụp |
Lợi ích của việc chuyển đổi
- Thường nhẹ hơn JPG 25 đến 35 phần trăm ở cùng chất lượng hình ảnh.
- Một định dạng có thể thay thế cả JPG lẫn PNG trong nhiều trường hợp.
- Trang nhanh hơn, hỗ trợ Core Web Vitals.
Hạn chế và điểm cần lưu ý
- Một số ứng dụng email, phần mềm cũ và ảnh xem trước khi chia sẻ không xử lý tốt WebP.
- Chuyển một ảnh JPG đã có sang WebP tiết kiệm ít hơn so với bắt đầu từ ảnh gốc.
- Bạn cần quản lý phương án dự phòng và kiểm tra kết quả.
Ảnh nào nên chuyển, ảnh nào nên để yên
- Nên chuyển: ảnh chụp lớn, ảnh banner, ảnh sản phẩm và mọi file PNG thực chất là ảnh chụp.
- Chuyển cẩn thận: đồ họa và ảnh chụp màn hình dạng PNG, nơi WebP không bỏ bớt dữ liệu hoặc mức chất lượng cao giúp giữ cạnh sắc nét.
- Để yên: logo và biểu tượng vector, vốn nên giữ ở dạng SVG, và các file rất nhỏ, vì chúng gần như không được lợi gì.
- Giữ ở dạng JPG hoặc PNG: ảnh Open Graph và Twitter card, cùng mọi thứ bạn chia sẻ qua email hoặc ứng dụng có thể không nhận WebP.
Từng bước: chuyển đổi an toàn
- 1Rà soát các trang quan trọng. Chạy các trang chính qua PageSpeed Insights và xem gợi ý về việc phát ảnh ở định dạng thế hệ mới. Nó liệt kê các file và mức tiết kiệm có thể đạt được.
- 2Chuyển từ file gốc. Với ảnh chụp, dùng JPG sang WebP; với đồ họa và ảnh chụp màn hình, dùng PNG sang WebP, giữ được nền trong suốt. Chất lượng 75 đến 85 hợp với hầu hết ảnh chụp.
- 3So sánh trước khi thay thế. Mở từng kết quả cạnh ảnh gốc và nhìn kỹ chi tiết nhỏ, chữ và các dải màu chuyển mượt. Nếu WebP không nhỏ hơn hoặc bạn thấy ảnh bị hỏng, hãy giữ ảnh gốc hoặc tăng chất lượng.
- 4Cung cấp phương án dự phòng. Dùng thẻ
picturevới nguồn WebP và một thẻimgJPG hoặc PNG, như trong hướng dẫn ảnh responsive. Nhiều CMS, plugin và CDN có thể làm việc này giúp bạn. - 5Đổi kích thước và nén luôn thể. Chuyển đổi là lúc thích hợp để đặt đúng kích thước ảnh bằng Đổi kích thước ảnh.
- 6Giữ lại ảnh gốc. Chúng là nguồn cho các lần chỉnh sửa sau này và là lưới an toàn của bạn.
- 7Đo lại và theo dõi kết quả. Chạy lại PageSpeed Insights, kiểm tra các trang chính trên điện thoại và xem có ảnh nào bị lỗi không.
Những lỗi thường gặp
- Chuyển một ảnh JPG đã bị nén mạnh, tiết kiệm được ít mà còn có thể thêm hư hại nhìn thấy. Hãy bắt đầu từ ảnh gốc.
- Bỏ hẳn phương án dự phòng. Đây là cách bảo hiểm rẻ cho những trình duyệt và công cụ lạ.
- Chuyển mọi file, kể cả biểu tượng nhỏ và logo SVG.
- Dùng WebP cho ảnh Open Graph, mà một số nền tảng bỏ qua.
- Không so sánh chất lượng. Hãy luôn xem kết quả trước khi thay thế một file.
Câu hỏi thường gặp
WebP có tốt hơn JPG không?
Với website thì thường là có. File WebP thường nhẹ hơn 25 đến 35 phần trăm ở cùng chất lượng, và WebP còn hỗ trợ nền trong suốt. JPG vẫn là lựa chọn an toàn nhất khi chia sẻ file với những công cụ có thể không nhận WebP.
Trình duyệt nào cũng hỗ trợ WebP phải không?
Mọi trình duyệt lớn hiện nay đều hiển thị được WebP. Hãy giữ phương án dự phòng JPG hoặc PNG cho trình duyệt cũ, ứng dụng email và các công cụ khác.
Tôi có nên chuyển PNG sang WebP không?
Với ảnh chụp lưu dạng PNG thì có, mức tiết kiệm rất lớn. Với đồ họa và ảnh chụp màn hình, WebP cũng dùng được và giữ nền trong suốt, nhưng hãy so sánh kết quả để chắc cạnh vẫn sắc nét. Giữ SVG cho logo vector.
WebP có ảnh hưởng xấu đến SEO không?
Không. Google lập chỉ mục được ảnh WebP, và file nhỏ hơn giúp trang nhanh hơn. Hãy giữ văn bản alt và tên file có nghĩa.
Tôi có nên dùng AVIF thay cho WebP không?
AVIF có thể còn nhỏ hơn, nhưng tạo file lâu hơn và hỗ trợ kém phổ biến hơn một chút. WebP là lựa chọn đơn giản hơn cho hầu hết web, và bạn có thể thêm AVIF sau bằng thẻ picture. Xem bài về AVIF để biết các đánh đổi.