最近一直在Udacity上學習前段開發(fā)的課程锈玉，之前自己調(diào)整圖片分辨率的方法一直都是傻傻的手動用圖片處理軟件來裁剪圖片饵溅。沒想到可以用Grunt的grunt-responsive-images插件就可以把圖片生成自己想要的分辨率迄本，而且還可以批量處理多個圖片妹窖。下面就介紹一下具體的方法：
前提條件：必須安裝Grunt ~0.4.0. 如何安裝Grunt耍缴，可以參照用grunt搭建自動化的web前端開發(fā)環(huán)境-完整教程.?
1. 安裝grunt-responsive-images插件
npm install grunt-responsive-images --save-dev
然后把更改Gruntfile.js文件苹熏，添加任務:grunt.loadNpmTasks('grunt-responsive-images')， 并注冊grunt-responsive-images任務：grunt.registerTask('default', [ 'responsive_images']);
2. 安裝GraphicsMagick 或者Imagemagick CLI移盆，下面是簡單配置好的Gruntfile.js文件悼院，其中還另外安裝了grunt-contrib-clean（用來清除指定的文件夾或文件），grunt-contrib-copy（復制文件）咒循，grunt-mkdir（創(chuàng)建文件夾）三個插件据途，安裝步驟及Gruntfiles的配置和grunt-responsive-images一樣：
上圖中sizes配置項中可以配置如下參數(shù)：
width - 圖片寬度
height - 圖片高度
name - 圖片名稱
suffix - 圖片名后綴
quality - 圖片質(zhì)量（1-100）
separator - 用來分隔文件名的字符
files配置項中的參數(shù)：
expand - 圖片是否需要擴展（true or false）
源文件（圖片）- ['**.{gif,jpg,png}'] 表示所以后綴名為gif,jpg,png的圖片
cwd （current working directory）- 當前工作的目錄位置
dest - 目的目錄位置
簡而言之，上面Gruntfiles中的代碼首先會通過clean插件清除當前目錄images_src中名為images的文件夾 ==> 然后調(diào)用mkdir重新創(chuàng)建新的images文件夾 ==> 使用copy插件將images_src/fixed文件夾及其里面所有g(shù)if叙甸，jpg颖医，png格式的圖片復制到images文件夾下 ==>responsive_images會調(diào)用
3.按照上面的步驟配置好Gruntfiles后，然后在所在項目的目錄下執(zhí)行g(shù)runt命令就行了裆蒸。下面是在命令行中運行的結(jié)果：
圖片轉(zhuǎn)換成功后熔萧，可能還是有點大。那么為了進一步優(yōu)化圖片，我們可以將圖片進行壓縮處理佛致。目前網(wǎng)上有不少支持在線壓縮圖片的網(wǎng)站贮缕，如色彩筆，圖好快俺榆，compresspng等等感昼。下面是使用compresspng.com壓縮上傳后的效果圖：
經(jīng)過上面的批量分辨率轉(zhuǎn)換和圖片壓縮，基本上能讓網(wǎng)頁中的圖片加載速度有非常明顯的提升罐脊，同時也節(jié)省了不少流量定嗓。
