Hướng dẫn thêm hình ảnh WebP trên Blogspot hoặc AMP

Trong bài viết này, chúng ta sẽ tìm hiểu cách thêm hình ảnh WebP trên Blogspot của bạn rất hữu ích trên blog AMP. AMP có tính năng thay thế bao gồm WebP và các định dạng hình ảnh truyền thống khác.
Cấu trúc AMP sẽ tự động chuyển trở lại định dạng hình ảnh truyền thống nếu trình duyệt không hỗ trợ định dạng WebP. WebP là một định dạng hình ảnh với nén lossy và lossless.
Nó được giới thiệu bởi On2 Technologies mà sau đó được mua lại bởi Google. Nó cũng là một dự án chị em cho định dạng container đa phương tiện Web M.

Theo Google [Nguồn: Định dạng hình ảnh mới cho Web]
WebP lossless hình ảnh có kích thước nhỏ hơn 26% so với PNG. Hình ảnh mất webP nhỏ hơn 25-34% so với hình ảnh JPEG tương đương trên chỉ số chất lượng SSIM tương đương.

WebP trong Blogspot

Mặc dù Blogger không chính thức hỗ trợ tải lên các định dạng hình ảnh WebP, nhưng chúng ta có thể buộc Google hiểu hình ảnh như WebP với những thay đổi nhỏ đối với URL hiện tại.

URL hiện tại

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtj_03GCWdXlGOzw4bo-MTmua8FQqkd5q48Sj9fw4Fm-g5W54SnbG8JDAJSIRnzQSc9xLE1GQ4LKfB10DSC_PyXRIPLS7EuexuWQ9TborO6CGb4LgaE5ocpJnyZgNQoDbK4e27Wsf_CuKx/d/tutorial.jpg

WebP URL

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtj_03GCWdXlGOzw4bo-MTmua8FQqkd5q48Sj9fw4Fm-g5W54SnbG8JDAJSIRnzQSc9xLE1GQ4LKfB10DSC_PyXRIPLS7EuexuWQ9TborO6CGb4LgaE5ocpJnyZgNQoDbK4e27Wsf_CuKx/rw/tutorial.jpg

Đơn giản chỉ cần thêm các thẻ tương tự ở trên. -rw d s600

Cấu trúc hoàn chỉnh của hình ảnh WebP với link thay thế sẽ như thế này

	<amp-img
  alt="bloginoobs"
  width="550"
  height="368"
  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtj_03GCWdXlGOzw4bo-MTmua8FQqkd5q48Sj9fw4Fm-g5W54SnbG8JDAJSIRnzQSc9xLE1GQ4LKfB10DSC_PyXRIPLS7EuexuWQ9TborO6CGb4LgaE5ocpJnyZgNQoDbK4e27Wsf_CuKx/rw/tutorial.jpg"
  layout="responsive">
  	<amp-img
    alt="bloginoobs"
    fallback
    width="550"
    height="368"
    src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtj_03GCWdXlGOzw4bo-MTmua8FQqkd5q48Sj9fw4Fm-g5W54SnbG8JDAJSIRnzQSc9xLE1GQ4LKfB10DSC_PyXRIPLS7EuexuWQ9TborO6CGb4LgaE5ocpJnyZgNQoDbK4e27Wsf_CuKx/d/tutorial.jpg"
    layout="responsive">
  	</amp-img>
	</amp-img>

Thay đổi URL và dán vào bên trong bài viết của bạn. Về mặt hỗ trợ, WebP không được hỗ trợ bởi các trình duyệt cũ hơn nhưng hầu hết các định dạng hiện đại sẽ hỗ trợ WebP. Khi tôi xem xét các trường hợp blogger, tôi không thể tải lên hình ảnh WebP trực tiếp và tôi gián tiếp chuyển đổi hình ảnh sang định dạng WebP.

HỖ TRỢ LOSSY WEBP

Google Chrome (máy tính để bàn) 17+

Google Chrome dành cho Android phiên bản 25+

Microsoft Edge 18+

Firefox 65+

Opera 11.10+

Trình duyệt web gốc, Android 4.0+ (ICS)

Một hình ảnh WebP có thay đổi kích thước so với hình ảnh nguồn?
Có, thông thường khi chuyển đổi từ định dạng lossy sang WebP lossless hoặc ngược lại. Điều này chủ yếu là do sự khác biệt về không gian màu sắc.

Kết thúc

Tôi hy vọng bài viết này Hướng dẫn thêm hình ảnh WebP trên Blogspot hoặc AMP giúp bạn hiểu rõ hơn về cách sử WebP cho blogspot. Nếu bạn cảm thấy bất cứ điều gì là thiếu trong bài viết của tôi, vui lòng cho tôi biết.
Bạn có thể tự do bình luận về những thắc mắc và câu hỏi của bạn dưới đây. Nếu bạn thích bài viết này, xin vui lòng chia sẻ nó với bạn bè của bạn. Cảm ơn!