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

Question

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

我已经从PSD中删除了相关的图形，并用JPG保存了它们，我不需要透明度，但是当我这样做时我被迫使用PNG，其中一些图像正在推动500kb的尺寸，导致页面大小总计大约3兆字节，我甚至没有完成！这也是使用Photoshop的“Save for Web”功能保存的。

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

Answer 1

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

PNGGauntlet和ImageOptim等工具可以帮助减少PNG（和JPG）的大小。他们倾向于获得比单独使用Save for Web更好（更小）的结果。

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

并且，正如Kobus Myburgh暗示的那样，您可以使用CSS media queries在较小的屏幕上加载较小的背景图像。如果它们都是背景图像，那么您可以在更大的屏幕上拉伸较小的图像（使用CSS background-size）。前景图像比较复杂，但像picturefill或srcset polyfill这样的东西可能会有效。

Answer 2

我相信你所寻找的是“响应式图像”。在这里阅读更多解决方法：

https://github.com/scottjehl/picturefill

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

Answer 3

尝试一些无损压缩技术。

参考： Lossless compression of images