Blogger mới Update thêm tính năng lazy load và phân phát định dạng WebP cho hình ảnh - NLD Blog

Có thể các bạn chưa biết thì gần đây Blogger hay Blogspot mới update thêm tính năng lazy load images và WebP image serving, theo như mô tả thì lazy load sẽ tự động tải từng hình ảnh khi người đọc cuộn trang xuống và sẽ tự động phân phát hình ảnh cho bài đăng bằng WebP.

Lazy load hình ảnh Blogger

Cụ thể hơn là giờ đây các bạn không cần thêm thủ công thược tính loading="lazy" vào từng thẻ img để lazy load hình ảnh nữa mà giờ đây Blogger đã tự động thêm thuộc tính đó vào từng thẻ img chứa hình ảnh của bạn. Về cơ bản các bạn có thể hiểu tính năng này sẽ cho trình duyệt của bạn biết rằng “Tao có các tấm ảnh này, nhưng mày đừng tải nó nhé. Khi nào người dùng cuộn đến đến vị trí tấm ảnh nào, thì mày hãy tải tấm ảnh ấy ngay”.

Thuộc tính loading có 3 giá trị là lazy, eager và auto

• lazy: browser cần lazy-load tấm ảnh này
• eager: browser cần tải tấm ảnh này ngay lập tức (hoặc càng sớm càng tốt). Nếu tấm ảnh đang được load với cơ chế lazy mà bạn đổi nó sang eager thì nó sẽ lập tức tải ngay.
• auto: browser sẽ quyết định việc có nên lazy-load ảnh hay không.

Cách này không áp dụng cho việc lazy load ảnh background.

Lưu ý rằng trình duyệt không đợi đến lúc ảnh xuất hiện ở viewport mới tải, mà khi ảnh gần xuất hiện ở viewport là nó đã tải rồi. Điều này giúp trình duyệt tải ảnh sớm nhất có thể để nó sẵn sàng xuất hiện trên màn hình kịp lúc, vì tải cũng mất thời gian mà.

Phân phát hình ảnh cho bài đăng bằng định dạng WebP

Đầu tiên WebP là một định dạng hình ảnh hiện đại cung cấp các tính năng nén vượt trội lossless và lossy cho hình ảnh trên web. Đối với việc sử dụng WebP, chúng ta có thể tạo ra các hình ảnh tinh gọn hơn, phong phú hơn, giúp website, blog tải nhanh hơn.

Hình ảnh khi nén lossless của WebP có kích thước nhỏ hơn 26% so với PNG. Hình ảnh WebP lossy thì nhỏ hơn 25-34% so với hình ảnh JPEG tương đương với chỉ số chất lượng tương đương.

Trước đây các bạn phải tự thêm -rw vào sau thuộc tính kích thước hình ảnh như sau:

https://blogger.googleusercontent.com/img/b/.../.../s1600/blogger-update-phan-phat-dinh-dang-webp.jpg

Để phân phát hình ảnh ở định dạng webp thì chúng ta thêm -rw ngay sau thuộc tính kích thước, sẽ là s1600-rw. Nó sẽ như dưới đây:

https://blogger.googleusercontent.com/img/b/.../.../s1600-rw/blogger-update-phan-phat-dinh-dang-webp.jpg

Và đó là cách thủ công mà mình đã làm với tất cả các hình ảnh trên Blog mình để tối ưu kích thước hình ảnh và cho Blogger biết rằng hình ảnh đó ở định dạng WebP. Nếu như không có thuộc tính -rw thì cho dùng các bạn có lưu hình ảnh ở định dạng .WebP nhưng Blogger vẫn phân phối nó ở định dạng .PNG hoặc .JPG, và khi bạn check PageSpeed thì nó vẫn hiện cảnh báo khuyên bạn nên phân phối hình ảnh ở dưới định dạng WebP hoặc AVIF.

Nhưng giờ đây các bạn không cần làm thủ công với từng hình ảnh nữa mà Blogger đã cho phép tự động phân phối hình ảnh ở định dạng WebP rồi, có nghĩa là giờ đây trong bài viết của các bạn khi đăng tải ảnh nên nó sẽ tự động thêm -rw và sau thuộc tính kích thước hình ảnh của bạn.

Cách bật lazy load và phân phát định dạng WebP cho hình ảnh trên Blogger

Để bật được 2 tính năng này thì các bạn chỉ cần truy cập vào trang quản trị blogger sau đó vào Cài đặt > Bài đăng > Tải từng phần hình ảnh. và Cài đặt > Bài đăng > Phân phát hình ảnh bằng WebP., các bạn bật 2 tính năng đó lên là được.

Trong trường hợp bạn không thấy 2 mục Tải từng phần hình ảnh và Phân phát hình ảnh bằng WebP, thì các bạn có thể truy cập draft.blogger.com và theo các bước ở trên để kích hoạt 2 tính năng hay ho này.

Bài viết mình có sử dụng thông tin thêm trên mạng, nếu bài viết chưa đúng hay thông tin sai mong các bạn góp ý vào phần bình luận!