需求解决
相关信息
这里是平时想要实现的需求
有需求之后，要了解为什么需要这样，要了解这些原理
需求-解决
TodoList：
1.制作网站个人博客头像
1.1将一个图片旁边实现透明在线抠图网站RemoveBg
压缩文件图片大小这是一款压缩JPEG和PNG图片至尽可能小尺寸的终极的图像优化器，可以设置图片压缩率和宽度比例。使用最佳优化和压缩算法来达到最小尺寸的JPEG和PNG图像,同时保证最佳质量/尺寸比。
1.2网页页面中图片压缩的重要性
一个包含图片太多的页面,加载速度会相当慢,尤其是服务器带宽不足时，优化网页图片加载的方式有千千万万种，除了使用cdn加速,懒加载,预览图加载等高级方法外,最简单粗暴的方式莫非是使用其它格式代替,亦或是直接压缩.
1.3找一个好看的站点图标
哲风壁纸 给自己的一句话，不要老是想着完美，每个阶段都有每个阶段的审美和感想，要让事情继续下去，战点图标代表当时的心境，也是一种缘分，怎么会说是没有更好的，当下便是最好，要及时止损。
1.4将图片裁剪成一个圆形
用Photoshop，椭圆选框工具，从左上角的拉到右下角，结果就是一个圆形，然后crtl + j，就是复制图层，再把背景设为不可见，白边应该可以弄成透明。
2.实现一个图床教程转载
如何实现一个又快又稳且免费的图床，GitHub作为图片库，但是网络访问速度不稳定，jsDeliver免费的CDN服务作为一层转发，Molunerfinn/PicGo作为一个客户端，实现快速上传图片。
eg: 
注意：Watt Toolkit会导致网络连接失败，会导致无法上传图片到github图床上
2.1优缺点转载
优点：
- 很稳定不会跑路，用的是自己的仓库和公共托管平台
- 图片可以增量快速更新和跨设备管理
- 可以进行版本管理和查看之前的版本
- 有公共CDN，速度还是不错的
- 资源格式可以任意都行，包括css、js等
缺点：
- 每个仓库限制1G，超过要新建另一个仓库
- git管理可能偶尔会遇到网络和公钥失效问题
2.2.什么是CDN？CDN能为我们做什么？我们为什么要了解他？?bilibili
CDN的全称是Content Delivery Network，即内容分发网络。CDN是构建在网络之上的内容分发网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。CDN的关键技术主要有内容存储和分发技术。
基本原理:用户访问相对集中的地区和网络设置一些缓存服务器。当用户访问网站时，利用全局的负载均衡技术将用户的访问指向距离最近的缓存服务器，由缓存服务器代替源站响应用户的访问请求。这样一方面减轻了源站服务器的工作压力，另一方面使用户可就近取得所需内容，解决 Internet网络拥挤的状况，提高用户访问网站的响应速度。
CDN ，简单来讲，就是你的网站服务器在黑龙江，怎么能让海南岛的用户快速访问呢？很简单，在广州再放一台服务器。RTT(Round-Trip Time)：往返时延。是指数据从网络一端传到另一端所需的时间。通常，时延由发送时延、传播时延、排队时延、处理时延四个部分组成。直接超远程访问，中间节点出问题的几率太大，导致用户打开你网站会很慢，白屏半天。接入 CDN 后，就不会这样了，海南的用户连接的是广州的服务器。 静态内容，一般指的是图片啊文档啊多媒体文件之类的。动态内容，php;jsp;asp;aspx 这种文件，需要连接你源服务器进行动态计算的内容。这种一般不缓存到CDN，或者只存短时间。动态请求现在一般怎么加速呢？如果服务器离用户很远的话，BGP 机房？？不同的内容要设定不同的 CDN 缓存时间，比方说用户头像存1天的样子，不然用户自行更换头像，好几天了，他头像都没换过来。个人网站使用 CDN 记得做好用量封顶配置当统计周期（比如5分钟内）产生一个GB的CDN 流量，那很可能是有人在刷你流量，可以配置直接给用户返回404。
推荐CDN:
2.3为什么要实现一个图床？
图床指存储图片的服务器，使用图床存储文档中的图片，那么在使用图片的时候只要写上图片所在的网络地址就好了，这样比较使用静态图片体验显然要好很多。
- 公共图床：这类图床一般可以直接上传图片，会返回一个链接，供你使用
- SM.MS图床：无需注册，没有广告，直接上传
- 路过图床：有点广告，需要注册
- 代码托管平台：这类图床一般是建立在代码托管平台的仓库中，使用时要公开仓库
- GitHub：全球最大代码托管平台，目前除了国内速度慢，几乎没啥缺陷
- Gitee：国内仿GitHub代码托管平台，但免费的各种容量上的限制，优点是国内速度快
- 七牛云：速度快，缺点是要点小钱，免费的各种限制
- 服务器图床: 各大云服务器：阿里云，百度云，华为云,或者私人服务器 。除了费用高，没啥缺点，全是优点
3.各个图片的后缀都有什么区别
3.1favicon.ico介绍
所谓favicon，即Favorites Icon的缩写，顾名思义，便是其可以让浏览器的收藏夹中除显示相应的标题外，还以图标的方式区别不同的网站。当然，这不仅仅是Favicon的全部，根据浏览器的不同，Favicon显示也有所区别：在大多数主流浏览器如FireFox和Internet Explorer (5.5及以上版本)中，favicon不仅在收藏夹中显示，还会同时出现在地址栏上，这时用户可以拖曳favicon到桌面以建立到网站的快捷方式；除此之外，标签式浏览器甚至还有不少扩展的功能，如FireFox甚至支持动画格式的favicon等。ICO图标
3.2图片格式转载
- jpg(jpeg)：适合色彩丰富的图、Banner图。不适合：图形文字、图标、不支持透明度。
- png：适合纯色、透明、图标，支持纯透明和半透明。不适合色彩丰富图片，因为无损储存会导致储存体积大于jpeg。
- gif：适合动画、可以动的图标。支持纯透明但不支持半透明，不适合色彩丰富的图片。埋点信息通常也会使用gif发送，因为1x1的gif图发送的网络请求比普通的get请求要小一些。
- webp：支持纯透明和半透明，可以保证图片质量和较小的体积，适合Chrome和移动端浏览器。不适合其他浏览器。
- svg：矢量格式，大小非常小，但渲染成本过高，适合小且色彩单一的图标。
3.3优化策略转载
- 减少图片资源的尺寸和大小，节约用户流量。
- 设置alt=”xxx”属性，图像无法显示时会显示alt内容。
- 图片懒加载， loading=”lazy”为原生，建议使用IntersectionObserver自己做懒加载。
- 不同环境加载不同尺寸和像素的图片srcset与sizes的使用。
- 采用渐进式加载 先加载占位图，然后加载模糊小图，最后加载真正清晰的图。
- 使用Base64URL 减少图片请求数。
- 采用雪碧图合并图片，减少请求数。
4.实现将思维导图转换成markdown
Xmind会员就可以实现这个