chore(ci): blog sync

Author: coderPerseus

data/blog/post-13.mdx

@@ -0,0 +1,49 @@
+---
+title: 纯前端实现超大图片超快稳定压缩
+date: 2024-08-24T14:27:32Z
+slug: post-13
+author: chaseFunny：https://github.com/chaseFunny
+tags: ["图片压缩"]
+---
+
+## 背景
+
+先给大家看一下压缩效果，是不是非常好，下面看看如何实现吧！
+
+![image-20240824221714151](https://blog-1304565468.cos.ap-shanghai.myqcloud.com/work/image-20240824221714151.png)
+
+在最近开发中，因为我们的网站用户可能上传很大的图片，那如果直接提示用户上传失败，或者禁止上传大图，可能对用户不太友好，用户还需要去压缩图片然后再回来上传，增加了用户使用系统难度，于是就想让后端同学在服务端进行图片压缩，但是后端同学说压缩图片很消耗系统资源，不如使用第三方付费服务，我就想能不能在客户端实现图片压缩呢？毕竟客户端压缩有很多优势呢！
+
+## 客户端压缩为什么比服务端压缩更有优势？
+
+1 ) 减轻服务器负担：压缩服务在客户端实现，这样能大大减少我们服务器的压力，毕竟用户的资源消耗不要钱，我们服务器都是真金白银
+
+2）提升用户体验：我们不需要把很大的资源上传到服务器，而是传给服务器一个很小的资源，对于网络差的用户非常友好
+
+3）实时查看压缩效果：如果有需要看压缩效果的场景，客户端压缩用户很快能看到压缩效果，但是服务端就需要先把大资源发送到服务端，然后再进行压缩处理返回小资源，然后客户端才展示，用户可能都睡着了。。
+
+## 实现
+
+不知要大家平时是否有压缩图片的需求，大家会使用什么呢？我可以推荐两个在线压缩图片服务，非常好用：
+
+- https://tinify.cn/
+- https://squoosh.app/
+
+那第二个是谷歌开源的压缩服务，是在客户端实现，都是在本地操作，安全快捷，接下来我的实现也是依赖于它。
+
+谷歌的开源代码是：https://github.com/GoogleChromeLabs/squoosh
+
+有大神进行了封装，让我们可以在前端很方便使用：https://github.com/ElonXun/squoosh-compress
+
+然后，我们就安装这个包，然后按照文档进行压缩即可，我这里写了一个使用的示例代码，可供大家参考：
+
+https://github.com/chaseFunny/image-compression
+
+## END
+
+不知道大家是否有更好的图片压缩实现方式，大家觉得图片压缩在客户端还是服务器实现更好点呢？
+
+
+
+---
+此文自动发布于：<a href="https://github.com/coderPerseus/blog/issues/13" target="_blank">github issues</a>