图片的基本知识点-CSDN博客

图片的基本知识

图片的介绍

位图与矢量图

位图位图（Bitmap，bmp格式就是这种图它的文件结构很简单，没有压缩，一个一个像素地记录下来。），又称栅格图（英语：Raster graphics）或点阵图，是使用像素阵列(Pixel-array/Dot-matrix点阵)来表示的图像。在计算机中，像素用二进制数来表示。这些不同的像素点组成了色彩斑斓的图片。常见位图有 JPG、PNG、GIF 等格式。

矢量图 矢量图形是计算机图形学中用点、直线或者多边形等基于数学方程的几何图元表示图像。生成的矢量图文件存储量很小，特别适用于文字设计、图案设计等，比较常用的矢量图有 SVG 等格式。

二进制与色彩

在计算机中，像素用二进制数来表示。不同的图片格式中像素与二进制位数之间的对应关系是不同的。
一个像素对应的二进制位数越多，它可以表示的颜色种类就越多，成像效果也就越细腻，文件体积相应也会越大。
一个二进制位表示两种颜色（0|1 对应黑|白），如果一种图片格式对应的二进制位数有 n 个，那么它就可以呈现 2^n 种颜色。

例如：

png-8。2^8种颜色
png-24。2^24种颜色

JPG/JPEG/GIF/PNG/SVG

JPG/JPEG

关键字：有损压缩、体积小、加载快、不支持透明

优点 JPG 最大的特点是有损压缩（压缩过程中图像的质量会遭受到可见的破坏）。这种高效的压缩算法使它成为了一种非常轻巧的图片格式。另一方面，即使被称为“有损”压缩，JPG的压缩方式仍然是一种高质量的压缩方式。

缺点

当它处理矢量图形和 Logo 等线条感较强、颜色对比强烈的图像时，人为压缩导致的图片模糊会相当明显。
JPEG也是一种位图格式，但它不支持透明背景图像(透明图片需要召唤 PNG 来呈现)，更加适合颜色复杂的图像。

使用场景 JPG 适用于呈现色彩丰富的图片，在我们日常开发中，JPG 图片经常作为大的背景图、轮播图或 Banner 图出现。两大电商网站（京东和淘宝）对大图的处理，是 JPG 图片应用场景的最佳写照。

PNG

关键字：无损压缩、质量高、体积大、支持透明 PNG是一种无损压缩的位图图形格式，支持索引、灰度、RGB三种颜色方案以及Alpha通道等特性。PNG的开发目标是改善并取代GIF作为适合网络传输的格式而不需专利许可，所以被广泛应用于互联网及其他方面上。

优点无损压缩，支持透明度。分为：

png-8。2^8种颜色
png-24。2^24种颜色

缺点体积太大

使用场景 呈现小的 Logo、颜色简单且对比强烈的图片或背景等。例如：淘宝网的logo

SVG

关键字：文本文件、体积小、不失真、兼容性好

可缩放矢量图形（Scalable Vector Graphics，SVG）是一种基于可扩展标记语言（XML），用于描述二维矢量图形的图形格式。它和本文提及的其它图片种类有着本质的不同：SVG 对图像的处理不是基于像素点，而是是基于对图像的形状描述。

优点

图片可无限放大而不失真
一般来说，SVG文件要比JPEG和GIF的文件要小

缺点

SVG 存在着其它图片格式所没有的学习成本

应用场景

VG 是文本文件，我们既可以像写代码一样定义 SVG，把它写在 HTML 里、成为 DOM 的一部分。
SVG主要用来显示矢量图，例如一些形状、线和点的组合。

GIF

动图 GIF是一种位图格式，支持透明背景图像

WebP

年轻的全能选手

WebP是一种同时提供了有损压缩与无损压缩（可逆压缩）的图片文件格式。WebP最初在2010年发布，目标是减少文件大小，但达到和JPEG格式相同的图片质量。

优点 WebP 像 JPEG 一样对细节丰富的图片信手拈来，像 PNG 一样支持透明，像 GIF 一样可以显示动态图片——它集多种图片文件格式的优点于一身。

缺点浏览器兼容性，目前只有chrome兼容较好

应用场景 暂无

图片在项目中的应用

错误处理（很常用，实用）

从服务器获取的图片资料可以用onerror做错误处理

onerror="javascript:this.src='images/home/monitor.png'"
复制代码

设置最大宽度与最大高度，防止图片非等比缩放

.img {
    max-width: 100%;
    max-height: 100%;
}
复制代码

降低图片的大小

图片压缩，采用图片压缩工具，智图-图片压缩

减少HTTP网络请求

将多张图片合成一张图片，可以有效减少http网络请求。特别是一些小图标多的页面，还有一些组件里面的图片

cssSprites(雪碧图制作)

1. 用PS制作
2. 用在线工具合成图片，background-position都动生成。[Snipaste-1.16.2-x64](https://pan.baidu.com/s/1I21_g79e77Jjhk5xUJ5PoA)
3. 用webpack，gulp等新的项目构建工具以它们的一些插件，可以用它们自动合并、压缩图片，处理图片引用
`gulp`
```
const gulp = require('gulp');
// 自动同步浏览器插件
const browserSync = require('browser-sync');
// 同步运行任务插件
const runSequence = require('run-sequence');
// buffer流转换
const buffer = require('vinyl-buffer');
// 项目路径
const projecturl = 'gulp-cssSprites';
// cssSprites压缩
const gulpSpritesmith = require('gulp.spritesmith');
const gutil = require('gulp-util');
const imagemin = require('gulp-imagemin');

gulp.task('spritesmith', () => {
    gulp.src('./images/*.png')
    .pipe(buffer())
    .pipe(imagemin())
    .pipe(gulpSpritesmith({
        imgName: 'sprites.png',
        cssName: 'sprites.css' // Supported CSS extensions are .css (CSS), .sass (SASS), .scss (SCSS), .less (LESS), .styl/.stylus (Stylus), and .json (JSON)
    }))
    // .pipe(imagemin())
    .on('error', gutil.log)
    .pipe(gulp.dest(projecturl + '/cssSprites'))
})

// 起本地静态资源服务器，及监听
gulp.task('browserSync', () => {
    browserSync({
        server: {
            baseDir: ''
        }
    })
});

// 监听文件修改
gulp.task('watch', ['browserSync', 'spritesmith'], () => {

    gulp.watch(['*.png'], browserSync.reload);

})

// 默认任务
gulp.task('default', (callback) => {
    runSequence(['browserSync', 'watch'], callback);
})
```
**cssSprites使用**

利用CSS的background-image，background- repeat，background-position的组合进行背景定位，background-position可以用数字精确的定位出背景图片的位置
```
.icon-ANALYSIS_4 {
background-image: url(sprites.png);
background-position: -18px -17px;
width: 17px;
height: 17px;
}
```
复制代码

字体图库代替图标

常用的有font-awesom,在项目图标不是非常多的时候也可以采用自定义字体图标库 Iconfont

SVG技术替换图片

引用方式

直接引用

<svg id="mysvg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
  <circle id="circle" cx="400" cy="300" r="50" />
</svg>
复制代码

独立的文件引用

<img src="circle.svg">
<iframe id="if" src="circle.svg"></iframe>
<object id="object" data="circle.svg" type="image/svg+xml"></object>
<embed id="embed" src="circle.svg" type="image/svg+xml">
复制代码

symbol标签引用,可自定应viewBox（关于viewBox和preserveAspectRatio还需要另外去了解），这是 SVG xLink 引用时最重要的标签

	<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="position:absolute;width:0;height:0;visibility:hidden">
		<defs>
			<symbol viewBox="0 0 28 33" id="user">
				<path fill-rule="evenodd" d="M20.798 19.289c2.636-2.002 4.215-5.091 4.215-8.437 0-5.886-4.845-10.647-10.808-10.647S3.397 4.966 3.397 10.852c0 3.345 1.578 6.433 4.212 8.435l.264-2.678C4.358 18.32 1.591 21.403.168 25.187l1.478.556v-1.579c-1.485.73-1.485.73-1.501 1.079-.054.188-.054.188-.069.278a2.58 2.58 0 0 0-.026.229 9.112 9.112 0 0 0-.019.4c-.008.265-.014.617-.018 1.039-.005.511-.006 1.037-.006 1.451v.027c-.004 1.732 1.41 3.129 3.154 3.129h22.082a3.18 3.18 0 0 0 3.172-3.153l.011-1.305.008-.897.003-.296.001-.083v-.022-.006-.001l.002-.278-.093-.262c-1.385-3.918-4.203-7.122-7.812-8.88l.263 2.678zm-1.911-2.516l-2.045 1.553 2.309 1.125c2.856 1.392 5.106 3.949 6.218 7.093l-.09-.54V26.033l-.001.083-.003.296-.008.897-.011 1.305c0 .01-.011.021-.013.021H3.161c-.007 0 .005.011.005.032v-.031c0-.404.001-.92.006-1.418.004-.4.01-.732.017-.969.004-.121.008-.212.012-.262l-.006.043c-.009.06-.009.06-.058.229-.01.336-.01.336-1.49 1.063H2.74l.385-1.024c1.141-3.035 3.35-5.495 6.131-6.849l2.309-1.124-2.045-1.554c-1.859-1.412-2.964-3.576-2.964-5.92 0-4.129 3.418-7.488 7.649-7.488s7.649 3.359 7.649 7.488c0 2.344-1.106 4.509-2.966 5.921z"
				 class="path1">
				</path>
			</symbol>
		</defs>
	</svg>
	<div class="box">
		<svg class="svg">
			<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#user"></use>
		</svg>
	</div>
复制代码

canvas绘画图形

Canvas是由HTML代码配合高度和宽度属性而定义出的可绘制区域。JavaScript代码可以访问该区域，类似于其他通用的二维API，通过一套完整的绘图函数来动态生成图形。一些可能的用途，包括使用Canvas构造图形，动画，游戏和图片。如果您要在HTML中加入canvas元素，请将以下代码加入到部分中：

<canvas id="canvas" width="寬度" height="高度">
  浏览器不支持canvas的时候显示
</canvas>
复制代码

图片懒加载技术lazyload.js

github.com/verlok/lazy…