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.
Cách sử dụng CSS tạo hình nền bằng webp
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 WebP không được hỗ trợ.
Như ở trên bạn thấy có 2 lớp xuất hiện trong css đó là .webp và .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-webp, webp 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);
}Tải chậm hình nền với hình ảnh định dạng webp
Khi sử dụng Hình ảnh nền bằng webp để cải thiện Tốc độ tải trang thì bạn có thể xem xét đến việc tải chậm các hình nền (Lazy Loading). Chỉ khi cuộn trang đến nơi có hình nền thì hình ảnh mới được tải.
Với ví dụ như trên mã css của hình ảnh nền sẽ là:
Ví dụ
.webp .slide-item-1.lazybg {
background-image: none;
background-color: #F1F1FA;
}
.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);
}Khi đó mã HTML của khối có hình nền sẽ là
Ví dụ
<div class="image slide-item-1 lazybg"></div>Để tải chậm hình nền trên bạn cần kết hợp với mã JS như sau:
Ví dụ
document.addEventListener("DOMContentLoaded", function() {
var lazyloadImages;
if ("IntersectionObserver" in window) {
lazyloadImages = document.querySelectorAll(".lazybg");
var imageObserver = new IntersectionObserver(function(entries, observer) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
var image = entry.target;
image.classList.remove("lazybg");
imageObserver.unobserve(image);
}
});
});
lazyloadImages.forEach(function(image) {
imageObserver.observe(image);
});
} else {
var lazyloadThrottleTimeout;
lazyloadImages = document.querySelectorAll(".lazybg");
function lazyload () {
if(lazyloadThrottleTimeout) {
clearTimeout(lazyloadThrottleTimeout);
}
lazyloadThrottleTimeout = setTimeout(function() {
var scrollTop = window.pageYOffset;
lazyloadImages.forEach(function(img) {
if(img.offsetTop < (window.innerHeight + scrollTop)) {
img.src = img.dataset.src;
img.classList.remove('lazybg');
}
});
if(lazyloadImages.length == 0) {
document.removeEventListener("scroll", lazyload);
window.removeEventListener("resize", lazyload);
window.removeEventListener("orientationChange", lazyload);
}
}, 20);
}
document.addEventListener("scroll", lazyload);
window.addEventListener("resize", lazyload);
window.addEventListener("orientationChange", lazyload);
}
})Hy vọng với bài viết này đã giúp bạn hiểu được cách sử dụng hình ảnh webp làm nền và tối ưu với việc tải chậm hình nền webp.