网站图片的压缩方法

isle
  • 5
新手上路,请多包涵

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

回复
阅读 1.1k
2 个回答

压缩可以分为:

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

也可以两者同时进行。

压缩方式可分为:

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

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

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

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

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

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏