LinHuijuan's Blog

图片处理

# 图片处理

[TOC]

# 一、背景图片定位方式

参考链接：http://www.ruanyifeng.com/blog/2008/05/css_background_image_positioning.html

  1. 关键字：background-position: top left;

  2. 像素：background-position: 0px 0px;

  3. 百分比：background-position: 0% 0%;（左 上）

    • 它的放置规则是，图片本身（x%,y%）的那个点，与背景区域的（x%,y%）的那个点重合。

# 二、大图片处理

# 2.1 图片预加载

  • src : 当我们给Image对象的src属性赋值一个url的时候，这个Image对象就去会加载url资源，加载完成以后的资源被保存到了浏览器的缓存文件夹里面，下次如果我们要去调用这个url地址的时候，直接是从缓存文件夹读取到的，所以速度很快。
  • load : 当资源加载完成的时候触发。
  • onerror : 当资源加载失败的时候触发。
window.onload = function() {    
    var oImg = document.getElementById('img1');  
    var oImage = new Image();
    oImage.src = 'XXX.jpg';
    oImage.onload = function() {
        alert('加载完成'); 
        document.onclick = function() {
            oImg.src = 'XXX.jpg';
        }
    }  
    oImage.onerror = function() {
        alert('加载出错');
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
const preloadImage = function (path) {
    return new Promise (function (resolve, reject) {
        var image = new Image();
        image.onload = resolve;
        image.onerror = reject;
        image.src = path;
    });
};
1
2
3
4
5
6
7
8

# 2.2 图片懒加载

# 2.2.1 是什么

懒加载也叫延迟加载，指的是在长网页中延迟加载图像，是一种很好优化网页性能的方式。

用户滚动到它们之前，可视区域外的图像不会加载。

原理是优先加载在可视区域内的图片，而不一次性加载所以图片。当浏览器滚动，图片进入可视区时再去加载图片。通过设置图片的 src 属性来让浏览器发起图片的请求。当这个属性为空或者没有时，就不会发送请求。

# 2.2.2 具体实现

<style>
#ul1 {margin: 100px auto 0; padding: 0;}
li {float: left; margin:0 0 10px 10px; list-style:none; border: 1px solid black;}
img {width: 290px; height: 200px; display: block;}
</style>
<script>
window.onload = function() {
    
    var oUl = document.getElementById('ul1');
    var aImg = oUl.getElementsByTagName('img');
    
    showImage();
    
    window.onscroll = showImage;
    
    function showImage() {
        
        var scrollTop  = document.documentElement.scrollTop || document.body.scrollTop;
        
        for (var i=0; i<aImg.length; i++) {
            //!aImg[i].isLoad把这个判断条件放到最前面，可以避免getTop(aImg[i]) < scrollTop + document.documentElement.clientHeight 的判断执行
     //还有一个优化的策略，就是把图片的下标都存放在一个数组里，加载完后就把下标移除数组
            if ( !aImg[i].isLoad && getTop(aImg[i]) < scrollTop + document.documentElement.clientHeight ) {
                //alert(i);
                aImg[i].src = aImg[i].getAttribute('_src');
  //避免加载过的图片又重新操作上一步骤
                aImg[i].isLoad = true;
            }
            
        }
        
    }
    
    function getTop(obj) {
        var iTop = 0;
        while(obj) {
            iTop += obj.offsetTop;
            obj = obj.offsetParent;
        }
        return iTop;
    }
    
}
</script>
</head>

<body>
    <ul id="ul1">
//这里的white.JPG是为了遮住图片未加载显示的小图标
        <li><img _src="img/1.jpg" src="img/white.JPG" /></li>
        <li><img _src="img/2.jpg" src="img/white.JPG" /></li>
        <li><img _src="img/3.jpg" src="img/white.JPG" /></li>
        <li><img _src="img/4.jpg" src="img/white.JPG" /></li>
        <li><img _src="img/5.jpg" src="img/white.JPG" /></li>
        <li><img _src="img/6.jpg" src="img/white.JPG" /></li>
        <li><img _src="img/7.jpg" src="img/white.JPG" /></li>
    </ul>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

# 2.2.3 优点

  • 提升用户体验，因为等待图片加载的时间减少了。
  • 减少无效资源的加载，减少了服务器的压力和流量，也减小浏览器的负担。
  • 防止并发加载的资源过多会阻塞js的加载，影响网站的正常使用。

# 2.2.4 适用场景

图片很多，页面很长的电商网站。

# 2.3 CSS雪碧图

  • 将一个页面涉及到的所有图片都包含到一张大图中去，然后利用CSS的 background-image，background- repeat，background-position 的组合进行背景定位。

# 2.3.1 优点

  1. 减少加载多张图⽚的 HTTP 请求数（⼀张雪碧图只需要⼀个请求）
  2. 能减少图片的字节。
  3. 提前加载资源

# 2.3.2 缺点

  1. 维护成本较⾼。
  2. 加载速度优势在http2开启后荡然⽆存，HTTP2多路复⽤，多张图⽚也可以重复利⽤⼀个连接通道搞定。

# 2.4 图片压缩

# 2.4.1 压缩工具推荐

  • https://tinypng.com/
    • 压缩比高，失真小。
    • 5M以上的图片要会员。
  • Google 开源的图片压缩器 -Squoosh(实时对比来展示压缩效果)https://squoosh.app/
  • 腾讯智图 (opens new window)
    • 除了 PNG 和 JPG ，还支持 WebP。
    • 不支持5M以上的图片。
  • pngcrush (opens new window)
    • 批量压缩，可减少40%的大小。

# 2.4.2 webpack工具

  • image-webpack-loader
    • 依赖 url-loader、img-loader安装
// 安装
npm install image-webpack-loader --save-dev

// 使用
module.exports={
    rules: [{
          test: /\.(gif|png|jpe?g|svg)$/i,
          use: [
                'file-loader',
                {
                  loader: 'image-webpack-loader',
                  options: {
                    disable: true
                  },
                },
            ],
    }]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# 2.5 图片应用分离

将图片和应用分离，防止高I/O负载而崩溃，同一时间对同一域名下的资源的并发请求数目限制。

# 三、图片格式

参考链接：https://juejin.im/post/5d01f048e51d45109b01b17b

类型 位图 矢量图
构图方式 像素点 向量
色彩 色彩丰富 色彩变化少
失真 放大、缩小易失真 不失真，良好的缩放性
大小 大(面积越大,色彩越丰富,越大) 小
分类 bpm、jpg、gif、psd、png、... wmf、ai、EPS、SVG、cdr、emf、dxf、...

# 3.1 矢量图

# 3.2 位图

# 3.2.1 无损压缩

概念：真实的记录图像上每个像素点的数据信息，为了压缩图像文件的大小会采用一些特殊的算法

压缩原理：先判断图像上哪些区域的颜色是相同的，哪些是不同的然后把这些相同的数据信息进行压缩记录，（例如一片蓝色的天空只需要记录起点和终点的位置就可以了），而把不同的数据另外保存（例如天空上的白云和渐变等数据）

格式：

1）PNG（对图像上所有出现的颜色进行索引，我们把这些颜色成为索引色，PNG8(索引256色)、PNG24(真彩16.7million色)、PNG32(真彩16.7million色)。

2）GIF，索引256色，支持动画。

# 3.2.2 有损压缩

概念：并不完全真是的记录图像上每个像素点的数据信息，去掉那些图像上会被人眼忽略的细节，然后使用附近的颜色通过渐变或其他形式进行填充。

特点：能大大降低图像信息的数据量，又不会影响图像的还原效果

格式：jpg

# 3.3 常用格式

# 3.3.1 png - 半透明

  1. PNG的开发目标是改善并取代GIF,PNG8除了不支持动画外，PNG8有GIF所有的特点，但是比GIF更加具有优势的是它支持alpha透明和更优的压缩（GIF仅支持索引透明）。
  2. 对于需要高保真的较复杂的图像，PNG虽然能无损压缩，但图片文件较大，不适合应用在web页面上。

# 3.3.2 jpg

  1. 应用最广泛。
  2. 编辑和重新保存JPG格式图像，清晰度下降损失会累积。
  3. 不适用于所含颜色较少、具有大块颜色相近的区域或亮度差异十分明显的较简单的图片。
  4. 尺寸较小，下载速度快，但不支持透明

# 3.3.3 svg

通过记录坐标的形式存储图形信息，SVG使用基于XML的语义化标签结构，由于是DOM结构，你可以通过ID获取SVG元素，并操纵它们

  1. 采用文本来描述对象
  2. 矢量图形、点阵图像、文本
  3. 不适用于写实图像和有许多细节的复杂图片
  4. 可用于数据可视化
  5. 支持动画、透明、缩放

# 3.3.4 webp - 取代JPEG、PNG，存在兼容

目标：减少文件大小，但达到和JPEG格式相同的图片质量，希望能够减少图片档在网络上的发送时间

  1. 支持动画
  2. 牺牲图片质量来降低图片文件大小
  3. 相同质量的情况下比JPEG文件尺寸小巧许多
  4. 无损压缩后的 WebP 比 PNG 文件少了 45％ 的文件大小，即使png经过压缩，webp可以减少28%的大小
  5. 更小的图片体积
  6. 在 JPEG 和 PNG 上的转化效果都非常优秀、稳定和统一
  7. 谷歌推出的新格式，存在兼容性，目前chrome、opera支持
  8. 同时具备了无损和有损的压缩模式、Alpha 透明以及动画的特性

# 3.3.5 iconfont

  1. 矢量图标
  2. 引入字体
  3. 便于调整大小、颜色

# 3.3.6 gif

  1. 动画
  2. 支持透明背景
  3. 适用于多种操作系统，压缩比高
  4. 色域不太广,只支持256种颜色

# 3.4 图片应用场景

  • 照片用 JPG
  • 动画用 GIF
  • Logo、Icon 等小图用 PNG-8

# 四、Data URL

使用方式：https://c.runoob.com/front-end/59

  • 将图片被转换成base64编码的字符串形式，并存储在url中。

# 4.1 优点

  • 加载图片无需发起HTTP请求。
    • 当图片体积太小时就无需占用一个HTTP会话，故适用于小图片。

# 4.2 缺点

  • base64编码的数据体积通常是原数据的体积4/3。
  • base64图片不会被浏览器缓存。
    • 浏览器会缓存css文件，故可在css的background-image中使用。

margin 与 padding