前言

时隔四月，我胡汉三又回来了。 这四个月由于各种各样的原因导致该博客未能及时更新，或者说我都差点忘了该博客的存在
(￣ω￣;)。腾讯的一纸账单给我直接打醒了，之前用学生优惠30块续了三个月，正准备续的时候，才突然发现腾讯的学生优惠只能使用一次。于是只能含狠斥巨资再续了一年，这下不得不持续更新了。 OK，言归正传，这次更新主要提高了网站和图片的加载速度。

图片

由于这个模版需要使用大量的图片，这使得所有的图片都被放在web服务器上，从而导致服务器带宽资源占用过高，网站加载缓慢。

图片格式

我们平时使用图片时常常使用PNG与JPG，（注意JPG与JPEG本质上是完全相同的图片格式，命名不同是由于windows早期限制文件扩展名只允许三个字符，这就导致了JPEG被简化成了JPG）。JPG格式适用于照片和复杂图像，因为它具有较好的压缩率和图像质量；PNG格式适用于图标、透明图像和简单的图形，因为它支持透明度和无损压缩。但如果为了提升网站图片的加载速度，我们可以选择WebP格式。虽然早期确实存在WebP兼容问题，但随着其广泛使用，现代的主流浏览器如谷歌，火狐，Safari，还有一些套了谷歌内核的浏览器都对WebP格式有着很好的支持。

图片懒加载

懒加载是一种延迟加载图片的技术，只有当用户滚动到图片所在位置时才加载。像我使用的这个butterfly的主题，里面有非常多的图片，如果我们不使用懒加载技术，会导致打开页面后浏览器不停的请求加载图片，页面显示速度缓慢。懒加载的实现方式有很多，一般都是通过js库或者插件来实现的，有兴趣的话可以通过我下面提供的链接了解一下。懒加载也不只是运用在图片上，我这个网站中的评论系统也运用了懒加载技术。

使用CDN

CDN（内容分发网络），可以将网站的静态资源缓存到全球各地的服务器上，用户可以从最近的服务器获取资源，从而降低了网络延迟，提高了图片的加载速度。当然一般我们也会使用带有CDN加速的图床。
我使用的是Image Engine，一个基于拉取模式的图片 CDN， 它可以为个人开发者每月提供10G的免费流量，而且有着详细的开发文档，支持自定义引擎， 使用方式也十分简单。唯一缺点就是需要科学上网，且不支持国内的CDN。
你只需要将你的原地址替换成他所提供的送货地址即可：
例如的原地址是

1
<img src="https://www.foo.com/image.jpg">

送货地址是 images.foo.com
你就只需要修改你的图像 src 属性为

1
<img src="https://images.foo.com/https://www.foo.com/image.jpg">

更详细的操作可以参考官网文档

更多

以上是本次更新中我所使用的图像加速技术，常用的提高图像加载速度的方式还有以下几种

响应式图片

常见问题: 页面不考虑不同尺寸的终端访问，直接以PC宽屏访问设计图片，导致在移动设备上加载缓慢。

解决方法: 针对不同设备类型与屏幕分辨率，提供不同尺寸的图片，确保在不同设备上实现最佳视觉效果和性能。

CSS Sprites

常见问题：图片素材小图标分别设计，生成不同的图片，如phone.png、site.png、man.png等等，导致浏览器多次请求加载，影响访问速度。

解决方法：将多个小图片合并成一张大图片，并通过CSS来控制只显示需要的小图片部分。这可以减少HTTP请求的数量，从而加快页面加载速度。

缓存策略

常见问题：不设置缓存策略，同一客户端近期的静态资源都重复访问服务器，相同的资源重复请求。

解决方法：通过设置HTTP响应头中的缓存相关字段，如Cache-Control和Expires，让浏览器缓存图片资源。这样，在用户再次访问时，浏览器就可以直接从本地缓存中加载图片，而不需要重新从服务器下载。

资源提供

总结

OKOK，本次更新的内容差不多就介绍完了，还有一些小细节这里就不过多赘述了。对于一个单纯的更新日志而言，我的这篇文章毫无疑问属于啰嗦的那种。但在我看来，个人博客的更新日志并不仅仅是技术上的阐述，更多的是一些个人对一些问题的思考。例如更新的目的是为了解决一个怎样的问题，对于这个问题主流的解决方法有哪些，这些方法能否解决我的核心需求，倘若不能解决，我又如何创造新的解决方式，在解决这些问题中我用到了哪些技术，这些技术创造出来是为了解决怎样的需求，这些技术又为什么能够解决我的需求。 这一整套的思考链，才是我觉得一篇个人博客应该完成的内容, 而不是仅仅只罗列一些模糊不清的解决方案。啰里啰嗦到此结束，感谢你的观看（虽然可能没啥读者就是了）