Tóm tắt kết quả: Bạn nên sử dụng định dạng ảnh mới WebP, đặc biệt nếu ảnh trên website của bạn chưa được nén hoặc mới chỉ được nén ở dạng không mất chất lượng. Nếu ảnh trên website của bạn đã được nén mất chất lượng thì việc sử dụng thêm WebP không cải thiện được bao nhiêu. Một điều cần lưu ý nữa là khi chuyển ảnh JPG sang WebP, nếu không thiết lập khéo có thể gây tác dụng ngược là làm tăng dung lượng!
Mấy hôm nay tôi tìm hiểu định dạng ảnh WebP khá nhiều vì cảm thấy nó rất hay khi có thể giảm dung lượng ảnh xuống 20 – 30% mà chất lượng ảnh vẫn giữ nguyên. Tuy nhiên hạn chế của WebP cũng không ít và điều đó làm tôi có phần do dự khi có ý định tăng tốc WordPress bằng cách chuyển hẳn các ảnh trên website sang WebP.
Hiện bạn không thể tải trực tiếp ảnh định dạng WebP lên từ giao diện soạn thảo của WordPress được, theo mặc định CMS (hệ quản trị nội dung) này không hỗ trợ WebP. Để có định dạng này dùng trên WordPress, bạn phải up ảnh định dạng JPG hoặc PNG lên trước, sau đó sẽ có plugin cho phép chuyển chúng sang WebP.
FireFox, IE & Safari vẫn chưa hỗ trợ WebP, chỉ Chrome (dĩ nhiên vì WebP cùng do Google phát triển) & Opera (luôn nổi tiếng là trình duyệt nhanh và nhẹ) là hiển thị ổn thỏa. Nói cách khác ở thời điểm hiện tại nếu bạn muốn dùng WebP thì bạn buộc phải dùng nó song song với JPG và PNG, phòng cho những ai sử dụng trình duyệt không tương thích.
Các phần mềm phổ thông trên máy tính để bàn chưa hỗ trợ WebP. Thí dụ bạn sẽ không thấy Paint trên Windows bật được định dạng này. Điều đó có thể không ảnh hưởng đến dân chuyên nghiệp vì họ luôn biết cách có được các phần mềm cho mọi định dạng mà họ muốn nhưng dĩ nhiên lại rất bất tiện với người dùng phổ thông.
Do vậy chuyển ảnh sang WebP trên WordPress, mặc dù có công cụ hỗ trợ (có cả miễn phí & tính phí) thì cũng là một rắc rối không nhỏ, vậy nó có đáng để thử không?
Hôm nay tôi sẽ lấy các bức ảnh thông thường vẫn hay dùng để up lên web rồi thử. Ảnh sẽ ở các trạng thái sau:
- Ảnh gốc nguyên bản (chưa được tối ưu về kích cỡ rộng dài cũng như chưa nén).
- Ảnh được tối ưu chiều rộng chiều dài, chưa nén.
- Ảnh được tối ưu chiều rộng chiều dài, đã nén không mất dữ liệu.
- Ảnh được tối ưu chiều rộng chiều dài, đã nén không mất dữ liệu rồi chuyển sang định dạng WebP.
Chúng ta sẽ thử nghiệm với cả JPG và PNG.
Thử nghiệm với JPG
Tôi hay vào kho ảnh miễn phí Pixapay để tìm và tải các bức ảnh về.
Đầu tiên tôi tải ảnh con bò nhiều màu sắc cỡ lớn này về (1280px x 960px), nó có kích cỡ 533KB.
Sau đó như mọi lần, cách đơn giản nhất khi muốn giảm dung lượng file là tôi dùng Paint có sẵn trên Windows để giảm kích cỡ chiều rộng và chiều dài. Ở đây tôi sẽ giảm chúng đi một nửa, kết quả:
Tiếp theo tôi sẽ nén ảnh JPG trên theo kiểu không mất dữ liệu, tôi dùng ứng dụng nén ảnh online https://compressor.io, họ cho phép nén cả ảnh JPG và PNG cũng như có cả kiểu nén mất dữ liệu và không mất dữ liệu.
Hơi bất ngờ tí ti, khi bức ảnh trên nén không mất dữ liệu cho kích cỡ y nguyên. Nói cách khác ảnh đã được nén không mất dữ liệu sẵn rồi trên máy chủ của Pixapay. Lý do cũng dễ hiểu, vì Pixapay lưu trữ rất nhiều ảnh, để tiết kiệm dung lượng và đảm bảo chất lượng họ đã nén sẵn ảnh không mất chất lượng trên kho lưu trữ của họ.
Thế là tôi chuyển luôn sang nén mất chất lượng xem thế nào. Kết quả bên dưới:
Và đây là phần mong chờ nhất. Liệu chuyển sang dạng WebP thì sao đây. Tôi sử dụng ứng dụng online-convert để chuyển. Kết quả:
Tiếp theo tôi muốn thử với một bức ảnh gốc tự tay tôi chụp. Ảnh này lấy nguyên từ thẻ nhớ máy ảnh luôn, tức là chưa qua xử lý nén nào.
Tôi cố tình điều chỉnh chế độ của máy ảnh để nó lưu giữ bức ảnh ở khung hình nhỏ là 720 x 480 nhằm tiện so sánh. Đây là bức gốc:
Tiếp theo tôi sử dụng phần mềm chuyển đổi ảnh WebP có tên như mục đích của nó WebPconv để thay đổi các tùy chọn chất lượng chuyển khác nhau. Tôi dùng 3 tùy chọn chất lượng 100%, 90% & 85%. Dưới đây là các kết quả theo thứ tự:
Có vẻ rất tốt đúng không, không dễ gì thấy được sự thay đổi chất lượng ngay cả với thiết lập tùy chọn suy giảm chỉ còn 85% (ảnh cuối cùng).
Thử với PNG
Tôi rất hay sử dụng ảnh chụp màn hình khi hướng dẫn sử dụng plugin hay phần mềm nào đấy. Ảnh chụp màn hình thường để ở định dạng PNG. Ngoài ra các icon, các ảnh cần hỗ trợ thuộc tính trong suốt cũng sử dụng ảnh PNG.
Hôm nay tôi sẽ thử lấy ảnh PNG chụp màn hình như mọi khi tôi vẫn làm để tiến hành thử nghiệm.
Đây là ảnh PNG gốc, không thay đổi về kích cỡ cũng như chưa nén (không giống như ảnh JPG ở trên, vì là ảnh PNG này tôi tự tạo nên chắc chắn ảnh này chưa áp dụng bất kỳ biện pháp nén nào cho đến khi tôi thực sự làm thế):
Vì ảnh này kích cỡ cũng vừa tầm nên tôi sẽ không thay đổi chiều rộng và chiều dài của nó mà chỉ tiến hành nén rồi so sánh các cách thức khác nhau xem cái nào hiệu quả hơn.
Đầu tiên là nén không mất dữ liệu, vẫn dùng compressor.io nhưng phần này là cho ảnh PNG, kết quả:
Tiếp đến tôi chuyển sang định dạng WebP, khi tôi thử với chương trình online-convert.com thì kết quả của nó về mặt dung lượng rất tốt, giảm đến hơn 80%, nhưng nó đồng thời cũng làm giảm chất lượng của ảnh.
Đây là do thiết lập mặc định của chương trình chuyển đổi online nói trên. Tôi muốn so sánh dung lượng khi chất lượng ảnh phải tương đương nhau.
Vì vậy tôi dùng lại phần mềm WebPconv, nó các tùy chọn giúp thay đổi chất lượng được. Và khi để ở chế độ Lossless mode, chất lượng ảnh giữ nguyên, và dung lượng ảnh giảm khá ấn tượng:
Điều lưu ý là tôi chuyển thẳng từ ảnh gốc chưa được nén, chứ không cần chuyển đổi từ dạng nén không mất chất lượng. Nói cách khác, khi chuyển ảnh PNG sang WebP là bạn chuyển thẳng luôn chứ không cần qua trung gian nén không mất chất lượng làm gì. Tức là đỡ mất công một bước.
Những rắc rối về chất lượng ảnh & dung lượng sau khi chuyển đổi
Ảnh PNG gốc chẳng gặp vấn đề gì trong các thử nghiệm của tôi, chất lượng ảnh sau khi chuyển sang định dạng WebP giữ nguyên và dung lượng giảm rất đáng kể.
Tuy nhiên với ảnh JPG thì khác. Khi chuyển JPG → WebP, với tùy chọn chất lượng càng cao (từ 90 → 100) khả năng ảnh WebP tăng dung lượng cũng tăng cao theo! (Vấn đề này đã được nói kỹ trong bài viết cách tối ưu hóa ảnh trên website)
Chẳng hạn với tùy chọn chất lượng 100%, ảnh con bò nhiều màu sắc ở định dạng WebP tăng khoảng 26% dung lượng so với ảnh gốc (Tất nhiên chất lượng không tăng! Đây quả thực là rắc rối lớn vì hãy nhớ rằng mục đích của chúng ta là giảm dung lượng!).
Điều này thực ra đã được mô tả khá rõ ở bài viết khi giới thiệu về định dạng WebP, theo đó thì:
Nếu bạn chuyển ảnh định dạng JPG có chất lượng 80 sang định dạng WebP có chất lượng 95 thì thường sẽ cho ảnh kết quả có dung lượng lớn hơn. Nhưng xác định chất lượng file JPG đang dùng không dễ, ngoài ra chúng ta có đủ các kiểu ảnh JPG khác nhau, do vậy cách hay hơn là sử dụng tùy chọn dung lượng, với tùy chọn này thường để dung lượng ảnh kết quả WebP thu được bằng 80% dung lượng ảnh nguồn JPG là ổn.
Như vậy các thiết lập cho việc chuyển đổi ảnh JPG và PNG là khác nhau. Đặc biệt với JPG chúng ta phải để ý, nhằm đạt được 2 mục đích đồng thời của quá trình chuyển đổi:
- Dung lượng ảnh phải giảm ở định dạng mới
- Chất lượng ảnh giữ nguyên hoặc giảm không đáng kể (đến mức mắt thường khó nhận ra)
Hay nói cách khác dung lượng phải giảm sâu hơn nhiều so với sự sụt giảm về chất lượng.
Vấn đề về chất lượng sẽ thường xảy ra với ảnh JPG đã được “tối ưu quá tốt”, nghĩa là nó được tối ưu cả chiều rộng dài và chất lượng đúng vừa đủ cho người dùng rồi. Giờ chuyển sang WebP sẽ suy giảm chất lượng. Sự suy giảm chất lượng này dù nhỏ nhưng vì vốn nó đang ở lằn ranh giữa chất lượng chấp nhận được và chất lượng thấp nên sự sụt giảm ấy có thể gây hậu quả lớn hơn thông thường.
Tôi sẽ kiểm tra nhận định trên ngay dưới đây.
Thử với ảnh JPG và PNG đã được “tối ưu tối đa”
Đây là thử nghiệm sống còn đối với việc WebP có được sử dụng trên website của tôi hay không (và tất nhiên cả của bạn nữa!).
Trước khi biết đến định dạng ảnh mới này tôi đã thực hiện tối ưu hóa các bức ảnh của mình tương đối kỹ càng:
- Hầu hết các ảnh được chuyển về kích cỡ đủ dùng, với độ rộng từ 600 – 640px
- Các ảnh đều được nén không mất dữ liệu
- Một số ảnh được nén thêm mất dữ liệu để cắt giảm sâu dung lượng thêm một lần nữa với sự hao hụt chất lượng nhỏ
Vậy những ảnh như vậy chuyển sang WebP sẽ thế nào? Nó có làm chất lượng thấp đến mức không chấp nhận được? Hoặc nó có làm dung lượng ảnh tăng lên? Hay thậm chí là cả hai!
Dù rơi vào bất cứ trường hợp nào, thì việc chuyển sang WebP sẽ là có hại.
Tôi bắt đầu nén mất dữ liệu với ảnh PNG ở trên bằng việc sử dụng công cụ online tinyPNG, kết quả:
Tiếp theo tôi sẽ chuyển ảnh trên sang định dạng WebP, kết quả ảnh cho chất lượng không đổi nhưng chỉ giảm được 5,7% dung lượng, thấp hơn mong đợi của tôi, nhưng dù sao cũng mừng vì nó không tăng thêm dung lượng!
Tiếp theo là ảnh con bò PNG, hình vẽ không quá phức tạp cộng với màu nền đều làm cho ảnh gốc và ảnh nén mất dữ liệu trông không khác nhau là mấy:
Khi tôi sử dụng nén sang WebP với ảnh đã mất dữ liệu, chỉ giảm thêm được 0,32%.
Tôi cũng thử chuyển ảnh gốc sang WebP xem thế nào, kết quả giảm được rất ấn tượng, giảm đến 45,77% dung lượng.
Như vậy có thể tạm kết luận là:
Nếu bạn đã sử dụng công nghệ nén mất dữ liệu cho ảnh PNG thì việc chuyển sang WebP tuy không làm suy giảm chất lượng ảnh nhưng không cải thiện dung lượng lưu trữ được bao nhiêu.
Bây giờ chúng ta chuyển sang phần của ảnh JPG, thực tế mà nói, đối với tôi phần này hồi hộp và có tính quyết định hơn. Sở dĩ như vậy là vì hầu hết các trang web tôi đều dùng ảnh định dạng JPG là chủ yếu.
Tôi lấy ảnh con bò nhiều màu sắc ở trên để chuyển, kết quả với tùy chọn 80% ảnh chỉ giảm được 5,4% dung lượng, chất lượng khá tương đương.
Với tùy chọn 75%, giảm được 18,23% dung lượng nhưng đã thấy dấu hiệu của sự suy giảm chất lượng.
Như vậy có thể nói, cũng giống như với ảnh PNG, khi ảnh JPG đã được nén mất chất lượng rồi thì khi chuyển sang WebP, dung lượng tiết kiệm được cũng chỉ rơi vào tầm 5%.
5% dung lượng ảnh tiết kiệm được không phải là con số hấp dẫn để phải chịu nhiều phiền toái khác khi chuyển sang WebP. Nên các trang web đã “tối ưu tối đa” sẽ chẳng mấy hứng thú với WebP. Ngược lại các trang web mà ảnh chưa bị nén giảm chất lượng quá nhiều sẽ thấy WebP đủ hấp dẫn khi nó có thể giảm cho họ từ 20 – 40% dung lượng.
Kết luận
Các ví dụ trên cho thấy mức độ hấp dẫn của WebP thế nào, nó quả thực giảm dung lượng ảnh rất hiệu quả.
Cộng thêm điều này nữa: Sự phổ biến của trình duyệt Google Chrome & người em cùng cha khác mẹ Cốc Cốc rất phổ biến tại Việt Nam.
Liệu như vậy đã đủ để chúng ta chuyển sang dùng WebP chưa nhỉ?
Facebook từng thử dùng WebP năm 2013 trên quy mô nhỏ nhưng vấp phải sự phản ứng của người dùng. Cũng dễ hiểu, vì người dùng Facebook thường tải lại ảnh của họ đã đăng lên đây để dùng vào việc khác, thí dụ up lên trang mạng xã hội nào đấy nữa. Trong khi các hệ điều hành như Windows lẫn Mac OS X, Photoshop ở thời điểm đó đều chưa hỗ trợ định dạng này (đến thời điểm này – 2017, không có thay đổi gì mấy, trong những cái trên mới có thêm plugin hỗ trợ cho photoshop xử lý ảnh WebP mà thôi, hai hệ điều hành kia theo mặc định vẫn chưa hỗ trợ).
Nếu người dùng không thường tải ảnh xuống thì khả năng dùng WebP hầu như không gây bất tiện nào cho họ cả. Như tôi từng nói trong bài viết trước, trang wikihow.com có lượng truy cập rất lớn – đứng thứ 175 toàn cầu, đã áp dụng định dạng WebP, có thể hiểu lý do là vì trang thường sử dụng rất nhiều ảnh.
Giờ nhớ lại từng có cách sắp xếp bàn phím cho tốc độ gõ được chứng minh là cao hơn bàn phím QWERTY phổ thông hiện nay nhưng về sau không được áp dụng rộng rãi vì vấp phải thói quen cũ, liệu điều tương tự có xảy ra với WebP?
