成都定制建站

2022-07-30 分类：网站建设

了解渐进式JPEG和WebP格式

为了提高转化率并帮助商人赚钱，在线商店必须有出色的表现。当涉及到我们在线提供的不同类型的内容时，网站上的照片几乎总是大的资产。因此，如果我们改善为在线用户提供服务的照片的性能和传递，我们可能会改善网站的整体性能。

通过Shopify合作伙伴计划发展您的业务

无论您提供市场营销，定制服务还是网站设计和开发服务，Shopify合作伙伴计划都将助您成功。免费加入并获得收益分享机会，发展业务的工具以及充满激情的商业社区。

什么是渐进式jpeg？

渐进式JPEG是使用与典型基准JPEG不同的编码过程创建的图像。传统上，JPEG是从上到下，从左到右进行编码和解码的。这称为基准编码。但是，渐进式JPEG以不同的方式编码。当您看到渐进式JPEG加载时，您会看到完整图像的模糊版本，随着时间的推移，该版本会随着在浏览器中解码或渲染图像而变得更加清晰。

JPEG和WebP基准

基准JPEG加载分别为33％，66％和100％

JPEG和WebP逐行

渐进式JPEG加载分别为33％，66％和100％

旧的又是新的

对于那些已经足够记住拨号上网的人来说，渐进式JPEG在90年代非常流行，尤其是因为我们处理的是缓慢的互联网连接。我们今天使用它们的主要原因是为那些连接速度较慢的用户（如移动或农村地区）提高性能。

您可能还会喜欢：使用自适应图像减少页面加载时间。

为什么要使用渐进式JPEG？

渐进式JPEG的一个明显优势是存在明显的性能提升。用户可以在完成下载之前预览图像的外观。此外，图像在您的网站上占用的布局和空间加载速度更快，使整个过程感觉更快。即使最终图像在视觉上相同，渐进式JPEG也通常比非渐进式JPEG小。

重要的是要记住，渐进式JPEG会花费更多的CPU时间和内存来进行编码和解码，因为图像数据会被多次解析。因此，虽然确实可以更快地预览，但解码的总时间可能会接近2.5倍。

img_url Liquid中的过滤器和格式选项

使用Liquid的img_urlfilter，您可以传递图像的格式选项。看起来像这样：

只需将所需的格式选项传递到img_url过滤器，Shopify将允许您指定要呈现的格式。

您可能还会喜欢：如何使用img_url过滤器处理图像。

Shopify推出WebP

就在上周，Shopify开始自动提供WebP图像。WebP是一种现代图像格式，可为Web上的图像提供出色的压缩效果，与PNG和JPEG等传统文件格式相比，文件大小平均可节省30％以上。较小的图像意味着更快的下载时间和较少的网络带宽使用，这两者都有助于页面显示速度明显加快。

JPEG和WebP格式

要检查您的商店是否正在渲染WebP，只需在Chrome中打开开发者控制台，然后转到“ 网络”标签。重新加载页面，您应该能够看到该类型设置为webp。

这项改进的大好处是，您无需更改开发人员的代码。此外，对WebP的支持已经相当不错，Shopify将在不支持该格式的浏览器（例如Safari或IE）中退回到典型的JPEG。

那么什么时候应该使用渐进式JPEG与WebP？

如果您使用的是现有主题，那么除了使用延迟加载外，还可以利用WebP更新，这是保持快速运行的理想方法。

您可能还会喜欢：延迟加载如何优化Shopify主题图像。

而且，如果您要使用渐进式JPEG，请确保您了解为什么要使用它们，因为它们也有缺点。我警告不要对小图像（如缩略图）使用渐进式JPEG格式，因为它们的文件大小实际上比常规JPEG图像大。

像其他任何东西一样，测试并查看您所做的更改是否确实减少了首次有意义的绘画的时间非常重要。在某些情况下，最好使用本机WebP格式和延迟加载而不是使用渐进JPEG。例如，考虑渲染的渐进JPEG和WebP之间的文件大小差异。如果渐进式JPEG接近（小于10kb至20kb）或小于WebP，并且图像在页面加载时可见，那么请考虑在WebP上使用渐进式JPEG。

新闻标题：成都定制建站
转载源于：/news11/183561.html

成都网站建设公司_创新互联，为您提供云服务器、做网站、移动网站建设、网站营销、网站设计公司、网页设计公司

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容