Last posts

Cách Cung Cấp Hình Ảnh Ở Định Dạng WebP Trong Blogger

Khi tôi phân tích một trong những trang web của mình trong công cụ tăng tốc độ trang của Google , tôi đã thấy cơ hội để tăng tốc độ trang web của mình. Đó là "Cung cấp hình ảnh ở định dạng thế hệ tiếp theo". Để làm cho tốc độ của blogger của bạn nhanh hơn, bạn nên cung cấp hình ảnh ở Định dạng thế hệ tiếp theo. Có lẽ bạn có thể sử dụng định dạng WebP của hình ảnh. Trong bài viết này, tôi sẽ cho bạn biết, Cách cung cấp Hình ảnh ở Định dạng WebP trong Blogger.


Nếu bạn kiểm tra trang web của mình trong công cụ tốc độ trang của Google, chắc chắn bạn cũng sẽ nhận được cơ hội này.

Kiểm tra trang web của bạn ở đây .

Trong bài viết này, tôi sẽ chỉ cho bạn cách cung cấp hình ảnh ở định dạng Next-gen trong Blogger, Định dạng WebP của hình ảnh là gì, lợi ích của việc sử dụng những hình ảnh này là gì, v.v.

Hình ảnh WEBP là gì?

WebP là một định dạng hình ảnh do Google cung cấp. Nó có phần mở rộng tệp là .WebP.

Được phát hành lần đầu vào năm 2010, WebP có khả năng sử dụng cả nén hình ảnh mất dữ liệu và không mất dữ liệu để tạo ra hình ảnh nhỏ hơn và phong phú hơn mà không làm giảm tốc độ tải trang web.

Theo google.

Bằng cách sử dụng định dạng hình ảnh webp, bạn có thể nhận được hình ảnh không mất dữ liệu có kích thước nhỏ hơn 25% khi so sánh với định dạng hình ảnh png và kích thước nhỏ hơn 25% -34% so với hình ảnh jpeg.

Ưu điểm khi sử dụng các hình ảnh định dạng WEBP

WebP là một công nghệ định dạng hình ảnh mới nổi do Google cung cấp.

Nó được thiết kế để sử dụng nén được tối ưu hóa tốt hơn sau đó là JPG và PNG.

Nó có thể giảm kích thước tệp mà giảm chất lượng tối thiểu.

Sử dụng định dạng hình ảnh WebP, bạn có thể tạo trang web tải nhanh, tiêu tốn ít băng thông hơn.

Ưu điểm của hình ảnh WEBP trong tìm kiếm của GOOGLE

Nếu bạn sử dụng hình ảnh WebP trong trang web của mình, nó sẽ làm tăng tốc độ trang web của bạn. Nó có nghĩa là khách truy cập trang web của bạn rất vui. Nó sẽ làm cho google hài lòng. Rõ ràng là nó có thể tăng thứ hạng trang web của bạn trong Google Tìm kiếm.

Cách khắc phục hình ảnh định dạng WEBP trong BLOGGER

Trong Blogger, bạn không thể tải lên trực tiếp hình ảnh WebP. Tôi đã thử nó cá nhân. Nó sẽ hiển thị một lỗi như thế này.👇


Vì vậy, để cung cấp hình ảnh WebP trong Blogger, chúng tôi phải sử dụng định dạng JPG và JPEG của hình ảnh và được thay đổi thành định dạng WebP chỉ trong bài đăng.

Các bước để thực hiện việc này như sau.

1. Chọn bài đăng của bạn và nhấp vào chỉnh sửa.

2. Đặt hình ảnh của bạn trên kích thước ban đầu của nó.  


Ghi chú. Nếu bạn chưa tải lên bất kỳ hình ảnh nào trong bài đăng đó, trước tiên, bạn tải lên hình ảnh ở định dạng JPG hoặc JPEG ở kích thước gốc.

3. Chuyển đến phần HTML của bài đăng của bạn.                                    

Ghi chú. Luôn đặt hình ảnh ở kích thước ban đầu trước khi thực hiện các thay đổi về phía HTML và luôn đặt hình ảnh đầu tiên của bài đăng của bạn ở kích thước hình vuông.

4. Bây giờ tìm mã hình ảnh như thế này.
<div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkkke3fybFVa1C154FrOdJyi6LhScSI2Rq0hPsVrpZ3hXrclNmKABoYJyyhBtRXwaopJZD8sMBRtP-MuLgPbLut9T7K1D7Bx4_bIpzb27I-OuDZa1DmbckbE2Bp1134bqJRTGny6wRHTI/s1600/IMG_20200221_163235.webp" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="How serve images in webP format in blogger." border="0" data-original-height="544" data-original-width="720" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkkke3fybFVa1C154FrOdJyi6LhScSI2Rq0hPsVrpZ3hXrclNmKABoYJyyhBtRXwaopJZD8sMBRtP-MuLgPbLut9T7K1D7Bx4_bIpzb27I-OuDZa1DmbckbE2Bp1134bqJRTGny6wRHTI/s1600/IMG_20200221_163235.webp" title="How to serve images in next-gen Format in blogger." /></a></div> <br /></div>

Sau “s1600”, chỉ cần viết “-rw” trên cả hai vị trí. Bây giờ hãy xem mã được cập nhật, các thay đổi được hiển thị bằng màu đỏ.

Ghi chú. Đôi khi ở vị trí của “s1600”, bạn có thể thấy các mã khác như “s200”, “s320”, “s400”, “s640”, v.v. Nhưng đừng lo lắng về điều này. Bạn phải viết “-rw” sau bất kỳ mã nào.

Cập nhật bài đăng của bạn và kiểm tra nó trong công cụ tốc độ trang của Google .

Đây là một phương pháp thay thế để kiểm tra xem hình ảnh của bạn có ở định dạng WebP hay không. Vào bài viết của bạn và lưu hình ảnh bài đăng của bạn vào máy tính, bạn sẽ thấy hình ảnh đó được lưu ở định dạng WebP.

Công việc độc quyền

Đôi khi bạn có thể không tìm thấy các mã trên trong bài viết trên blogger của mình. Trong một số chủ đề blogger, mã hình ảnh của bạn có thể khác với các mã trên.
Bạn có thể tìm thấy các mã hình ảnh này thay cho các mã trên.
<div class="separator" style="clear: both; text-align: center;"> <img alt="" class=" lazyloaded" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5-x4kH9XFh0g12CrbBQqjDOXMnEXzQPlWKM6p96-BAXNZUubJrM-eqTqNyYNoCCqD1okIRYBwFaWvIK_bZDM92DfH8N5m4TJn-CadQlUc9mZVNj2R9FPSW8g6hiflxWxxF72rZ5lJDSXx/w42-h280-p-k-no-nu/Borderlands+The+Handsome+Collection+Sedang+Gratis+di+Epic+Games%252C+Begini+Cara+Mendapatkannya.png" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5-x4kH9XFh0g12CrbBQqjDOXMnEXzQPlWKM6p96-BAXNZUubJrM-eqTqNyYNoCCqD1okIRYBwFaWvIK_bZDM92DfH8N5m4TJn-CadQlUc9mZVNj2R9FPSW8g6hiflxWxxF72rZ5lJDSXx/w420-h280-p-k-no-nu/Borderlands+The+Handsome+Collection+Sedang+Gratis+di+Epic+Games%252C+Begini+Cara+Mendapatkannya.png" title="" /></div>

Phương pháp giải quyết vấn đề này

Đừng lo lắng vì phương pháp này cũng giống nhau đối với các mã này. Chỉ cần chúng ta thay đổi vị trí của “-rw” trong các mã này.

Viết “-rw” sau “w420” ở cả hai chỗ. Bây giờ hãy xem mã được cập nhật.

Kiểm tra hình ảnh của bạn xem chúng có ở định dạng WebP hay không bằng cách lưu chúng vào PC của bạn hoặc bằng công cụ tốc độ trang của Google.

Đó là nó.

Nó không phải là nó dễ dàng phải không? 😁😁
Nếu bạn đang gặp phải một số vấn đề liên quan đến vấn đề này, hãy hỏi tôi bằng hộp bình luận. Tôi sẽ rất vui khi trả lời.
Nếu bạn thấy rằng bài viết này thực sự hữu ích, xin vui lòng đánh giá cao và chia sẻ tích cực.
Techplus
By : Techplus
I like to write, like to share what I know. Although not well written. So I don't care if people like reading or not? :D
Comments



Font Size
+
16
-
lines height
+
2
-