网页图片优化和性能分析

BerChilders 8年前

来自： 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'));  });
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'));  });
</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>

相关经验