前言
前端优化一直是一个热议的话题,但是其实它又像是一个很大的领域。今天先看看图片怎么优化比较好。
一、图片有哪些格式?适合在哪些应用场景?
- JPEG (Joint Photographic Experts Group)
> 联合图像专家小组是 一种针对彩色照片而广泛使用的有损压缩图像格式。
> 介绍:栅格图形。常用文件扩展名.jpg、.jpeg、.jpe 。JPEG在互联网上常被应用于存储和传输照片。
> 不合适:线条图形和文字、图标图形,因为它的压缩算法不在这些类型的图形;并且不支持透明。
> 非常合适:颜色丰富的照片、彩色图大焦点图、通栏banner图;结构不规则的图形,比如说手机拍摄的一些图片等等 - PNG(Portable Network Graphics)
> 便携式网络图形是一种无损压缩的位图图形格式,支持索引、绘图、RGB三种颜色方案以及Alpha通到特性。
> 介绍:栅格图形。PNG最初是作为替代GIF来设计的,能够显示256色,文件比JPEG或者GIF大,但是PNG非常好的保留了图像的质量。支持Alpha通到的半透明和半桶明星。最高支持24为彩色图像(PNG-24)和8位灰度图像(PNG-8)
> 不适合:由于是无损存储,彩色图像的体积太大。
> 非常适合:纯色、透明、线条绘图,图标;边缘清晰、有大块相同颜色区域,比如说一些纯色,纯蓝色等;颜色较少但需要半透明的 - GIF(Graphics Interchange Format)
> 图像互换格式是一种位图图形文件格式,以8位色(即256颜色)重现真彩色的图像,采用LZW压缩算法进行编码
> 介绍:栅格图形。支持256;仅支持完全透明格完全不同命;如果需要比较通用的动画,GIF是唯一选择。
> 不合适:每个像素只有8比特,不适合存储彩色图片,比如说此昂PNG那些有丰富色彩的图片。
> 非常适合:动画,图标。 - Webp
> Webp是一种现代图像格式,可谓图像提供压缩和有损压缩,这使得它非常领过。由Google在购买On2 Technologies 后发展出来的,以BSD授权条款发布。
> 介绍:优秀算法能同时保证一定程度上的图像质量和比较小的体积;可以插入多帧,实现动画效果;可以设置透明度;采用8位压缩算法。无损的Webp比PNG小26%,有损的Webp比JPEG小25%-34%,比GIF有更好的动画。
> 非常适合:适用于图形和半透明图像
简单看一下京东的首页,可以对比的看一下每个区域用到的图片大致符合图片的性质。
二、怎么样让图片加载的更快?
用工具进行压缩图片
- 压缩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){}) })
- 压缩jpg
> 跨平台,Liunx、Mac、Windows 解决方案
> 安装,npm install -g jpegtran
> 使用方式:jpegtran -copy none -optimize -outfile out.jpg in.jpg - 压缩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 - 响应式图片
> javaScript 绑定时间检测窗口大小
> CSS媒体查询
> img 标签属性<!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>
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" />
- 逐步加载图像
> 使用统一占位符
> 使用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功能