网站速度的重要性
- 提升用户体验
想象一下，你走进一家超市，准备购买一些东西。但是，你发现货架上的商品堆得乱七八糟，你需要花费大量的时间来寻找你需要的商品。这样的体验肯定会让你感到沮丧，甚至可能会让你失去购物的兴趣。同样的，当用户访问一个加载速度慢的网站时，也会有类似的体验。快速的网页加载速度可以让用户快速找到他们想要的信息，提高他们的满意度。
- 提升搜索引擎排名
谷歌在其算法中已经明确表示，页面的加载速度会影响其在搜索结果中的排名。快速的网页加载速度不仅可以提高用户的体验，还可以帮助你的网站在搜索结果中获得更高的排名。这就像参加一场马拉松比赛，速度快的选手肯定会比速度慢的选手更早到达终点。
- 提高转化率
据统计，网页的加载速度每延长1秒，转化率就会下降7%。这意味着如果你的网站加载速度过慢，可能会让你失去大量的潜在客户。优化网站的加载速度，就像是提高超市的商品陈列效率，可以让更多的客户愿意在你的商店中进行购物，从而提高转化率。
图片压缩与网站速度
- 图片在网站性能中的角色
在一个网页的数据构成中，图片往往占据了绝大部分的比例。根据HTTP Archive的数据，至2022年，图片的数据量在所有网页数据中的比例高达50%以上。大量的图片会增加网页的HTTP请求（HyperText Transfer Protocol，超文本传输协议），从而拖慢页面的加载速度。每个HTTP请求都会消耗一定的时间，过多的HTTP请求就会像一台工作负载过大的机器，速度将会大大降低。
- 图片大小与加载时间的关系
图片的文件大小直接影响了网页的加载时间。文件越大，加载所需的时间就越长。对于一个有1MB大小的图片，以10Mbps的速度下载需要大约0.8秒，而同样的条件下，如果文件大小减小到200KB，加载时间就会缩短到大约0.16秒。这就像一个满载的卡车，如果货物过重，车速就会变慢。
- 图片压缩的意义
图片压缩就是通过优化图片的编码，减少图片的文件大小，而不会严重损失图片的视觉效果。在不降低用户体验的前提下，提高网站的加载速度。这就像用一个压缩机将卡车上的货物压缩，既减轻了负载，又提高了速度。一般有手动上传图片前手动压缩和使用 WordPress 插件统一压缩。
网站的加载速度对于提升用户体验，提高搜索引擎排名，以及提高转化率都有着至关重要的作用。因此，优化网站的加载速度，特别是通过图片压缩等方法，是我们在网站运营中必须要重视的一部分。
压缩工具选择
2种方法，选择哪种主要取决于你的需求和资源：
1. 手动上传前压缩
如果你有大量的图片，但是时间和技术知识有限，那么使用插件压缩可能是更好的选择。如果你只有一些图片，而且你希望对每一张图片进行最优化的处理，那么手动上传前压缩可能更合适。WordPress 压缩图片插件比如Smart Image/CSS/JS Optimization Services and CDN for Websites，一般按点数付费。市面上有很多免费在线压缩图片可以选择，
免费在线压缩工具有 https://tinypng.com/ 和https://www.iloveimg.com/ ，后者免费版本可以选择编辑图片的功能更多，所以我们选择后者。
iloveimg.com免费版本和付费的区别，以下用免费版演示
可以将网站切换为中文
处理图片的逻辑
当我们在制作网站时，通常会有很多图片需要处理。如果每一张图片都单独处理，会非常耗时且效率低下。因此，一种更好的方法是先确定图片的大致尺寸，然后统一处理。
想象一下，你需要在一堆纸箱中装满物品。如果每个箱子的尺寸都不同，你需要为每个箱子量身定做物品，这会非常耗时。但是，如果你提前知道所有箱子的尺寸，你就可以提前准备好适合的物品，然后一次性把所有箱子填满。同样的，如果我们知道图片的大致尺寸，我们就可以一次性地处理所有的图片，大大提高效率。
因此，做网站时，我们应该：
1. 先确定图片的大致尺寸和比例
2. 统一处理图片的尺寸
3. 统一处理图片的格式
4. 最后进行压缩
| banner之类的大图 | 中图、施工场景图 | 小图、产品图 | Logo大小 |
| 1400px~1600px宽 | 800px宽 | 500px宽 | 150*50 |
如何使用 iloveimg.com 高效压缩图片
第一步：调整图像大小
首先调整图像的大小，你实际上在减少图像的像素数量，这直接影响到文件的大小，选择 Resize IMAGE 、 Crop IMAGE ，如果不需要调的话可以直接看 第二步，转换图片。
选择 Resize IMAGE 调节尺寸
上传时，免费版最多一次性上传 30 张，直接叉掉，只要30张之内都可以免费使用这个工具
有按像素和按比例的选择
使用按像素时，一定要保留长宽比，否则会导致图片变形
以下都是建议的像素，实际的比例应该根据你的网站图片计算后进行调整
按像素参考：
- 全屏幕背景图片或者滑块图片：这种图片通常用于网站首页的大背景，需要填满整个浏览器窗口。因此，建议的尺寸为1920 x 1080像素或者1400px~1600像素宽，这是大多数显示器的分辨率。
- 内容图片：这种图片通常插入到文章或者页面的内容中，不需要太大。建议的尺寸为800 x 600或者800宽像素，既可以保证清晰度，也不会过大影响加载速度。
- 缩略图：这种图片通常用于产品列表或者文章列表，用户可以通过点击缩略图来查看完整的内容。建议的尺寸为400 x 300像素或者500像素宽，可以提供足够的细节，同时不会占用太多的空间。
- 头像或者徽标：这种图片通常比较小，用于展示品牌或者个人形象。建议的尺寸为200 x 200或者100 x 100或者150 x 50像素。
调整后直接点击按钮即可，等待几秒就可以直接下载，也可以直接点击其他功能，比如压缩按钮。
选择 Crop IMAGE 调节大小
主要是通过像素来裁剪，实际的像素应该根据你的网站图片计算后进行调整，可以按比例自己计算下。
第二步 将PNG图片转为JPG图片
在讲压缩图片之前，大家要先了解概念
常见的图片一般是PNG、JPG，它们各有优缺点。PNG图片支持透明背景，质量较高，但文件大小通常较大；JPG图片则通常文件大小较小，更适合在网页上使用。
想象一下，图片就像是我们要邮寄的包裹。PNG图片就像是大箱子，装的东西质量高，但是体积大，邮寄起来费用较高。而JPG图片就像是小包裹，虽然装的东西质量稍低，但体积小，邮寄起来更省费用。
所以，为了让网页更快的加载，我们通常会选择将PNG图片转为JPG图片，就像选择使用小包裹代替大箱子一样，这样可以节省加载时间和服务器空间。
.jpg和.jpeg，这两种扩展名的实质是相同的，我们可以把*.jpg的文件改名为*.jpeg，而对文件本身不会有任何影响。
来源：https://cloud.tencent.com/developer/article/2112329
结果从 534KB 变为 164KB
第三步 压缩图片
直接选择 Compress IMAGE 即可
其他步骤和第二步相同，可以看到压缩效率很高
结果从 534KB 变为 164KB，最后为 64 KB
其他问题
- 我需要为每一张图片都设置一样的尺寸吗？
不需要。不同的图片用途和位置，需要的尺寸可能会不同。比如首页大图可能需要的尺寸比文章内部的插图要大。关键是要确定某一类图片的合适尺寸，统一处理的图片提前放在一起上传处理效率更高，比如产品主图可以统一上传。
- 我怎样才能知道我需要压缩哪些图片？
你可以使用一些在线的网站速度测试工具，如Google PageSpeed Insights，这些工具会告诉你哪些图片需要优化，包括压缩和改变尺寸。
- 为什么我需要把PNG图片转为JPG再压缩？
PNG和JPG是两种不同的图片格式，他们各有优点和缺点。PNG图片通常质量更高，但文件大小也更大。而JPG图片虽然质量稍逊，但是文件大小远小于PNG。因此，为了优化网站速度，我们通常会把不需要透明底PNG图片转为JPG，然后再进行压缩。
- 压缩过头怎么办？
iloveimg 不能调整压缩级别，按照最高质量压缩，一般压缩后不够清晰是因为原图不够清晰文件却很大。
