图片应该怎么优化?

1,577 阅读6分钟

前言

    前端优化一直是一个热议的话题,但是其实它又像是一个很大的领域。今天先看看图片怎么优化比较好。

一、图片有哪些格式?适合在哪些应用场景?

  1. JPEG (Joint Photographic Experts Group)
    > 联合图像专家小组是 一种针对彩色照片而广泛使用的有损压缩图像格式。
    > 介绍:栅格图形。常用文件扩展名.jpg、.jpeg、.jpe 。JPEG在互联网上常被应用于存储和传输照片。
    > 不合适:线条图形和文字、图标图形,因为它的压缩算法不在这些类型的图形;并且不支持透明。
    > 非常合适:颜色丰富的照片、彩色图大焦点图、通栏banner图;结构不规则的图形,比如说手机拍摄的一些图片等等
  2. PNG(Portable Network Graphics)
    > 便携式网络图形是一种无损压缩的位图图形格式,支持索引、绘图、RGB三种颜色方案以及Alpha通到特性。
    > 介绍:栅格图形。PNG最初是作为替代GIF来设计的,能够显示256色,文件比JPEG或者GIF大,但是PNG非常好的保留了图像的质量。支持Alpha通到的半透明和半桶明星。最高支持24为彩色图像(PNG-24)和8位灰度图像(PNG-8)
    > 不适合:由于是无损存储,彩色图像的体积太大。
    > 非常适合:纯色、透明、线条绘图,图标;边缘清晰、有大块相同颜色区域,比如说一些纯色,纯蓝色等;颜色较少但需要半透明的
  3. GIF(Graphics Interchange Format)
    > 图像互换格式是一种位图图形文件格式,以8位色(即256颜色)重现真彩色的图像,采用LZW压缩算法进行编码
    > 介绍:栅格图形。支持256;仅支持完全透明格完全不同命;如果需要比较通用的动画,GIF是唯一选择。
    > 不合适:每个像素只有8比特,不适合存储彩色图片,比如说此昂PNG那些有丰富色彩的图片。
    > 非常适合:动画,图标。
  4. Webp
    > Webp是一种现代图像格式,可谓图像提供压缩和有损压缩,这使得它非常领过。由Google在购买On2 Technologies 后发展出来的,以BSD授权条款发布。
    > 介绍:优秀算法能同时保证一定程度上的图像质量和比较小的体积;可以插入多帧,实现动画效果;可以设置透明度;采用8位压缩算法。无损的Webp比PNG小26%,有损的Webp比JPEG小25%-34%,比GIF有更好的动画。
    > 非常适合:适用于图形和半透明图像

    简单看一下京东的首页,可以对比的看一下每个区域用到的图片大致符合图片的性质。


二、怎么样让图片加载的更快?

用工具进行压缩图片

  1. 压缩png
    > node-pngquant-native
    > 跨平台,压缩比高,压缩png24会很好
    > 使用说明:www.npmjs.com/package/nod…

    var pngquant = require('node-pngquant-native');
    var fs = require('fs');
    fs.readFile('./jd.png',function(err,buffer){
        if(err) throw err;
        var resBuffer = pngquant.option({}).compress(buffer);
        fs.writeFile('./out.png', resBuffer,{
            flags:'wb'
        },function(err){})
    })
  2. 压缩jpg
    > 跨平台,Liunx、Mac、Windows 解决方案
    > 安装,npm install -g jpegtran
    > 使用方式:jpegtran -copy none -optimize -outfile out.jpg in.jpg
  3. 压缩gif
    > Gifsicle: 通过改变每帧比列,减少gif文件大小,同时可以使用透明来达到更小的文件大小,目前公认的解决方案。
    > 安装:http://www.lcdf.org/gifsicle/
    > 使用方式:(1)优先级别大于2,1的基本不压缩 gifsicle --optimize=3 -o out.gif ingit
                       (2)将透明的部分截去 gifsicle --optimize=3 --crop-transparency -o                                out.gif in.gif
  4. 响应式图片
    > javaScript 绑定时间检测窗口大小
    > CSS媒体查询

    <!DOCTYPE html><html><head>    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <style>        body {            font-family: "Lucida Sans", Verdana, sans-serif;        }        .main img {            width: 500px;        }        @media only screen and (max-width: 500px) {            .main img {                width: 100px;            }        }    </style></head><body>    <div class="main">        <img src="jd.png" alt="Pulpit rock" width="" height="">    </div> </body></html>

    > img 标签属性
     2x、3x 表示目标屏幕的像素密度;1000w、90w srcset属性表示根据目标浏览器的宽度去对应的找出适合的图片去做适配

     <img src="jd.jpg" srcset="alphatest.jpg 2x, mackey.jpg 3x">
     <img srcset="alphatest.png 1000w, jd.png 90w" width="100%" src="mackey.png" />

  5. 逐步加载图像
    > 使用统一占位符
    > 使用LOIP(低质量图片占位符)
      (1) 低质量图像占位符
     (2)安装:npm install lqip    源码:github.com/zouhir/lqip…

    const lqip = require('lqip');const file='./jd.png'lqip.base64(file).then(res=>{    console.log(res)})lqip.palette(file).then(res=>{    console.log(res)})
    执行生成
    [ '#5a74a7', '#7c8cd1', '#341d86', '#9e83c1', '#4c7cbe', '#345c74' ]
    data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAAAklEQVR4AewaftIAAADaSURBVI3BvUrDUBiA4fcrJ+SPWCNNoVVwK4LiXegcVy+gq0OvoXTp1LHgLrp4A25OYsXBKYMRRApCw4nQNK3F04yOfR62JZ24G4hI21L259vdqLi4urZsy92/GV5+8I904q4PnPlOsKp7jTLwwgPf2VkHXtiqe3tT23KTfu/0uZbcj+fAE8gLkBjz9yoiE4EJ8ANmSUXFg8fa4n22KtMsKr90tMjzRuHMo8L9jsKTduvwuHlLRQFHwDmgAQ1kQApoWf5qZUxORQFT4AHwgRJIAQHWgAPsAhnb2gBFSkPfVfTydwAAAABJRU5ErkJggg==
    


    > 使用AQIP
      (1)基于SVG的图像占位符(SVG Quality Image Placeholders)
       (2)安装:npm install sqip  源码:github.com/axe312ger/s…
    > 使用SQIP
       (1)基于SVG的图像占位符
         (2)安装: npm  install sqip  源码:github.com/axe312ger/s…

    const lqip = require('lqip');const file='./alphatest.png'lqip.base64(file).then(res=>{    console.log(res)})lqip.palette(file).then(res=>{    console.log(res)})  
    

     生成svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 380 287"><filter id="b"><feGaussianBlur stdDeviation="12" /></filter><path fill="#090a13" d="M0 0h380v286H0z"/><g filter="url(#b)" transform="translate(.7 .7) scale(1.48438)" fill-opacity=".5"><ellipse fill="#935cda" cx="180" cy="112" rx="41" ry="9"/><ellipse fill="#576b99" rx="1" ry="1" transform="matrix(41.96488 -.15748 .061 16.25657 177 69)"/><ellipse fill="#689aff" cx="37" cy="132" rx="25" ry="7"/><ellipse fill="#334863" cx="136" cy="60" rx="21" ry="21"/><path fill="#7779ac" d="M203 54h12v66h-12z"/><ellipse fill="#221f5d" cx="72" cy="141" rx="32" ry="17"/><ellipse cx="120" cy="15" rx="255" ry="27"/><ellipse cx="242" cy="93" rx="29" ry="207"/><path fill="#1e0a4f" d="M120 141l68-38-132 4z"/><path d="M0 87h256v18H0z"/></g></svg>

页面对比展示
       

    6. 某些情况下真的需要图片嘛?

       > iconfont 代替图片
       > Data URL 替代图片
       > 采用image spriting  雪碧图去处理图片

三、图片服务器自动优化解密
    (1)图片服务器自动优化是可以在图片URl连接上增加不同特殊参数,服务器自动化生成。
      (2)不同格式、大小、质量的图片
      (3)处理方式:
              > 图片裁剪:按长边、短边、填充、拉伸等缩放
              > 图片格式转换:支持JPG、GIF、PNG、WebP等,支持不同的图片压缩率。
              > 图片处理:添加图片水印、高斯模糊、重心处理、裁剪边框等。
              > AI能力:鉴黄以及智能抠图、智能排版、智能配色、智能合成等AI功能