WebP là gì? Cùng tìm hiểu định dạng ảnh giúp tăng tốc website

webp đang tạo ra hy vọng mới trong vấn đề giảm dung lượng ảnh

Chào các bạn, với mong muốn đi sâu vào việc tăng tốc độ website, mà cụ thể ở đây tôi muốn tăng tốc cho WordPress, nên dẫn đến việc tìm hiểu định dạng ảnh mới WebP này. Nó có khả năng thay thế cho JPG và PNG, cũng như một số định dạng phổ thông khác.

—–

WebP là định dạng ảnh hiện đại cung cấp khả năng nén rất cao cho cả kiểu nén không mất dữ liệu và mất dữ liệu (lossless and lossy) trên web. Sử dụng WebP, người quản trị và phát triển web có thể tạo ra các bức ảnh có dung lượng nhỏ hơn, phong phú hơn và giúp web tải nhanh hơn.

Kiểu nén ảnh không mất dữ liệu của WebP có kích cỡ nhỏ hơn 26% so với ảnh PNGs. Kiểu nén ảnh mất dữ liệu của WebP nhỏ hơn từ 25 – 34% so với ảnh JPEG với chỉ số chất lượng SSIM tương đương (equivalent).

Kiểu nén không mất dữ liệu của WebP hỗ trợ thuộc tính trong suốt (còn được biết đến với tên kênh alpha) với việc chỉ phải bổ sung thêm 22% bytes. Với các trường hợp khi nén mất dữ liệu RGB được chấp nhận, kiểu nén mất dữ liệu của WebP cũng hỗ trợ thuộc tính trong suốt, thường cho kích cỡ file nhỏ hơn 3 lần so với PNG.

Mức độ chấp nhận nén mất dữ liệu điều chỉnh được vì vậy người dùng có thể chọn lựa đánh đổi giữa dung lượng và chất lượng ảnh.

WebP thường có khả năng lưu trữ – tính theo trung bình – nén hiệu quả hơn 30% so với JPEG và JPEG 2000, mà không bị mất chất lượng ảnh.

Cách WebP làm việc

Nén mất dữ liệu của WebP sử dụng mã hóa dự đoán (predictive coding) để mã hóa ảnh, cùng một phương thức từng được sử dụng bởi mã video VP8 để nén các khung hình (keyframes) trong video. Mã hóa dự đoán sử dụng các giá trị của các khối pixels ngay bên cạnh (neighboring blocks of pixels) để dự đoán giá trị trong một khối, rồi sau đó chỉ mã hóa sự khác biệt.

Nén không mất dữ liệu của WebP sử dụng các mảnh hình ảnh đã thấy theo thứ tự để tái tạo chính xác các pixel mới. Nó cũng có thể sử dụng bảng màu cục bộ nếu không tìm thấy sự phù hợp đủ.

Một tệp WebP bao gồm cả dữ liệu ảnh VP8 hoặc VP8L, và một khung chứa dựa trên RIFF. Thư viện độc lập libwebp đóng vai trò là một tham chiếu đầy đủ (serves as a reference implementation) cho các đặc tả WebP, và có sẵn từ kho git của chúng tôi hoặc như một tarball.

Các trình duyệt web, phần mềm nào hỗ trợ định dạng ảnh WebP?

Người quản trị web mong muốn nâng cao hiệu suất của trang có thể dễ dàng tạo các ảnh WebP được tối ưu để thay thế cho các ảnh hiện tại và hiển thị nó cho những mục tiêu cơ bản tới các trình duyệt hỗ trợ WebP.

Hiện tại chỉ có 2 trình duyệt hỗ trợ WebP là Google Chrome (bản desktop và mobile) và Opera. 3 trình duyệt phổ biến còn lại là IE, FireFox & Safari chưa hỗ trợ. (Cập nhật năm 2019: hiện Firefox và Edge Microsoft đã hỗ trợ WebP)

  • Hỗ trợ kiểu nén mất dữ liệu WebP
    • Google Chrome (desktop) 17+
    • Google Chrome cho Android phiên bản 25+
    • Opera 11.10+
    • Native web browser, Android 4.0+ (ICS)
  • Hỗ trợ kiểu nén mất dữ liệu và không mất dữ liệu WebP & hỗ trợ kênh alpha
    • Google Chrome (desktop) 23+
    • Google Chrome cho Android phiên bản 25+
    • Opera 12.10+
    • Native web browser, Android 4.2+ (JB-MR1)
    • Pale Moon 26+
  • Hỗ trợ ảnh động WebP
    • Google Chrome (desktop và Android) 32+
    • Opera 19+

Nhiều công cụ và thư viện phần mềm hiện cũng đã hỗ trợ WebP. Nhà phát triển cũng nhận được hỗ trợ thêm từ rất nhiều công cụ chỉnh sửa ảnh.

WebP bao gồm thư viện mã hóa và giải mã nhẹ libwebp và công cụ dòng lệnh cwebpdwebp cho phép chuyển đổi các định dạng ảnh thông thường sang WebP và ngược lại, các công cụ này nếu dùng để xem và tạo ảnh động WebP cũng rất tốt. Mã nguồn đầy đủ được cung cấp ở trang download này.

Tải chương trình chuyển đổi sang định dạng WebP

Chuyển đổi bộ sưu tập ưa thích của bạn từ PNG và JPEG sang WebP bằng cách tải về trình tiền biên dịch cwebp, công cụ chuyển đổi hỗ trợ cho Linux, Windows hoặc Mac OS X.

Cho chúng tôi biết trải nghiệm của bạn về dự án này ở đây: mailing list.

Tôi có thể tự đánh giá chất lượng ảnh WebP được không?

Hiện tại bạn có thể xem ảnh định dạng WebP bằng cách chuyển đổi các định dạng phổ biến bằng cách sử dụng nén không mất dữ liệu, thí dụ như PNG rồi sau đó xem ảnh PNG này trên bất cứ trình duyệt hoặc phần mềm xem ảnh nào.

Để nhanh chóng có được ý tưởng về chất lượng của WebP, hãy xem các ảnh so sánh của chúng tôi ngay dưới đây. Có cả PNG và JPG để bạn so sánh.

Nhớ xem nó bằng Google Chrome hoặc Opera (nếu bạn thích so sánh chi tiết hơn, click vào hình, chuột phải mở sang tab mới để tiện quan sát cả hai).

Đầu tiên là với PNG:

PNG file size: 40.5 KB
PNG file size: 40.5 KB
WebP-lossless file size: 27.0 KB
WebP-lossless file size: 27.0 KB – nén không mất dữ liệu
WebP-lossy (with alpha) file size: 14.1 KB
WebP-lossy (with alpha) file size: 14.1 KB – nén mất dữ liệu

Tiếp đến là JPEG:

JPEG file size: 43.84 KB
JPEG file size: 43.84 KB
WebP file size: 29.61 KB
WebP file size: 29.61 KB
JPEG file size: 86.25 KB
JPEG file size: 86.25 KB
WebP file size: 59.18 KB
WebP file size: 59.18 KB
JPEG file size: 251.03 KB
JPEG file size: 251.03 KB
WebP file size: 172.82 KB
WebP file size: 172.82 KB
JPEG file size: 120.78 KB
JPEG file size: 120.78 KB
WebP file size: 80.76 KB
WebP file size: 80.76 KB

Bạn có thể thấy ảnh định dạng WebP có dung lượng nhỏ hơn 30% so với ảnh JPEG.

Kích cỡ ảnh WebP lớn nhất có thể được hỗ trợ?

WebP tương thích bitstream với VP8 và sử dụng 14bit cho chiều rộng và chiều cao. Độ phân giải lớn nhất của ảnh WebP tính theo pixel là 16383 x 16383.

Liệu ảnh WebP có thể có kích cỡ lớn hơn ảnh nguồn không?

, thường xảy ra khi chuyển đổi từ định dạng nén mất dữ liệu sang WebP không mất dữ liệu hoặc ngược lại (vice versa). Điều này có nguyên nhân chủ yếu từ sự khác biệt về không gian màu sắc / colorspace (YUV420 & ARGB) và việc chuyển đổi giữa chúng.

Đây là ba tình huống thường gặp:

  1. Nếu ảnh nguồn có định dạng không mất dữ liệu là ARGB, việc lấy mẫu xuống không gian (spatial downsampling) dạng YUV420 sẽ tạo ra các màu mới khó nén hơn nguyên bản. Tình huống này có thể thường xảy ra khi file nguồn là định dạng PNG có vài màu sắc: chuyển sang định dạng mất dữ liệu WebP (hoặc, tương tự sang định dạng mất dữ liệu JPEG) sẽ có khả năng cho file ảnh có dung lượng lớn hơn.
  2. Nếu định dạng nguồn là mất dữ liệu, sử dụng nén không mất dữ liệu thường cho kết quả là file có dung lượng lớn hơn. Điều này xảy ra không riêng gì với WebP, và có thể xảy ra khi chuyển file nguồn JPEG sang định dạng không mất dữ liệu WebP hoặc PNG.
  3. Nếu file nguồn là định dạng mất dữ liệu và bạn cố gắng nén nó sang dạng mất dữ liệu WebP với thiết lập chất lượng cao hơn. Lấy thí dụ, bạn cố gắng chuyển file JPEG có chất lượng 80 sang dạng WebP có chất lượng 95 thường sẽ cho kết quả là dung lượng file lớn hơn, thậm chí nếu cả hai định dạng đều là mất dữ liệu. Đánh giá chất lượng ảnh nguồn thường cực kỳ khó khăn, vì vậy lời khuyên là nên hạ thấp chất lượng định dạng WebP đích nếu kích cỡ file kết quả thường lớn hơn. Một khả năng khác là tránh sử dụng thiết lập chất lượng, và thay vào đó nhắm mục tiêu kích thước tệp nhất định bằng cách sử dụng tùy chọn -size trong công cụ cwebp, hoặc API tương đương. Ví dụ, hướng đến 80% chất lượng của file gốc có thể sẽ tốt hơn.

Lưu ý là khi chuyển đổi file nguồn JPEG sang định dạng mất dữ liệu WebP hoặc một file nguồn PNG sang định dạng không mất dữ liệu WebP thường không hay bị tăng kích cỡ file bất ngờ kiểu như trên.

Làm sao tôi biết được trình duyệt nào hỗ trợ WebP?

Bạn muốn hiển thị ảnh WebP chỉ cho người dùng có thể hiển thị chúng một cách chính xác, và trở lại các định dạng truyền thống khi trình duyệt người dùng không được hỗ trợ. Thật may mắn là chúng ta có một số kỹ thuật giúp nhận biết khả năng hỗ trợ WebP, cả phía máy chủ và máy khách. Một số dịch vụ CDN cũng hỗ trợ WebP.

Nếu bạn dùng WordPress, tôi có một CaseStudy điển hình cho việc này: Chuyển thành công 12 ngàn bức ảnh trên WordPress sang WebP.

Tại sao Google lại phát hành WebP dưới dạng nguồn mở?

Chúng tôi tin tưởng sâu sắc vào tầm quan trọng của mô hình nguồn mở. Với WebP ở dạng nguồn mở, bất kỳ ai cũng có thể làm việc với định dạng và hỗ trợ nâng cấp nó. Với sự hỗ trợ của mọi người, chúng tôi tin rằng WebP sẽ trở nên hữu dụng hơn như là định dạng đồ họa vượt thời gian.

(Đức Anh Plus tổng hợp & dịch từ Google)

Nhận xét của người dịch

Việc người dùng chuyển sang kết nối qua thiết bị di động nhiều hơn làm Google đặc biệt quan tâm đến việc cải thiện khả năng truy cập tốc độ cao dành cho họ.

Tôi thấy Google có ít nhất 3 công cụ cho việc này:

  1. Kiểm tra tốc độ trang web với PageSpeed Insights: Nó cung cấp hàng loạt các gợi ý tối ưu hóa. Mình có viết một bài chi tiết về cách sử dụng công cụ này ở đây.
  2. Tăng tốc độ trên Web với giao diện giản lược Google AMP: Hạ thời gian tải trang xuống khoảng chưa đến 1,5s nhờ việc loại bỏ các yếu tố làm chậm.
  3. Và cái cuối chính là WebP – nhân vật chính của bài này: Ảnh cho chất lượng tương đương nhưng dung lượng ít hơn 20 – 30% so với định dạng thông thường.

Thực tế rất có lý khi quan tâm đến ảnh hình nếu muốn tăng tốc độ, vì ảnh thường chiếm từ 30 – 70% dung lượng của một trang web.

Vấn đề của định dạng ảnh mới WebP là nó hiện mới được 2 trình duyệt lớn hỗ trợ. Tức là hiện tại nếu người quản trị web nào muốn sử dụng WebP họ sẽ phải dùng đồng thời cả hai định dạng ảnh. Đây không phải là rắc rối nhỏ.

Ngoài ra người quản trị web sẽ phải thực hiện chuyển đổi các định dạng ảnh cũ sang WebP, và nếu công cụ không dễ dàng thì rất nhiều người sẽ bỏ qua.

Vì Sao?

Đơn giản là vì không phải người quản trị web nào cũng thành thạo trong các lĩnh vực thế này. Đa số sẽ làm được nếu các công cụ hỗ trợ có đầy đủ và dễ dùng, còn không sẽ chỉ có giới chuyên gia mới có khả năng động đến.

Tin tốt là như mình được biết thì hiện WordPress có khá nhiều công cụ giúp chuyển đổi sang WebP, nhưng có vấn đề nhỏ: Nếu muốn chuyển đổi nhiều thì sẽ mất phí mặc dù không quá lớn (cỡ đầu 10$ cho 10 ngàn bức ảnh). Kiểu gì thì đây cũng là một cản trở, vì thực ra đa số vẫn sống tốt khi dùng JPG và PNG mà!

Một trong các trang web có lượng truy cập rất lớn mà mình biết đang dùng WebP là WikiHow, trang này có đặc điểm sử dụng rất nhiều ảnh, cùng với lượng người dùng lớn nên băng thông là vấn đề quan tâm, đây chắc chắn là động lực chính để họ chuyển sang định dạng này.

Các trang web sử dụng CDN để tăng tốc web cũng có khả năng quan tâm đến WebP nhiều hơn, vì đa phần dịch vụ CDN tính phí qua dung lượng, và do đó WebP giúp người dùng tiết kiệm tiền.

Scroll to Top