网站建设中,中国大陆地区请使用VPN访问,欢迎提建议,关注LSKR Mastodon

解释google blogger新特性延迟加载和webP图片发布

详细解释了Blogger.com或BlogSpot的两个新特性延迟加载(Lazy Load)和webP图片发布(Webp Image Format)的实际好处和展示效果。

最近google Blogger添加了两个新特性,延迟加载图片(Lazy Load)和WebP图片发布(Webp Image servering)。本文将详细介绍这两个功能作用和好处,以及如何打开。

开启功能

登录后台,打开设置,找到对应的选项打开即可。

延迟加载图片(Lazy Load)

这是浏览器级别的图像延迟加载,因此不需要脚本。如果你启用了这个选项,Blogger会将loading ='lazy'属性添加到<img>post/page中的所有标签中,主题的其他元素必须手动编辑。
文章中的图片,会被自动添加这个属性,来实现延迟加载的效果。主题相关的图片不会受到影响。

效果

当我们浏览网页端的时候,只有下滑到的对应的图像后,图像才会显示出来。
参考:https://web.dev/browser-level-image-lazy-loading/#the-loading-attribute

WebP图片发布(Webp Image Format)

启用这个选项后,Blogger只会在文章或页面里的图片网址后面加上-rw参数(紧跟在宽度和高度参数之后)。例如:
原来:/w640-h450/
现在:/w640-h450-rw/
浏览器会把带有-rw的图片识别为WEBP格式的图片,即使它们的扩展名还是.jpg或.png。如果您想把这个功能应用到主题里的其他图片,您需要手动修改代码。有了这个选项以后,我们就不用自己的手动去添加的-rw选项了。

总结

  1. 当您将图片上传到 Blogger 时,它会自动将图片的 WebP 版本提供给支持该图片的浏览器(如 Chrome、Firefox、Edge 等)。
  2. 对于不支持 WebP 的浏览器(如旧版 Internet Explorer),Blogger 将继续提供原始图片格式(JPEG、PNG 等)。
这两个新功能都是google blogger 后台启动的优化选项,他会自动给帮你生成webp(上传PNG)然后根据浏览器是否支持,加载png或者webp 。(如果访问不高,可能放弃生成副本webp)。

إرسال تعليق

Cookie Consent
我们使用 Cookie 来了解您如何使用我们的网站并提升您的体验。这包括个性化内容和广告。
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.