Photoshop 切出的圖片，無論是 PNG 還是 JPEG/JPG 格式，都含有許多相關資訊，又或多餘的顏色值，這些資訊和顏色值，對網頁前端並沒有用處，反而增加圖片大小，所以 Google Pagespeed 最佳實踐建議我們用 jpegtran 或 jpegoptim (僅限 Linux 平臺) 對 jpeg/jpg 圖片進行無失真壓縮，如果是 PNG 格式，則使用 OptiPNG 或 PNGOUT 壓縮。減小圖片大小，就可以減少使用者下載的檔案大小，加快頁面訪問速度。

不過上面提到的幾個工具都不容易操作。又或者我們可以藉助 Yahoo 提供的線上壓縮圖片工具 Smush.it，但據 Google Pagespeed 報告，smushit 壓縮過的圖片仍有壓縮空間 – 目前我還不知道該聽誰的。Google Pagespeed 敢攬瓷器活，當然有金剛鑽，如果我們安裝有它的瀏覽器外掛，就可以定義優化後的檔案儲存位置，但這些檔名稱很長，需要我們再處理，則 Google 的用意又讓人費解了。

jpegtran/jpegoptim/OptiPNG/PNGOUT 當然是理想的壓縮工具，只是操作不太方便，又有跨平臺問題。但使用 Grunt.js 的話，我們就可以藉助它的外掛 Grunt-contrib-imagemin，imagemin 封裝 jpegtran/OptiPNG 功能，可以批量、無失真壓縮圖片大小。

如果你對 Grunt.js 不瞭解，可以看我上一篇簡單介紹。

安裝 imagemin 外掛

切換到專案資料夾，

cd projectName
npm install grunt-contrib-imagemin --save-dev

配置壓縮圖片任務

接下來配置 Gruntfile.js 檔案，定義優化圖片大小的任務：

/*global module:false*/
module.exports = function (grunt) {
    'use strict';
    grunt.initConfig({
        imagemin: {
            /* 壓縮圖片大小 */
            dist: {
                options: {
                    optimizationLevel: 3 //定義 PNG 圖片優化水平
                },
                files: [
                       {
                    expand: true,
                    cwd: 'img/',
                    src: ['**/*.{png,jpg,jpeg}'], // 優化 img 目錄下所有 png/jpg/jpeg 圖片
                    dest: 'img/' // 優化後的圖片儲存位置，覆蓋舊圖片，並且不作提示
                    }
                    ]
                }
            },
            });
    grunt.loadNpmTasks('grunt-contrib-imagemin');
    grunt.registerTask('img', ['imagemin']);
};
 

執行 grunt imagemin 命令：

上圖可以看到，圖片壓縮的比率非常可觀。之後再使用 Google PageSpeed 工具檢測，就不再提醒我們壓縮圖片。