网站图片的压缩方法

Question

想压缩网站的图片，但是有些地方同一张图片可能需要用到不同分辨率，比如文章封面图和点进去的图，评论的用户头像和用户头像的大图，这时候该怎么压缩呢

Answer 1

压缩可以分为：

• 不更改尺寸的压缩方式（如去除图片元数据、降低图片质量等）
• 直接更改尺寸的压缩方式

也可以两者同时进行。

压缩方式可分为：

• 预先压缩。以预定义的几个尺寸对图片进行裁剪压缩后再存储。
• 动态压缩。以请求时的参数进行裁剪压缩，并辅以缓存提升性能（CDN的做法）。

如果可能的话，使用CDN是比实现私有存储更好的方案。

Answer 2

首先你想用不同分辨率的图这就造成了前提原因，一张图怎么能同时满足不同的分辨率？所以还是提供不同分辨率的图现在常见的写法 srcset 属性

HTML5中还定义了元素属性的媒体查询。 这使得可以通过媒体查询来根据元素渲染宽度写法
这只是解决分辨率的问题

<img src="avatar.png"
     srcset="avatar-200.png 200w, avatar-400.png 400w"
     sizes="(max-width: 600px) 200px, 50vw">

压缩图片基本常用的就是webpack的那几个插件，不过现在节本上考虑到网站性能 会采用CDN的方式，而且基本厂商提供的CDN都会有后缀来处理不同图片的需求，看个人需要了