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

Tính năng Lazy Load và Phân Phát hình ảnh ở định dạng WebP là tính năng rất cần thiết cho một trang web hoặc blog, làm tăng đáng kể điểm số PageSpeed.
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
Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated

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.

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

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, eagerauto

  • 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.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.

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

Trong trường hợp bạn không thấy 2 mục Tải từng phần hình ảnhPhâ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!

0/5
0 ratings
5
4
3
2
1
Có những thứ luôn quẩn quanh cuộc đời bạn và đôi lúc không có lời giải thích, liệu rằng đó có phải là duyên số?!

9 Nhận xét

Your email address will not be published.

Enter Image URL / Code Snippets / Quotes / name tag, then click parse button accordingly that you have entered. then copy the parse result and paste it into the comment field.


  1. Tomorrow
  2. Tomorrow

    Kb nó có tác dụng với những bài đăng trước khi bật ko, hay chỉ có tác dụng với những bài tạo mới sau khi đã bật

    Trả lời Xóa
  3. A Đê Min

    Sao mình bật rồi mà không được nhỉ? :D

    Trả lời Xóa
  4. Fiat Trịnh Xuân Thọ
    10/04/2023 11:14:00 CH

    Cuối cùng cũng có ngày này.
    Hình như những hình lấy từ data:post.thumbnailUrl đều không hiển thị định dạng webp.

    Trả lời Xóa

Maybe You Like

Follow
Google Translate