如何优化我的所有图像?

问题描述

我最近遇到了: PageSpeed Insights ，它基本上可以测试您的页面速度，吐出分数，并显示导致您的网页显示速度变慢的原因.

I recently came across : PageSpeed Insights, it basically test your page speed, spit out a score, and display what cause your page to slow-down.

我输入我的网址，这是我的网址:结果.

I enter my url and here is my : result.

我显然得分不高，但是我正在努力改善它们.

I clearly don't have a lot score, but I'm working on improving them.

我遇到了很多图像优化问题.我已经尝试了2件事.__

I got a lot of image optimization problems. I've tried 2 things.__

我尝试使用 ImageOptim Mac软件来优化我的img/文件夹中的所有图像.

I've tried using ImageOptim Mac Software to optimize all my images in my img/ folder.

最重要的是，我使用构建工具重新压缩所有图像在我的img/文件夹中，然后将一个压缩文件存储在dist/img/文件夹中.

On top of that I , I use a build tool to re-compress all my imagesin my img/ folder, and store the compress one in dist/img/folder.

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 .

---

Imagemin Result

Luckily, I got all my 104 images reduce down 4.11MB.

但是可悲的是，在将我的整个页面重新链接到新图像目录dist/img/之后.我使用 PageSpeed Insights 再次测试了我的网站，但仍然得到了相同的警告图片优化

But sadly, after re-linking my entire page to new images directory dist/img/. I test my site again with PageSpeed Insights, I still got the same warning image optimization.

如何解决/改善此问题?是因为我将optimizationLevel: 3设置得太低了吗?

How can I can fix/improve this problem ?Is it because I set the optimizationLevel: 3 too low ?

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

Any approach / idea / strategy / better solution / suggestion ?

非常感谢！

推荐答案

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

You could consider using a PageSpeed server module.Those are able to automatically apply image optimization and thereby satisfy PageSpeed Insights recommendations.See https://developers.google.com/speed/pagespeed/module and https://developers.google.com/speed/pagespeed/module/faq#other-servers for availability.

这篇关于如何优化我的所有图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！