html - 网站设计有很多图像并且正在增加加载时间

Question

我在一家正在进行网站重新设计的公司工作，设计师向我发送了一个包含静态页面模型的 PSD 文件。这是一个典型的视差滚动类型的交易，现在似乎风靡一时，模型中有一些大图像最终会出现在网站上。

我已经从 PSD 中删除了相关图形，并在不需要透明度的地方用 JPG 保存了它们，但是当我这样做时我不得不使用 PNG，其中一些图像的大小增加了 500kb，导致页面大小总计约 3 兆字节，我什至没有完成!这也使用 Photoshop 的“为 Web 保存”功能进行保存。

考虑到我们一半以上的流量来自移动设备，这是一个大问题。有哪些好的技巧可以减少这些图像的大小？

Answer 1

您的第一步应该是回到设计师那里，告诉他们设计太重，并与他们一起寻找一种方法来加载更少、更轻的图像。

类似 PNGGauntlet 的工具和 ImageOptim有助于减小 PNG(和 JPG)的大小。与单独保存为 Web 相比，他们往往会获得更好(更小)的结果。

Lazy loading images因此只有当它们滚动到 View 中时才会下载它们是另一种需要研究的技术。尽可能使用内置的 CSS 工具，例如 gradients , shadows , 之类的。也许像 SVG 这样的矢量格式可以用于某些图像？

并且，作为 Kobus Myburgh提示，您可以使用 CSS media queries在较小的屏幕上加载较小的背景图像。如果它们都是背景图片，您可以在较大的屏幕上拉伸(stretch)较小的图片(使用 CSS background-size)。前景图像比较棘手，但是 picturefill 或 srcset polyfill 之类的东西可能可以解决问题。