如何进行Shopify图片压缩?

image compression

压缩图像是使网站加载更快最简单的方法之一。

在Shopify网站上,有两种方法可以最大限度地提高压缩率:

  1. 安装Shopify图像优化应用,例如Crush Pics
  2. 使用TinyPNG.com之类的工具手动压缩应用程序无法访问的任何图像

由于API的限制,图片优化应用无法获取你网站上的所有图片。这是第2部分(手动压缩)起作用的地方

因此,即使安装了优化应用程序,你仍可能在如下分析工具中收到警告:

finding images to be optimized

要解决此问题,你必须手动压缩它们(下面的步骤2)。

Crush Pics /优化应用程序将自动压缩

  • 产品图片
  • 收藏和博客精选图片
  • 上传到Assets文件夹中的所有图像

这些需要手动压缩

  • 在“自定义主题”部分中上传的图像
  • 插入页面或博客文章内的图像
  • 图片已上传到“设置”中的“文件”部分

步骤1:自动压缩图像

安装Crush Pics并设置为自动压缩。有关建议设置的指南,请查看此信息。

步骤2:手动压缩影像

你可以使用 TinyPNG 的在线压缩器来手动压缩任何图像(JPG或PNG)。

前往TinyPNG.com并上传您的图片

tinypng home page 1024x239 1

在上传了上面那些在PSI中发出警告的图片后(加上一些PSI没有检测到的巨大的横幅图片),我们现在看到它们被压缩了,节省了大约3MB……这是一个很大的问题。

tinypng savings 1024x593 1

如何查找和下载需要压缩的图像?

可以使用GTMetrixDareboost进行速度测试,获得应该压缩的图像列表。

你可能会看到以下内容:

finding images to be optimized

这里的图片可以进行压缩以节省重量。

如果你的电脑上有原始图片,你可以将这些图片上传到TinyPNG。

如果你需要下载文件,请看图片url的末尾。

它可能看起来是这样的。

  • https://cdn.shopify.com/s/files/1/1339/9941/t/29/assets/image1.jpg
  • 或https://cdn.shopify.com/s/files/1/1339/9941/t/29/assets/image1_800x.jpg

如果是第一个例子,只需右击并下载图片,然后通过TinyPNG运行。

如果是第二个例子,橙色中高亮的部分是一个Shopify图像URL过滤器,这意味着它需要原始图像并提供一个特定的大小(以加快加载速度)。在这种情况下,在一个新的标签页中打开图像,然后从url中删除_800x(或任何数字),然后加载该新url,给你原始图像。

然后你可以下载它,并通过TinyPNG运行它。

*在上面的截图中,他们没有Shopify图片url过滤器(在.png或.jpg之前没有数字),所以他们可以按原样下载。

图像压缩有什么作用?

图像压缩是完整的图像优化的重要组成部分。以下是它的作用:

  • 移除图像文件中不必要的元数据。
  • 减少图像中的颜色数量
  • 使用算法将数据和类似的模式结合起来。
  • 如果你选择 “有损 “压缩(而不是 “无损”),它将通过降低分辨率来进一步压缩,使文件更轻(我更喜欢 “无损 “以保持最佳分辨率,但你有选择)。

未来

如果图片压缩应用能够覆盖你的整个商店,那就更好了,但现在还不行。如果你知道一个完全自动化的解决方案,请随时在评论中删除它,但我还没有找到一个。

与此同时,我认为手动压缩你的主题和博客文章图片所需的额外一分钟是值得的速度节省。速度快的网站可以获得更好的转化率,更多的流量,更好的SEO排名,整体表现更好

一旦你的图像被压缩,你要确保你的主题没有提供任何过大的图像,并且你正在使用JPG而不是PNG的摄影图像(我们看到PNG经常使用,这是值得一提的,因为他们可以是2倍 – 10倍的文件重量)。

CRUSH PICS图片压缩额外的SEO功能

你还可以通过自动化图片alt属性来节省工作时间,获得更多免费的有机流量。

image seo for shopify sites

你选择的作品和应用程序将更新你的所有图像Alts包括该信息,并获得所有这些额外的关键字在您的alt属性。

还可以使用应用程序自动重命名您的图像文件名,这可以帮助,但在我看来,图像Alts是更重要的SEO指标。

如果你在任何地方通过文件名引用图片文件,更新你的文件名会破坏这些图片。我建议优化你的Alt属性,但保持文件名不变。

优化你的图片alt标签有助于提高页面的SEO,还能让你在谷歌图片搜索中获得更好的位置。很多人都在使用谷歌图片搜索购物(很有趣,可以试试)……所以,在那里排名更好,可以帮助你在自动驾驶仪上获得更多的销售。

Subscribe
提醒
guest
0 评论
Inline Feedbacks
View all comments