jpeg有损压缩图像格式
特点:线条图形和文字、图像图标,因为他的压缩算法不适合;并且不支持透明度。
非常适合:颜色丰富的图片、彩色图大焦点图、通栏banner图;结构不规则的图形。
png无损压缩的位图图形格式,支持索引、回溯、RGB三种颜色方案以及Alpha通道等特性。
介绍:栅格图形。最初作为替代GIF来设计的,能够像电视256色,文件比JPEG或者GIF大,但是非常好的保留了图像质量。
不适合:由于是无损存储,彩色图像体积过大。
非常适合:纯色、透明、线条绘图,图标;边缘清晰、有大块相同颜色区域,颜色少但需要半透明。
GIF 图像互换格式是一种位图图形文件格式,以8位色重现真彩色的图像,采用lzw压缩算法进行编码。
介绍:栅格图形。通用动画的唯一选择。
不适合:每个像素只有8比特,不适合存储彩色图片。
非常适合:动画和图标。
webp是一种现代图像格式,可为图像提供无损压缩和有损压缩,非常灵活。
介绍:优秀算法能同时保证一定程度上的图像质量和比较小的体积;可以插入多帧实现动画效果;可以设置透明度;无损的webp比PNG小26%,有损的webp比JPEG小30%,比GIF有更好的动画。
不适合:最多处理256色,不适合彩色图片。
非常适合:图形和半透明图像。
PNG压缩工具
node-pngquant-native
跨平台,压缩比高,压缩png24非常好
说明文档:
压缩JPG
jpegtran
官网:http://jpegclub.org/jpegtran/
压缩GIF
Gifsicle:通过改变每帧比例,减小GIF文件大小,同时可以使用透明达到更小的文件大小。
图片尺寸随网络变化
响应式图片
逐步加载图像
1统一占位符
2使用LQIP (低质量图像占位符,源码:https://github.com/zouhir/lqip-loader)
3使用SQIP
基于SVG的图像占位符(源码:https://github.com/axe312ger/sqip)
webfont代替图片
使用data url代替图片
采用image spriting
图片服务器自动优化解密