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

Question

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

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

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

Answer 1

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

PNGGauntlet和ImageOptim等工具可以帮助减小 PNG（和 JPG）的大小。与单独保存为 Web 相比，它们往往会获得更好（更小）的结果。

延迟加载图像以便它们仅在滚动到视图时才被下载是另一种研究技术。在可能的情况下，使用内置的 CSS 工具，例如渐变、阴影等。也许像 SVG 这样的矢量格式可以用于某些图像？

而且，正如Kobus Myburgh 所暗示的，您可以使用CSS 媒体查询在较小的屏幕上加载较小的背景图像。如果它们都是背景图像，您可能可以background-size在较大的屏幕上拉伸较小的图像（使用 CSS ）。前景图像比较棘手，但是像 picturefill 或srcsetpolyfill 这样的东西可能会解决问题。

Answer 2

我相信您正在寻找的是“响应式图像”。在这里阅读更多解决技术：

https://github.com/scottjehl/picturefill

这只是响应式图像的一个示例。那里有很多。尝试谷歌搜索该术语。

Answer 3

尝试一些无损压缩技术。

参考： 图像的无损压缩