網頁圖片優化和性能分析

BerChilders 8年前發布 | 18K 次閱讀性能分析操作系統前端技術 gulp

來自： http://chinagdg.org/2016/02/網頁圖片優化和性能分析/

圖片優化

理想的網頁應該在1秒內打開。而在頁面的整體大小中，圖片往往是所占比例最大的一部分。優化圖片不僅可以加快頁面顯示，還能降低移動網絡的流量費用。原圖產生的 PNG、JPEG、GIF 和 SVG 圖片一般都有很大的壓縮余地。SVG 中往往有很多編輯工具帶來的冗余數據，這些數據完全不影響圖片查看，所以網頁中的圖片完全可以去掉這些信息，減少圖片大小。下面介紹三個用于圖片優化的工具

imagemin

imagemin 是用來優化圖片的工具，減少圖片文件的大小。一般情況下，你可能更希望在自動構建過程中壓縮所有圖片， gulp-imagemin 和 grunt-contrib-imagemin 可以分別用來在 gulp 和 grunt 中執行這個任務。例如：

JavaScript

const gulp = require('gulp');
const imagemin = require('gulp-imagemin');
const pngquant = require('imagemin-pngquant'); // $ npm i -D imagemin-pngquant
gulp.task('default', () => {
    return gulp.src('src/images/')
        .pipe(imagemin({
            progressive: true,
            svgoPlugins: [
                {removeViewBox: false},
                {cleanupIDs: false}
            ],
            use: [pngquant()]
        }))
        .pipe(gulp.dest('dist/images'));
});</pre> 
  
const gulp = require('gulp');
const imagemin = require('gulp-imagemin');
const pngquant = require('imagemin-pngquant'); // $ npm i -D imagemin-pngquant
 
gulp.task('default', () => {
    return gulp.src('src/images/')
        .pipe(imagemin({
            progressive: true,
            svgoPlugins: [
                {removeViewBox: false},
                {cleanupIDs: false}
            ],
            use: [pngquant()]
        }))
        .pipe(gulp.dest('dist/images'));
});</pre> 
 </div>
ImageOptim
 如果通過程序實現對你太難或者只是想臨時用一下，那么你可以用 ImageOptim 這個免費的(Mac)桌面工具來壓縮圖片。使用起來很簡單，只需要把圖片和整個目錄拖到程序中即可實現自動優化。 
  
ImageMagick
 ImageMagick 是開發者可以用到的另一個免費且強大的圖片處理工具，支持 Linux, Windows, Mac Os X, iOS, Android OS 等眾多平臺。它可以用來創建、編輯、合成以及格式轉換。ImageMagick 通常用于命令行，并且支持 Java、C++、Python 等 20 種編程語言。 
  
WebPagetest
 WebPagetest 是一個非常棒的網頁在線速度測試工具，它支持大量選項，允許你選擇發起請求的地理位置、真實的瀏覽器、甚至真實的移動網絡。測試結果的信息也非常豐富，包含首次查看和二次查看的速度對比（二次訪問時很多資源已經被瀏覽器緩存，所以會快不少），內容分析，還有 Filmstrip 視圖和渲染錄像。右上角還有一個 Cost 鏈接，它會顯示不同國家打開這個網頁所需花費的流量費用。總之，結果信息中點擊各個鏈接和視圖都有更加詳細的信息展示。動手試試吧！ 
 
   
  選擇地理位置、瀏覽器和網絡

 
 
   
  結果信息頁

 
 
   
  Filmstrip 視圖

 
 作者：韓國愷。本系列文章以 Addy & Matt 的系列視頻  Totally Tooling Tips 的內容為基礎重新整理而成，主要介紹一些(前端)開發者喜歡的工具和技巧。 
 Post Views: 2 
 除非特別聲明，此文章內容采用 知識共享署名 3.0 許可，代碼示例采用 Apache 2.0 許可。更多細節請查看我們的 服務條款 。 
 </div>