你必须掌握的web图片相关知识

常见图片格式

JPEG

• 优势：是最常见的图片格式，使用非常广泛，支持应用不同级别的压缩，适合携带和发送
• 劣势：有损压缩，不支持图层、透明度

PNG

• 优势：支持比GIF更多的颜色，无损压缩，支持透明度
• 劣势：尺寸往往比JPEG更大，而且仅支持RGB色彩空间

TIFF

• 优势：无损压缩，支持多图层和透明度
• 劣势：文件很大

GIF

• 优势：加载迅速，支持动画，无损压缩，尺寸较小，支持透明度。
• 劣势：最大仅支持256色

SVG

常用于网络矢量图

• 优势：支持矢量内容，也支持文本和像素图，可以添加动画（通过外部代码交互）。放大缩小不会模糊。尺寸较小。可直接作为代码放在HTML里。可以被搜索引擎检索。
• 劣势：DOM节点较多，不利于首次渲染

WEBP

谷歌开发的专用于web的新图片格式

• 优势：相同质量图片尺寸更小，同时支持无损和有损压缩，支持图片透明度。
• 劣势：支持性较低

base64编码图片

这是一种骚操作

• 优势：可以减少浏览器请求次数
• 缺点：对于大的图片转化成base64之后会更大

常见图片压缩的方法

image-webpack-loader

使用webpack配置的方式在每次打包时对图片进行压缩

手动上传

常见的网站

• tinypng
• pp鸭

webp

转化成webp格式