如何优化我的所有图片？

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。