如何优化我的所有图像？

Question

诊断

我最近遇到：PageSpeed Insights，它基本上测试你的页面速度，吐出一个分数，并显示导致你的页面变慢的原因。

我输入我的网址，这是我的：result.

---

问题

我显然没有很多分数，但我正在努力提高它们。

我有很多图像优化问题。我试过两件事。 __

1.使用ImageOptim软件

我已经尝试使用 ImageOptim Mac 软件来优化我的

img/

文件夹中的所有图像。

---

2.使用grunt imagemin插件

最重要的是，我使用构建工具重新压缩我所有的图像 在我的

img/

文件夹中，并将压缩包存储在

dist/img/

文件夹中。

imagemin: {

    dynamic: {

        options: {
            optimizationLevel: 3,
            svgoPlugins: [{ removeViewBox: false }],
            use: [mozjpeg()]
        },

        files: [{
        expand: true,                         // Enable dynamic expansion
        cwd: 'img',                           // Src matches are relative to this path
        src: ['**/**/**/*.{png,jpg,gif,ico}'],         // Actual patterns to match
        dest: 'dist/img'                      // Destination path prefix
    }]
}

---

Imagemin 结果

幸运的是，我把我所有的104张图片都缩小了

4.11MB

.

---

复试结果

但遗憾的是，在将我的整个页面重新链接到新图像目录后

dist/img/

。我再次使用 PageSpeed Insights 测试我的网站，我仍然得到相同的警告图像优化。

---

我怎样才能解决/改善这个问题？ 是不是我

optimizationLevel: 3

调得太低了？

任何方法/想法/策略/更好的解决方案/建议？

非常感谢！

Answer 1

我建议使用以下工具之一预先优化您的图像：

视窗

• FileOptimizer 它使用多种工具使您的图像尽可能小。

JPEG（所有平台）

• MozJPEG（来自 Mozilla）

PNG（所有平台）

• PNGQuant，尤其是它的前端网页：TinyPNG（小心有损！）

Answer 2

您可以考虑使用 PageSpeed 服务器模块。 这些能够自动应用图像优化，从而满足 PageSpeed Insights 的建议。 请参阅https://developers.google.com/speed/pagespeed/module和https://developers.google.com/speed/pagespeed/module/faq#other-servers可用性。

Answer 3

使用imagemin没有错

问题是关于基于 css 的调整大小。如果自然的 img 大小是 150px 并且 css 将它压缩在一个 100px 的盒子里，谷歌希望你将 img 的大小调整为 100px.

Answer 4

我为此开发了一个工具，它处理你可以在图像上做的所有最佳实践 - afaik。也许这会对你有所帮助。 https://tinyimage.fun/