Hướng dẫn
Quảng cáo

Sử dụng hình ảnh WebP trong CSS Background

Hướng dẫn dùng hình ảnh WebP làm nền trong CSS để tối ưu tốc độ tải trang trong thiết kế website

Nếu bạn đã sử dụng hình ảnh WebP cho thẻ HTML <img> của mình và cũng muốn bật WebP cho nền CSS, thì cách thích hợp là sử dụng nhiều hình nền trong kiểu CSS.

Ví dụ: bạn có một phần tử có nền CSS là ảnh .jpg:

Ví dụ

.slide-item-1 {
	background: url(/uploads/assets/slider-1.jpg);
}


Để chuyển nó sang WebP, bạn cần chuyển đổi ảnh PNG / JPG / GIF sang ảnh WebP theo cách thủ công bằng một trong những công cụ miễn phí trên Internet (Xem thêm Tạo hình ảnh Webp bằng PHP và mã HTML). Lưu nó trong cùng một thư mục và sử dụng CSS như sau:

Ví dụ

.webp .slide-item-1 {
	background: url(/uploads/assets/slider-1.webp);
}
.no-webp .slide-item-1 {
	background: url(/uploads/assets/slider-1.jpg);
}


Trong trường hợp này, tất cả các trình duyệt sẽ nhận được hình ảnh WebP, ngoại trừ những trình duyệt không hỗ trợ WebP. Trình duyệt sẽ tải hình ảnh .jpg khi WebPkhông được hỗ trợ.

Như ở trên bạn thấy có 2 lớp xuất hiện trong css đó là .webp.no-webp đó là dùng để xác định trình duyệt hỗ trợ webp hay không. Để website có thể tự động thêm các lớp đó vào website bạn có thể dùng code JavaSctipt (ví dụ: Modernizr ) để kiểm tra xem trình duyệt có hỗ trợ webp hay không.

 

Ghi chú: Khi bạn thêm tệp tin JavaScript của Modernizr thì nó sẽ tự động kiểm tra xem trình duyệt có hỗ trợ webp hay không và tự động thêm các lớp no-webpwebp vào thẻ html của website.

Người dùng bị vô hiệu hóa JavaScript thì sao?

Nếu bạn đang sử dụng Modernizr, bạn phải nghĩ đến trường hợp những người dùng đã tắt JavaScript. Nếu bạn định sử dụng tính năng phát hiện xem trình duyệt có bật JavaScript hay không thì không khả thi vì trình duyệt nếu tắt JS rồi thì bạn sẽ không kiểm tra được.

Để giải quyết vấn đề này, chúng ta sẽ bắt đầu bằng cách thêm một lớp no-js vào thẻ <html>:

Ví dụ

<html class="no-js">

Sau đó, chúng ta sẽ viết một đoạn nhỏ tập lệnh JavaScriptvà chúng ta sẽ đặt trước bất kỳ tập lệnh nào khác:

Ví dụ

<script>
  document.documentElement.classList.remove("no-js");
</script>

Thao tác này sẽ xóa  lớp no-js trên thẻ <html> khi được phân tích cú pháp - có nghĩa là khi JavaScript được bật.

Vậy điều này có ích gì cho chúng ta? Khi JavaScript bị vô hiệu hóa, tập lệnh này sẽ không bao giờ chạy, vì vậy lớp no-js sẽ ở trên phần tử. Điều này có nghĩa là chúng tôi có thể thêm một quy tắc khác để cung cấp loại hình ảnh có sự hỗ trợ rộng rãi nhất:

Ví dụ

.no-js .slide-item-1 {
	background: url(/uploads/assets/slider-1.jpg);
}


Điều này bao gồm tất cả các trường hợp chúng ta có thể nghĩ ra. Nếu JavaScript có sẵn, tập lệnh nội tuyến sẽ được chạy và loại bỏ lớp no-js trước khi phân tích cú pháp CSS, vì vậy JPEG không bao giờ được tải xuống trong trình duyệt hỗ trợ WebP. Nếu JavaScript thực sự bị tắt, thì lớp này sẽ không bị xóa và định dạng hình ảnh tương thích hơn sẽ được sử dụng.

Bây giờ chúng ta đã thực hiện tất cả những điều này, đây là những trường hợp sử dụng mà chúng ta có thể nghĩ đến:

  • Những người có thể sử dụng WebP sẽ nhận được WebP.
  • Những người không thể sử dụng WebP sẽ nhận được hình ảnh PNG hoặc JPEG.
  • Những người bị tắt JavaScript sẽ nhận được hình ảnh PNG hoặc JPEG.

Code CSS đầy đủ các trường hợp sẽ là:

Ví dụ

.webp .slide-item-1 {
	background: url(/uploads/assets/slider-1.webp);
}
.no-js.slide-item-1, .no-webp .slide-item-1 {
	background: url(/uploads/assets/slider-1.jpg);
}

Bài viết này đã giúp ích cho bạn?

Bài viết mới

Advertisements