图片知识点

图片显示方式 img 和 background 区别

1. 加载速度不同：img 要快于 background

img 属于页面的标签，background 属于元素的属性，根据前端页面加载顺序，img 标签会优先加 载，当 HTML 的标签加载完成后才会执行元素的样式。

2. 用户体验不同

（1） img 图片用户可以右键保存至本地，background 显示的用户则无法保存

（2） 图片加载错误时， img 可以用 alt 的文字来告诉用户页面这张图片区域应显示的内容，但是 background 就无法做到

（3） 使用 img 标签并设置一个 alt 的文字，能够帮助存在视觉障碍的读者能够通过屏幕阅读器得知页面的 主要内容, 包括图片内容 , 但是使用 background 就无法实现。

3. SEO 不同

img 的 alt 属性能够很好 地让搜索引擎知道该图片的信息, 而 background 无法做到让搜索引擎直接读懂图片。

4. 语义不同

img 表示的是页面内容的一部分，而 background 只是一个样式，样式起的是一个修饰作用，所以当我们想显示的图片是网站想要展示给用户的内容的一部分的时候, 如:产品介绍，新闻图片，美照等等的时候， 我们需要使用 img。

当这张图片只起装饰的作用时， 我们可以使用 background。 虽说两者最终显示的效果相同，但根据不同的使用目的我们需要柔性的调整我们最终选择哪种方法去。

图片分类

根据图的类型分类，目前就分为两种：

1. 位图（jpg、png、gif、webp）

所谓位图就是用像素点拼起来的图也叫点阵图，平时我们用到的 png、jpg 等图片就是位图。

将一张图片放大以后可以看到一个一个小点点，这一个一个小点点就是图片的一个像素。

2. 矢量图（svg）

矢量图，也叫做向量图。矢量图并不纪录画面上每一点的信息，而是纪录了元素形状及颜色的算法，当你打开一幅矢量图的时候，软件对图形对应的函数进行运算，将运算结果图形的形状和颜色显示给你看。

无论显示画面是大还是小，画面上的对象对应的算法是不变的，所以，即使对画面进行倍数相当大的缩放，它也不会像位图那样会失真。

根据图的压缩分类：

1. 无压缩。

无压缩的图片格式不对图片数据进行压缩处理，能准确地呈现原图片。BMP 格式就是其中之一。

2. 无损压缩。

在压缩图片的过程中，图片的质量没有任何损耗。我们任何时候都可以从无损压缩过的图片中恢复出原来的信息。

压缩算法对图片的所有的数据进行编码压缩，能在保证图片的质量的同时降低图片的尺寸。

png 是其中的代表。

3. 有损压缩。

指在压缩文件大小的过程中，损失了一部分图片的信息，也即降低了图片的质量，并且这种损失是不可逆的，我们不可能从有一个有损压缩过的图片中恢复出原来的图片。

常见的有损压缩手段，是按照一定的算法将临近的像素点进行合并。压缩算法不会对图片所有的数据进行编码压缩，而是在压缩的时候，去除了人眼无法识别的图片细节。因此有损压缩可以在同等图片质量的情况下大幅降低图片的尺寸。其中的代表是 jpg。

总结：

使用有损压缩处理图像，是去除某些像素数据，无法找回原图。

使用无损处理图像，是对像素数据进行压缩，可以找回原图。

图片位数

一个像素二进制的位数最多可以展示多少种颜色：

1. 图片位数越大，能表示的颜色越多，同时占用的体积也约大。例如 8 位图片支持 256 种颜色，即 2 的 8 次方。

2. 图片位数越大，颜色过渡也就越细腻，携带的色彩信息可以更加丰富。

3. 32 位跟 24 位的区别就是多了一个 Alpha 通道，用来支持半透明，其他的跟 24 位基本一样。

图片格式简介

（1）GIF

关键词：无损压缩、索引色、透明、动画

GIF(Graphics Interchange Format) 的原义是“图像互换格式”

是一种基于 LZW 算法连续色调的无损的基于索引色的压缩格式。

GIF 是一种无损压缩，所以它只是对像素数据进行压缩，其实 LZW 算法只是一个压缩数据的算法

GIF 的特性是帧动画，相比古老的 bmp 格式，尺寸较小，而且支持透明(不支持半透明，因为不支持 Alpha 透明通道 )和动画。

优点：

1. 优秀的压缩算法使其在一定程度上保证图像质量的同时将体积变得很小。

2. 可插入多帧，从而实现动画效果。

3. 可设置透明色以产生对象浮现于背景之上的效果。

缺点：由于采用了 8 位压缩，最多只能处理 256 种颜色，故不宜应用于真彩色(文末的附录有解释)图片。

适用场景：色彩简单的 logo、icon、线框图、文字输出

GIF 格式适用于对色彩要求不高同时需要文件体积较小的场景。

（2）JPG/JPEG

关键词：有损压缩、直接色、点阵图、适合大图、体积小

JPEG 格式是最常见的一种图像格式，文件后辍名为“.JPEG”或“.jpg”，JPEG 可以说是人们最熟悉的图档格式，相信在数字相机普及的现在，几乎每台数字相机、照相手机都可以（甚至只能）输出 JPEG 格式的图档。

JPEG 是一种很典型的使用有损压缩图像格式，也就是说使用者每次进行 JPEG 的存档动作后，图档的一些内容细节都会遭到永久性的破坏，尤其是使用过高的压缩比例，将使最终解压缩后恢复的图像质量明显降低，如果追求高品质图像，不宜采用过高压缩比例。

JPEG 图片格式的设计目标，是在不影响人类可分辨的图片质量的前提下，尽可能的压缩文件大小。

按保存方式分类：Baseline JPEG 和 Progressive JPEG

JPEG 有两种保存方式：Baseline JPEG（标准型）、Progressive JPEG（渐进式）。

两种格式有相同尺寸以及图像数据，他们的扩展名也是相同的，唯一的区别是二者显示的方式不同。

Baseline JPEG：

Baseline JPEG 文件存储方式是按从上到下的扫描方式，把每一行顺序的保存在 JPEG 文件中。打开这个文件显示它的内容时，数据将按照存储时的顺序从上到下一行一行的被显示出来，直到所有的数据都被读完，就完成了整张图片的显示。如果文件较大或者网络下载速度较慢，那么就会看到图片被一行行加载的效果，这种格式的 JPEG 没有什么优点，因此，一般都推荐使用 Progressive JPEG。

Progressive JPEG：

和 Baseline 一遍扫描不同，Progressive JPEG 文件包含多次扫描，这些扫描顺寻的存储在 JPEG 文件中。打开文件过程中，会先显示整个图片的模糊轮廓，随着扫描次数的增加，图片变得越来越清晰。这种格式的主要优点是在网络较慢的情况下，可以看到图片的轮廓知道正在加载的图片大概是什么。在一些网站打开较大图片时，你就会注意到这种技术。

渐进式图片带来的好处是可以让用户在没有下载完图片就可以看到最终图像的大致轮廓，一定程度上可以提升用户体验（瀑布留的网站建议还是使用标准型的）。

参考：https://www.biaodianfu.com/progressive-jpeg.html (opens new window)

优点：

1. 可以支持 24bit 真彩色，普遍应用于需要连续色调的图像如色彩丰富的图片、照片等；

2. 可利用可变的压缩比以控制文件大小；

3. 支持交错（对于渐近式 JPEG 文件）

缺点：

1. JPEG 不适合用来存储企业 Logo、线框类的图。因为有损压缩会导致图片模糊，而直接色的选用，又会导致图片文件较 GIF 更大。

2. 有损耗压缩会使原始图片数据质量下降。

3. JPEG 图像不支持透明度处理，透明图片需要召唤 PNG 来呈现。

适用场景：JPG 适用于呈现色彩丰富的图片，在我们日常开发中，JPG 图片经常作为大的背景图、轮播图或 Banner 图出现。

（3）PNG

关键词：无损压缩、索引色、支持透明、体积大

便携式网络图形（简称 PNG，英语全称：Portable Network Graphics）

PNG 能够提供长度比 GIF 小 30%的无损压缩图像文件。它同时提供 24 位和 32 位真彩色图像支持以及其他诸多技术性支持。由于 PNG 优秀的特点，PNG 格式图片可以称为“网页设计专用格式”。PNG 最初的开发目的是为了作为 GIF 的替代方案的，作为做新开发的影像传输文件格式，PNG 同样使用了无损压缩格式，事实上 PNG 的开发就是因为 GIF 所使用的无损压缩格式专利问题而诞生的。

PNG 分为两种，一种是 Index，一种是 RGB。Index 记录同一种颜色的值和出现的位置（简单地说，比如一个 2px*2px 的超级小图，从左往右从上往下依次的颜色是红，白，白，红，那么记录的方法就是“红-1,4；白-2,3”）；而 RGB 图则把所有像素的色值依次记录下来（即“红，白，白红”）。对于相同的图片，Index 格式的尺寸总是小于 RGB。 其中 PNG-8 就是 Index，称作为索引色，而 PNG-24 和 PNG-32 是 RGB 形式，也可称作为直接色。 因为 PNG 是无损压缩，保留了图片需要的所有信息，所以索引色是可以转化为直接色的。

PNG 有三种形式:

1. PNG-8

PNG-8 是 PNG 的索引色版本。PNG-8 是无损的、使用索引色的、点阵图。

PNG-8 是非常好的 GIF 替代者，在可能的情况下，应该尽可能的使用 PNG-8 而不是 GIF，因为在相同的图片效果下，PNG-8 具有更小的文件体积。除此之外，PNG-8 还支持透明度的调节，而 GIF 并不支持。 现在，除非需要动画的支持，否则我们没有理由使用 GIF 而不是 PNG-8。

2. PNG-24

PNG-24 是 PNG 的直接色版本。PNG-24 是无损的、使用直接色的、点阵图。

无损的、使用直接色的点阵图，听起来非常像 BMP，是的，从显示效果上来看，PNG-24 跟 BMP 没有不同。PNG-24 的优点在于，它压缩了图片的数据，使得同样效果的图片，PNG-24 格式的文件大小要比 BMP 小得多。当然，PNG24 的图片还是要比 JPEG、GIF、PNG-8 大得多。

虽然 PNG-24 的一个很大的目标，是替换 JPEG 的使用。但一般而言，PNG-24 的文件大小是 JPEG 的五倍之多，而显示效果则通常只能获得一点点提升。所以，只有在你不在乎图片的文件体积，而想要最好的显示效果时，才应该使用 PNG-24 格式。 另外，PNG-24 是不支持透明的。

理论上来说，当你追求最佳的显示效果、并且不在意文件体积大小时，是推荐使用 PNG-24 的。 实践当中，为了规避体积的问题，我们一般不用 PNG 去处理较复杂的图像。当我们遇到适合 PNG 的场景时，也会优先选择更为小巧的 PNG-8。

3. PNG-32

PNG-32 跟 PNG-24 的区别就是多了一个 Alpha 通道，用来支持半透明，其他的跟 PNG-24 基本一样。

PNG 优点：

1. 支持高级别无损耗压缩；

2. 支持 alpha 通道透明度；

3. 支持 256 色调色板技术以产生小体积文件

4. 最高支持 24 位真彩色图像以及 8 位灰度图像。

5. 支持图像亮度的 Gamma 校准信息。

6. 支持存储附加文本信息，以保留图像名称、作者、著作权、创作时间、注释等信息。

7. 渐近显示和流式读写，适合在网络传输中快速显示预览效果后再展示全貌。

缺点：

1. 较旧的浏览器 IE6- 和程序可能不支持 PNG 文件；

2. 与 JPEG 的有损耗压缩相比，PNG 提供的压缩量较少；

3. 与 GIF 格式相比，对多图像文件或动画文件不提供任何支持。

适合场景：呈现小的 Logo、颜色简单且对比强烈的图片或背景等。

（4）WebP

关键词：有损、无损、兼容性差

WebP 是谷歌开发的一种新图片格式，WebP 是同时支持有损和无损压缩的、使用直接色的、点阵图。

从名字就可以看出来它是为 Web 而生的，什么叫为 Web 而生呢？就是说相同质量的图片，WebP 具有更小的文件体积。现在网站上充满了大量的图片，如果能够降低每一个图片的文件大小，那么将大大减少浏览器和服务器之间的数据传输量，进而降低访问延迟，提升访问体验。

1. 在无损压缩的情况下，相同质量的 WebP 图片，文件大小要比 PNG 小 26%；

2. 在有损压缩的情况下，具有相同图片精度的 WebP 图片，文件大小要比 JPEG 小 25%~34%；

3. WebP 图片格式支持图片透明度，一个无损压缩的 WebP 图片，如果要支持透明度只需要 22% 的格外文件大小。

缺点：

1. 兼容性：但是目前只有 Chrome 浏览器和 Opera 浏览器支持 WebP 格式，兼容性不太好。

2. WebP 与 JPG 相比较，编码速度慢 10 倍，解码速度慢 1.5 倍，而绝大部分的网络应用中，图片都是静态文件，所以对于用户使用只需要关心解码速度即可。但实际上，WebP 虽然会增加额外的解码时间，但是由于减少了文件体积，缩短了加载的时间，实际上文件的渲染速度反而变快了。

使用场景：

WebP集多种图片文件格式的优点于一身，所以基本上适合各种场景，但是由于兼容性不好，所以我们如果大规模的适用 WebP，一定要在 Safari 和 IE 里面施行降级。

（5）SVG

关键词：无损、矢量图、体积小、不失真、兼容性好

可缩放矢量图形英文 Scalable Vector Graphics(SVG)，是无损的、矢量图。

SVG 是一种用 XML 定义的语言，用来描述二维矢量及矢量/栅格图形。SVG 提供了 3 种类型的图形对象：矢量图形（vectorgraphicshape 例如：由直线和曲线组成的路径）、图象(image)、文本(text)。图形对象还可进行分组、添加样式、变换、组合等操作，特征集包括嵌套变换（nestedtransformations）、剪切路径（clippingpaths）、alpha 蒙板（alphamasks）、滤镜效果（filtereffects）、模板对象（templateobjects）和其它扩展（extensibility）。

SVG 跟上面这些图片格式最大的不同，是 SVG 是矢量图。这意味着 SVG 图片由直线和曲线以及绘制它们的方法组成。当你放大一个 SVG 图片的时候，你看到的还是线和曲线，而不会出现像素点。这意味着 SVG 图片在放大时，不会失真，所以它非常适合用来绘制企业 Logo、Icon 等。

优点：

1. SVG 可被非常多的工具读取和修改（比如记事本）。
2. SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。
3. SVG 是可伸缩的。
4. SVG 图像中的文本是可选的，同时也是可搜索的（很适合制作地图）。
5. SVG 可以与 JavaScript 技术一起运行
6. SVG 图形格式支持多种滤镜和特殊效果，在不改变图像内容的前提下可以实现位图格式中类似文字阴影的效果。
7. SVG 图形格式可以用来动态生成图形。例如，可用 SVG 动态生成具有交互功能的地图，嵌入网页中，并显示给终端用户。

缺点：

1. 渲染成本比较高，对于性能有影响。
2. SVG 的学习成本比较高，因为它是可编程的。

适用场景：

1. 高保真度复杂矢量文档已是并将继续是 SVG 的最佳点。它非常详细，适用于查看和打印，可以是独立的，也可以嵌入到网页中
2. 在 WEB 项目中的平面图绘制，如需要绘制线，多边形，图片等。
3. 数据可视化。

SVG 只是 Web 开发常用的一种矢量图，其实矢量图常见还有几种格式：BW 格式、AI 格式、CDR 格式、ICO 格式。

参考地址：https://juejin.cn/post/6844903846980894734 (opens new window)

（7）BMP

是无损的、既支持索引色也支持直接色的、点阵图。这种图片格式几乎没有对数据进行压缩，所以 BMP 格式的图片通常 具有较大的文件大小。

图片功能

图片懒加载

懒加载的主要目的是作为服务器前端的优化，减少请求数或延迟请求数。

• 1. 第一种是纯粹的延迟加载，使用 setTimeOut 或 setInterval 进行加载延迟.
• 2. 第二种是条件加载，符合某些条件，或触发了某些事件才开始异步下载。
• 3. 第三种是可视区加载，即仅加载用户可以看到的区域，这个主要由监控滚动条来实现，一般会在距用户看到某图片前一定距离遍开始加载，这样能保证用户拉下时正好能看到图片。

可视区加载的三种判断方法：

(1) offsetTop < clientHeight + scrollTop

(2) element.getBoundingClientRect().top < clientHeight

(3) IntersectionObserver

图片懒加载原理：

先将 img 标签中的 src 链接设置为空，将真正的图片链接放在自定义属性（data-src），当 js 监听到图片元素进入到可视窗口的时候，将自定义属性中的地址存储到 src 中，达到懒加载的效果

代码实现懒加载：

<div class="images">
  <img class="img-item" alt="loading" data-src="imgs/img01.jpg" />
  <img class="img-item" alt="loading" data-src="imgs/img02.jpg" />
  <img class="img-item" alt="loading" data-src="imgs/img03.jpeg" />
  <img class="img-item" alt="loading" data-src="imgs/img04.jpg" />
  <img class="img-item" alt="loading" data-src="imgs/img02.jpg" />
</div>
<!--
<script type="text/javascript">
    //获取观察器实例  changes是被观察的对象数组
    var observer = new IntersectionObserver(function(changes){  
        console.log(changes);
        changes.forEach(function(index,item){
            if(item.intersectionRatio > 0 && item.intersectionRatio < 1)
                //target：被观察的目标元素，是一个 DOM 节点对象
                item.target.src = item.target.dataset.src;
        });
    });
    function addObserver(){
        var listItems = document.querySelectorAll('.img-item');
        listItems.forEach(function(item){
            //实例的observe方法可以指定观察哪个DOM节点
            //开始观察  observe的参数是一个 DOM 节点对象
            observer.observe(item);
        });
    }
    addObserver();
</script>
-->
<script type="text/javascript">
  //获取img
  var imgs = document.querySelectorAll("img");
  //懒加载方法
  var lazyload = function() {
    // 获取浏览器滚动高度
    var scrollTop =
      document.body.scrollTop || document.documentElement.scrollTop;
    // 获取浏览器可视高度
    var winTop = window.innerHeight;
    for (var i = 0; i < imgs.length; i++) {
      //imgs[i].offsetTop 距离文档顶部的高度
      //如果元素距离文档顶部的高度小于  浏览器的滚动高度加浏览器的可视高度，则需要加载
      if (imgs[i].offsetTop < scrollTop + winTop) {
        imgs[i].src = imgs[i].getAttribute("data-src");
      }
    }
  };
  //调用懒加载函数
  function throttle(method, delay) {
    var timer = null;
    return function() {
      var context = this,
        args = arguments;
      clearTimeout(timer);
      timer = setTimeout(function() {
        // method.apply(context,args);
        method();
      }, delay);
    };
  }
  window.onscroll = throttle(lazyload, 200);
</script>

参考：https://www.cnblogs.com/zhupanpan/p/11330586.html (opens new window)

图片预加载

预加载可以说是牺牲服务器前端性能，换取更好的用户体验，这样可以使用户的操作得到最快的反映。

• 1. 隐藏在 css 的 background 的 url 属性

使用 css 的 background 属性将图片加载了，但不显示在可视范围内。但是这些图片会跟随文档一起加载，所以会影响到页面的加载速度，影响了页面的整体加载时间。

• 2. css+js 实现方式：为了解决上面提到的影响页面加载速度的问题，我们通过 onload 事件推迟预加载的时间，直到页面加载完毕，来解决。

//js代码
function preloadImg() {
  if (document.getElementById) {
    document.getElementById("preload_01").style.background =
      "url(./image/preload_01.png) no-repeat -1000px -1000px";
    document.getElementById("preload_02").style.background =
      "url(./image/preload_02.png) no-repeat -1000px -1000px";
    document.getElementById("preload_03").style.background =
      "url(./image/preload_03.png) no-repeat -1000px -1000px";
  }
}

function addLoadEvent(fun) {
  var oldOnload = window.onload; //存储原生的onload事件

  //判断其它库是否改写了onload方法
  if (typeof window.onload !== "function") {
    //其它库未改写onload方法，则替为传入的fun
    window.onload = fun;
  } else {
    window.onload = function() {
      //若其它库改写了onload，则先执行其他库的onload方法，再执行传入的fun
      if (oldOnload) {
        oldOnload();
      }

      fun();
    };
  }
}

addLoadEvent(preloadImg);

• 3. 通过 javascript 的 Image 对象设置实例对象的 src 属性

//js代码
var imgUrls = [
  "./image/preload_01",
  "./image/preload_02",
  "./image/preload_03",
]; //图片真实路径
var imgs = []; //存储图片

function preloadImg(datas = []) {
  //文档加载完毕再加载图片
  for (var i = 0; i < datas.length; i++) {
    imgs[i] = new Image();
    imgs[i].src = datas[i];
  }
}

preloadImg(imgUrls);

图片压缩

• 1. 把图片上传到阿里云或七牛云，借用云端的图片缩放技术进行压缩
• 2. 后端对图片尺寸大小进行压缩。
• 3. 前端用 Canvas 作为媒介压缩图片。(图片转 base64——canvas 重绘——实现压缩)

图片预览

图片上传

• vue+element 图片上传

图片裁剪

• vue-cropper 裁剪

安装：npm install vue-cropper --save

封装 vue 裁剪组件