分类横幅图片加载缓慢

[NoamH (Noam Huri)]

@awesomerobot

.category-title-header {
  &.category-banner-example-category {
        background: url(example.jpg);
  }
}

我使用了这段 CSS，但图片需要 3 秒才能加载（图片大小为 240k）
有什么建议吗？

[Canapin (Coin-coin le Canapin)]

你好 Noam，抱歉这么晚才回复，我正在查看主要的 category-banners 主题，其中有一些未回答的问题，我将把它们移到专门的主题中

你最终解决这个问题了吗？

[NoamH (Noam Huri)]

不，第一次上传仍然需要3秒

[Lilly]

@NoamH

我使用了这个 CSS，但图片需要 3 秒才能加载（图片大小为 240k）
有什么建议吗？

嗯
您是否尝试过将图片作为资源加载，方法是将其上传到主题（或主题组件）并使用变量，如下所示？

.category-title-header {
  &.category-banner-example-category {
        background: url($example);
  }
}

[NoamH (Noam Huri)]

是的，这是我们这边的代码：

.category-title-header.category-banner-show-and-tell {background-size: cover !important; background: url(https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/business20/uploads/algosec/original/1X/b94301fb225b079d905143074e33c5140e151f19.png); }

[awesomerobot (Kris)]

添加这样的背景图片本身并没有什么特别之处，不应该导致速度变慢，所以很难说。其他图片加载速度也很慢吗？

这张图片可以进一步优化以减小文件大小，它似乎没有透明度，所以 JPG 文件可能比 PNG 文件小。您还可以使用 ImageOptim (Mac) 等工具或 TinyPNG 等基于网络的工具对其进行进一步优化。