日韩久久久精品,亚洲精品久久久久久久久久久,亚洲欧美一区二区三区国产精品 ,一区二区福利

前端優(yōu)化之圖片優(yōu)化自動化

系統(tǒng) 1933 0

本文轉(zhuǎn)載自以下地址:

http://www.welefen.com/image-optimization.html


前端圖片優(yōu)化介紹

隨著前端頁面越來越復(fù)雜,尤其是一些社區(qū)型的頁面中,圖片成了頁面中不可或缺的資源,并且隨著產(chǎn)品功能的疊加圖片大小越來越多。以下是幾個(gè)網(wǎng)站的圖片所占的比重。

前端優(yōu)化之圖片優(yōu)化自動化

由于圖片是二進(jìn)制文件,并不能像js、css、html那些源代碼文件一樣可以通過gzip壓縮大大減小文件的大小。所以圖片優(yōu)化主要是選擇合適的圖片格式,在不降低圖片質(zhì)量的情況下去掉圖片里的元數(shù)據(jù)信息。

常用的一些優(yōu)化方案

目前圖片優(yōu)化使用比較多的主要是下面幾種方式:

  1. 選擇合適的圖片格式,如:png代替gif,盡量使用png8
  2. png使用pngout優(yōu)化,jpg使用jpgtran
  3. 通過yahoo的smush進(jìn)行
  4. 通過google的page speed插件進(jìn)行

前端優(yōu)化之圖片優(yōu)化自動化

這些優(yōu)化方案雖然結(jié)果都能將圖片優(yōu)化,但需要比較多的人工操作。如使用smush,先要上傳文件,優(yōu)化完了后還要下載文件。在項(xiàng)目時(shí)間限制或者改動很頻繁的情況下很多時(shí)候就把圖片優(yōu)化這一非常重要的優(yōu)化步驟給忽略了。

那如何盡量減少人工操作帶來的麻煩和不確定因素呢?

如果在前端模塊編譯的時(shí)候,有圖片自動優(yōu)化的功能,上線前模塊編譯的時(shí)候得到就是優(yōu)化后的圖片,開發(fā)人員完全不用管圖片優(yōu)化了,但又不影響線上圖片優(yōu)化的結(jié)果。

如何結(jié)合一些工具做到圖片優(yōu)化完全自動化呢?先要考慮目前開發(fā)中經(jīng)常用到的圖片格式。

圖片格式

開發(fā)中經(jīng)常用到的圖片格式主要有如下幾種:

  1. 不透明的gif,全透明的gif,動畫gif
  2. 不透明的png,全透明的png,半透明(alpha透明)的png
  3. jpg圖片

對于全透明的png,ie6要通過下面的filter進(jìn)行hack。

前端優(yōu)化之圖片優(yōu)化自動化

對于alpha透明的png,ie6下必須使用png24,目前還沒有找到ie6下hack alpha透明png8的方式,如果有哪位大拿對這個(gè)有解決方案,麻煩告訴我。

經(jīng)過篩選和優(yōu)化原則要滿足上面的圖片格式的條件,選擇的軟件如下:

  1. 動畫gif使用gifsicle
  2. png使用pngcrush
  3. jpeg使用jpegtran

軟件安裝

需要安裝imagmagick, gifsicle, jpegtran, pngcrush,安裝腳本如下:

    #!/bin/sh
  
    #安裝imagemagick
  
    wget ftp://ftp.kddlabs.co.jp/graphics/ImageMagick/ImageMagick-6.6.4-10.tar.gz
  
    tar zxvf ImageMagick-6.6.4-10.tar.gz
  
    cd ImageMagick-6.6.4-10
  
    ./configure
  
    make
  
    make install
  
    cd ../
  
    #安裝gifsicle
  
    wget http://www.lcdf.org/gifsicle/gifsicle-1.60.tar.gz
  
    tar zxvf gifsicle-1.60.tar.gz
  
    cd gifsicle-1.60
  
    make
  
    make install
  
    cd ../
  
    #安裝jpegtran
  
    wget http://jpegclub.org/droppatch.v8.tar.gz
  
    tar zxvf droppatch.v8.tar.gz
  
    sudo cp ./jpegtran /usr/local/bin
  
    #安裝pngcrush
  
    wget http://sourceforge.net/projects/pmt/files/pngcrush/00-1.7.13/pngcrush-1.7.13.tar.gz/download
  
    tar zxvf pngcrush-1.7.13.tar.gz
  
    cd pngcrush-1.7.13
  
    sudo make
  
    sudo cp ./pngcrush /usr/local/bin
  

將上面的代碼拷貝到一個(gè)文件如:image.s,執(zhí)行dos2unix image.sh,然后執(zhí)行sh image.sh安裝軟件

圖片優(yōu)化

圖片優(yōu)化的代碼如下:

      #/bin/bash
    
      OPTI_PATH=$1
    
      cd $OPTI_PATH;
    
      CURRENT_PATH=$PWD;
    
      SH_LIST='jpegtran gifsicle pngcrush';
    
      COMMOND_EXIST=1
    
      #先檢查相關(guān)的軟件是否已經(jīng)正確安裝
    
      for ITEM in $SH_LIST
    
      do
    
          SH_EXIST=`which $ITEM 2>/dev/null | wc -l`;
    
          if [[ $SH_EXIST == '0' ]]; then
    
              echo "$ITEM commond not exist";
    
              COMMOND_EXIST=0;
    
          fi
    
      done
    
      if [[ "COMMOND_EXIST" == "0" ]]; then
    
      exit 1;
    
      fi
    
      #優(yōu)化jpg
    
      JPG_FILES=`find . -type f -name "*.jpg" -or -name "*.jpeg"`;
    
      for FILE in $JPG_FILES
    
      do
    
          OUTPUT_FILE="$FILE.png"
    
          jpegtran -optimize -progressive -copy none -outfile $OUTPUT_FILE $FILE > /dev/null
    
          mv $OUTPUT_FILE $FILE
    
      done
    
      #優(yōu)化gif
    
      GIF_FILES=`find . -type f -name "*.gif"`;
    
      for FILE in $GIF_FILES
    
      do
    
          DEPTH=`identify $FILE | wc -l`;
    
          if [[ "$DEPTH" == "1" ]]; then
    
              OUTPUT_FILE="$FILE.png";
    
              OUTPUT_FILE_LEN=${#OUTPUT_FILE}-8;
    
              NEW_FILE_SUB=${OUTPUT_FILE:0:$OUTPUT_FILE_LEN};
    
              NEW_FILE="$NEW_FILE_SUB.png"
    
              convert $FILE $NEW_FILE > /dev/null;
    
          else
    
              OUTPUT_FILE="$FILE.gif"
    
              gifsicle -o $OUTPUT_FILE $FILE > /dev/null
    
              mv $OUTPUT_FILE $FILE
    
          fi
    
      done
    
      #優(yōu)化png
    
      PNG_FILES=`find . -type f -name "*.png"`;
    
      for FILE in $PNG_FILES
    
      do
    
          OUTPUT_FILE="$FILE.png"
    
          pngcrush -rem alla -brute -reduce $FILE $OUTPUT_FILE > /dev/null
    
          mv $OUTPUT_FILE $FILE
    
      done
    
      cd $CURRENT_PATH;
    

將上面的代碼保存如:image-optimation.sh,執(zhí)行dosunix image-optizimation.sh,
然后執(zhí)行sh image-optizimation.sh imgdir 就可以將imgdir目錄下的圖片進(jìn)行優(yōu)化,上線的時(shí)候只要拷貝優(yōu)化后的圖片就可以了。

優(yōu)化結(jié)果

以下是前端一個(gè)模塊的優(yōu)化前后的文件大小比較:

前端優(yōu)化之圖片優(yōu)化自動化

優(yōu)化后,圖片大小減小了66.6K,優(yōu)化率達(dá)到35.2%。

從數(shù)據(jù)中可以發(fā)現(xiàn),png圖片優(yōu)化還是非常多的,也是優(yōu)化準(zhǔn)則里盡量使用png圖片的原因。

其他優(yōu)化工具

除了上面用到的圖片優(yōu)化工具,還有其他很多可以優(yōu)化圖片的工具。但各種各樣的小問題,最終并沒有使用它們。

  1. pngrewrite
  2. optpng
  3. pngout
  4. pngquant

參考文檔

  1. http://www.slideshare.net/stoyan/image-optimization-for-the-web-at-phpworks-presentation ?圖片優(yōu)化方面的ppt
  2. http://www.smushit.com/ysmush.it/ ?smush
  3. https://github.com/thebeansgroup/smush.py ?smush的python實(shí)現(xiàn)
  4. http://code.google.com/speed/page-speed/docs/payload.html#CompressImages ?google關(guān)于圖片優(yōu)化的文檔
  5. http://www.welefen.com/fcp-introduce.html ?FCP前端編譯平臺里包含了圖片優(yōu)化功能

前端優(yōu)化之圖片優(yōu)化自動化


更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主

微信掃碼或搜索:z360901061

微信掃一掃加我為好友

QQ號聯(lián)系: 360901061

您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點(diǎn)擊下面給點(diǎn)支持吧,站長非常感激您!手機(jī)微信長按不能支付解決辦法:請將微信支付二維碼保存到相冊,切換到微信,然后點(diǎn)擊微信右上角掃一掃功能,選擇支付二維碼完成支付。

【本文對您有幫助就好】

您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描上面二維碼支持博主2元、5元、10元、自定義金額等您想捐的金額吧,站長會非常 感謝您的哦!!!

發(fā)表我的評論
最新評論 總共0條評論
主站蜘蛛池模板: 临泽县| 福海县| 东辽县| 沁源县| 巨鹿县| 大新县| 嘉鱼县| 原平市| 文登市| 明光市| 滁州市| 宜黄县| 巴林右旗| 阳新县| 仙桃市| 东海县| 法库县| 五华县| 双峰县| 阿克苏市| 渝北区| 巴彦淖尔市| 霍邱县| 桑植县| 乐山市| 聂拉木县| 泸水县| 崇仁县| 沁阳市| 安平县| 嘉荫县| 梨树县| 连南| 当雄县| 康乐县| 苗栗县| 阳新县| 娱乐| 砀山县| 嵊泗县| 宣城市|