Thủ Thuật

Tăng tốc độ website sử dụng định dạng ảnh WebP

Posted on by ShareKyNang
04
Th5

Tại sao bạn cần sử dụng ảnh WebP ?

Hình ảnh ở định dạng WebP thường nhỏ hơn 25–35% về mặt dung lượng so với các hình ảnh JPEG và PNG. Điều này làm giảm kích thước và cải thiện tốc độ website.

YouTube nhận thấy rằng việc chuyển sang hình thu nhỏ WebP giúp tăng tốc độ tải trang web nhanh hơn 10%.

Facebook đã tiết kiệm được 25-35% kích thước tệp cho JPEG và tiết kiệm 80% kích thước tệp cho PNG khi họ chuyển sang sử dụng WebP.

Định dạng ảnh WebP là một sự thay thế tuyệt vời cho các hình ảnh JPEG, PNG và GIF. Ngoài ra, WebP cung cấp cả nén lossless (không mất dữ liệu) và nén lossy (mất dữ liệu). Nén lossless có nghĩa là khi kích thước tệp được nén, chất lượng hình ảnh vẫn giữ nguyên, ngoài ra, tệp có thể được giải nén về chất lượng ban đầu. Nén lossy làm giảm đáng kể kích thước tệp, nhưng có thể làm giảm chất lượng hình ảnh.

Định dạng ảnh PNG đã được tạo ra dưới định dạng ảnh lossless, có chứa các chi tiết nhỏ khó có thể nhận thấy được, điều đó khiến kích thước tệp của định dạng này khá lớn. Mặt khác, các định dạng lossy (như JPEG) tạo ra các tệp nhỏ hơn nhiều, vì chúng không lưu các chi tiết không cần thiết. Vì vậy, trong thực tế, chúng ta thường sử dụng phương pháp WebP lossless cho tệp PNG để bảo toàn các chi tiết như màu sắc, nền trong suốt,… trong khi đó với JPEG, chúng ta sử dụng WebP lossy.

Lợi ích và hạn chế của việc sử dụng ảnh WebP

Lợi ích

  • Thời gian tải hình ảnh cũng như toàn bộ trang web nhanh hơn.
  • Hình ảnh kích thước nhỏ giúp giảm mức tiêu thụ băng thông.
  • Với thời gian tải và trải nghiệm người dùng tốt hơn, từ đó trang web được xếp hạng tốt hơn trong các công cụ tìm kiếm.

Hạn chế

  • Định dạng ảnh WebP không được hỗ trợ trên một số trình duyệt, ví dụ như Safari hoặc các thiết bị iPhone, Mac có phiên bản hệ điều hành cũ.
  • Việc quản lý ảnh sẽ khó khăn hơn khi bạn cần sử dụng 2 bộ ảnh: một ở định dạng WebP và một ở định dạng png / jpg.
  • Cấu trúc HTML khi sử dụng ảnh WebP sẽ phức tạp hơn bình thường.

Theo tôi, so với hạn chế thì những lợi ích mà nó đem lại khá đáng kể, và xứng đáng với thời gian của bạn. Sau đây tôi sẽ hướng dẫn bạn sử dụng định dạng ảnh WebP trên trang web của mình.

Chuyển đổi hình ảnh sang định dạng WebP

Bạn có thể sử dụng một trong các cách tiếp cận sau để chuyển đổi hình ảnh của họ sang WebP, đó là cwebp command-line tool hoặc Imagemin WebP plugin (npm package).

Plugin Imagemin WebP là lựa chọn tốt hơn nếu bạn cần tối ưu cho nhiều ảnh hoặc thư mục ảnh trong suốt quá trình chạy dự án, trong khi cwebp cli là lựa chọn tốt cho các dự án đơn giản hoặc nếu bạn chỉ cần chuyển đổi hình ảnh một lần.

Bạn có nhiều tùy chọn trong quá trình chuyển đổi hình ảnh sang WebP nhưng điều duy nhất bạn cần quan tâm là chất lượng (quality level). Bạn có thể chỉ định mức chất lượng từ 0 (kém nhất) đến 100 (tốt nhất), tùy thuộc vào mục đích của bạn.

Sử dụng cwep

Chuyển đổi một tệp duy nhất, sử dụng phương pháp mặc định của cwebp:

cwebp images/flower.jpg -o images/flower.webp

Chuyển đổi một tệp duy nhất, sử dụng mức chất lượng 50, bạn có thể tăng chất lượng lên tùy ý:

cwebp -q 50 images/flower.jpg -o images/flower.webp

Chuyển đổi tất cả các tệp trong một thư mục:

for file in images/*; do cwebp "$file" -o "${file%.*}.webp"; done

Sử dụng Imagemin

Điều đầu tiên bạn cần làm là cài đặt Node.js cho môi trường. Sau khi cài đặt, hãy mở terminal và chuyển đến thư mục gốc của dự án. Sau đó, sử dụng Node Package Manager (npm) để cài đặt imagemin và plugin imagemin-webp:

npm install imagemin imagemin-webp

Tiếp theo, tại thư mục gốc, tạo file webp.js với nội dung như sau

var imagemin = require("imagemin"),    // The imagemin module.
  webp = require("imagemin-webp"),   // imagemin's WebP plugin.
  outputFolder = "./img",            // Output folder
  PNGImages = "./img/*.png",         // PNG images
  JPEGImages = "./img/*.jpg";        // JPEG images

imagemin([PNGImages], outputFolder, {
  plugins: [webp({
      lossless: true // Losslessly encode images
  })]
});

imagemin([JPEGImages], outputFolder, {
  plugins: [webp({
    quality: 65 // Quality setting from 0 to 100
  })]
});

Tập lệnh này sẽ xử lý tất cả các hình ảnh JPEG và PNG trong thư mục và chuyển đổi chúng thành WebP. Khi chuyển đổi hình ảnh PNG, chúng ta đặt tùy chọn lossless (không mất dữ liệu) thành true. Khi chuyển đổi ảnh JPEG, chúng ta đặt tùy chọn quality là 65. Hãy thử nghiệm với các tùy chọn này để nhận được các kết quả khác nhau, tham khảo thêm tại trang  imagemin-webp plugin page.

Để thực thi file trên, bạn chạy lệnh sau

node webp.js

Sử dụng WebP trong HTML

Sau khi xử lý ảnh sang định dạng WebP, bạn cần biết cách sử dụng chúng trong HTML.

Thường thì để hiển thị một hình ảnh, bạn tạo thẻ img và thêm đường dẫn ảnh cho thuộc tính src.

<img src="img/flower.webp" alt="WebP." />

Cách trên sẽ hoạt động tốt, nhưng chỉ trong trường hợp trình duyệt hỗ trợ định dạng ảnh webp.

Độ tương thích của WebP trên các trình duyệt

Bạn có thể kiểm tra các trình duyệt nào hỗ trợ WebP tại đây

Vì vậy, để cho ảnh có thể hoạt động tương thích trên các trình duyệt, bạn cần dùng đến thẻ picture.

<picture>
  <source type="image/webp" srcset="flower.webp">
  <source type="image/jpeg" srcset="flower.jpg">
  <img src="flower.jpg" alt="">
</picture>

Giải thích:

Thẻ <picture> là thẻ bao bọc một hoặc nhiều thẻ <source> và một thẻ <img>.

Thẻ <source> định nghĩa loại ảnh (type) và đường dẫn ảnh (srcset). Trình duyệt đọc các source theo thứ tự từ trên xuống. Nó sẽ tải ảnh từ source được liệt kê đầu tiên, có định dạng mà nó hỗ trợ.

Thẻ <img> để giúp hoạt động trên các trình duyệt không hỗ trợ thẻ <picture>. Tức là nếu một trình duyệt không hỗ trợ thẻ <picture>, nó sẽ bỏ qua và chỉ tải hình ảnh từ thẻ <img>

Sử dụng ảnh WebP cho background

Mặc định, CSS không cung cấp tính kế thừa cho hình ảnh. Vì vậy giải pháp lúc này là thêm class vào thẻ html, để làm dấu hiệu nhận biết trình duyệt có hỗ trợ định dạng ảnh WebP hay không, từ đó bạn dựa vào class đã thêm để style.

Bạn cần đặt đoạn code sau vào trong thẻ <script>:

var webp = new Image();
            webp.onerror = function(){
                $("body").addClass("no-webp")
            };
            webp.onload = function(){
                $("body").addClass("has-webp")
            };

            webp.src = 'data:image/webp;base64,UklGRjoAAABXRUJQVlA4IC4AAACyAgCdASoCAAIALmk0mk0iIiIiIgBoSygABc6WWgAA/veff/0PP8bA//LwYAAA';

Giải thích: class webp được thêm vào thẻ body trong trường hợp trình duyệt hỗ trợ WebP, ngược lại là no-webp.

Dựa vào class trên, bạn sử dụng CSS để style cho background.

.no-webp .elementWithBackgroundImage {
  background-image: url("image.jpg");
}

.webp .elementWithBackgroundImage{
  background-image: url("image.webp");
}

Trong ví dụ trên, ảnh webp sẽ được load ra trong trường hợp trình duyệt hỗ trợ, và ngược lại là ảnh jpg.

Kết luận

Với việc sử dụng định dạng ảnh WebP, website của bạn sẽ tối ưu hơn về mặt hiệu suất dẫn đến trải nghiệm người dùng tốt hơn – một tiêu chí nằm trong bộ chỉ số Core Web Vitals mà Google sẽ tập trung đến để xếp hạng website.

Bên cạnh đó, nếu thời gian tải trang web của bạn có ảnh hưởng trực tiếp đến lượt khách truy cập, từ đó ảnh hưởng đến tỷ lệ chuyển đổi khách hàng tiềm năng của bạn, thì việc bạn dành thời gian để chuyển sang hình ảnh sang định đạng WebP là đáng giá.

Để lại một bình luận

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *