使用下一代图像

Singapore Data Forum highlights advancements in data-driven solutions
Post Reply
Bhinder
Posts: 13
Joined: Tue Dec 10, 2024 3:22 am

使用下一代图像

Post by Bhinder »

如果我们使用 Google 的 Pagespeed Insights,它肯定会告诉我们使用下一代图像格式。
这种配置有一个问题,那就是并非所有浏览器和版本都接受这些格式,因此实施成本可能会更高。
这些新格式是:JPEG 2000、JPEG XR 和 WebP
与往常一样,问题的存在是因为大公司不同意,并且每个公司都在其浏览器中应用最适合他们的格式。

在网站https://caniuse.com/上,我们可以 西班牙 whatsapp 购物数据 看到哪些浏览器接受不同的格式。

Image

我们可以很容易地看到,Apple 的 Safari 支持 JPEG 2000,Miscrosoft 的 Edge 支持 JPEG XR。
推荐使用 WebP 格式,因为尽管它属于 Google,但它在其他浏览器中是最受接受的。
Webp 浏览器支持
Webp 浏览器支持
为了实现,必须将<img>标签更改为<picture>,以防止人们浏览不接受它的浏览器,以他们可以看到的另一种格式显示图像。

网页HTML
网页HTML
要将图像转换为 webp,我们可以使用工具https://webp-converter.com/

如果我们使用 CMS,则有一些模块负责应用所有必要的内容,但它可能需要可能未激活的服务器资源。
启用图像延迟加载(Lazy Load)
所谓的延迟加载,包括异步加载图像,以便在页面初始加载后加载图像。

应用此配置的方法有多种,最强大的方法仅在滚动到图像时加载图像。

如果我们要在 CMS 中应用此更改,我们必须小心我们的主题不会“破坏”。

Google 给我们提供了一个示例,可以在其 web.dev 中开发这种延迟加载

使用 CDN
我们的服务器使用 CDN 非常重要,以便我们为所有用户提供通过最近的服务器连接到我们的网站的能力。

CDN 将我们的网站复制到世界各地的多个服务器上,以便任何人都可以尽快访问该网站。

Cloudflare 是最著名的 CDN 之一,它有免费版本,因此任何人都可以开始使用此类工具。

如果您没有太多知识,最好联系您的托管提供商,以便他们可以帮助您配置 CDN(如果您尚未激活 CDN)。

减少第三方代码的影响
这一点应用起来比较复杂,因为理想的是我们不需要对服务器外部的文件进行任何调用,以便能够在内部将缓存应用于该文件。

问题是,如果我们想要测量网络流量(Google Analytics)、分析行为(Hotjar)或实现任何其他工具,我们可能无法消除这些外部脚本。

正如我之前提到的,我们不必痴迷于获得最好的成绩,但我们必须优化手中的一切。

这些只是一些需要改进的地方,每个网站都会有其他网站没有的地方,但是借助这些工具,我们可以识别改进之处并改进我们的网站。
Post Reply