优化网站图片加载速度：一次亲身实践

在网站开发过程中，我们经常会遇到一个问题，即网站加载速度过慢。这个问题可能会严重影响用户的体验，而图片加载速度常常是导致网页加载速度慢的主要原因。最近，我成功解决了一个线上图片问题，现在我将分享一下我的经验。

问题的发现

在网站发布并上线后，我通过Google的PageSpeed Insights 对网站进行了一次性能测试。结果发现，最大的问题是图片加载速度的问题。这个发现让我开始寻找解决方案。

优化前

最初，我的思路是将图片直接存放在服务器上，和网页放在相同的位置。然而，实际测试发现，这样做的图片加载速度很慢。考虑到升级服务器带宽可能会带来更大的成本，我决定寻找其他的解决方案。

然后，我考虑将图片文件放到阿里云的OSS中，并设置了阿里云的CDN加速和OSS加速器。这样做后，图片的访问速度确实有所提升，但效果还是不尽如人意。

通过进一步的调试，我发现所有的图片每次都需要重新下载，图片没有被浏览器缓存。于是，我在OSS上添加了Cache-Control：max-age=864000，希望通过这种方式来解决问题。

然而，当我实际测试时，发现请求头中添加了Cache-Control: no-cache，导致图片还是每次都需要重新下载。找到了这个问题后，我在网页处理了这个问题，终于解决了这个问题。

其次，我开始考虑如何优化图片的质量。在最开始，我考虑展示最高清的图片，图片源都是找最高清的，这也会导致网页的加载速度受影响。

但是，重新寻找图片并下载显然没有性价比，于是我想到了OSS的图片处理功能。我给图片链接添加了显示全部都转为webp的图片格式，然后加上一定的压缩比。这样做成功地将图片的大小降低了60%以上，而且并没有影响图片的展示效果。

总的来说，优化网站的图片加载速度是一个必要的过程，它可以显著提高用户的体验。在这个过程中，我学到了很多，希望我的经验可以帮助到你。

网站发布上线通过Google的PageSpeed Insights 查询

发现最大的问题是图片加载速度的问题

最开始的思路是把图片放在服务器，和网页放在相同的位置

但是实际测试发现图片加载速度很慢，因为这个问题去升级服务器带宽，肯定是得不偿失的

所以考虑将图片文件放到阿里云的OSS中，设置了阿里云的CDN加速，和oss加速器

图片的访问速度确实有所提升但是效果还是不尽如人意

经过调试发现所有的图片每次都需要重新下载，图片没有被浏览器缓存

在oss上添加了Cache-Control：max-age=864000

原以为就此可以解决，但是实测发现请求头中添加 Cache-Control: no-cache

导致还是每次都重新下载找到问题在网页处理了终于解决了

其次，最开始考虑展示最高清的图片，图片源都是找最高清的，这也会导致网页的加载速度受影响

但是重新去找图片在下载没有性价比，想到了 oss的图片处理给图片链接添加了显示全部都转为webp的图片格式，然后加上一定的压缩比成功把图片的大小降低了60%以上而且不影响图片的展示

优化后