bolo博客图片加载优化
原因
优化博客图片加载的主要原因是自己博客里面使用的图片比较大，并且在首页显示了，这就导致首页加载速度跟不上，于是就有了优化图片加载的想法。
适用范围：
- 使用了bolo或者solo博客，当然其他博客可以提供参考。
- 使用自定义的图床，社区图床不支持压缩。
优化步骤
nginx 安装图片压缩模块
使用apt安装模块：
apt insyall libnginx-mod-http-image-filter如果是redhat系列的则可以使用下面命令查找对应的模块，然后安装。
yum search nginx | grep imagesnginx 配置
nginx里面增加下面配置
location ~ "^(/images/.*\.(jpg|png|jpeg))!(\d+)-(\d+)$" {
set $w $3;
set $h $4;
rewrite ^(/images/.*\.(jpg|png|jpeg))!(\d+)-(\d+)$ $1 break;
image_filter resize $w $h;
try_files $1 404;
## 下面部分是nginx缓存，按需使用。
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
add_header Access-Control-Allow-Origin "*";
add_header Pragma public;
add_header Cache-Control "public, must-revalidate, proxy-revalidate";
proxy_set_header Host $http_host;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_cache cache_one;
proxy_cache_key $host$uri$is_args$args;
proxy_cache_valid 200 302 10d;
proxy_cache_valid 301 304 10d;
proxy_cache_valid any 10d;
expires 10d;
proxy_redirect off;
add_header wall "Stay simple, stay naive.";
}修改皮肤
在图片标签中添加如下代码
class="thumbnail" src="${adminUser.userAvatar!}" data-src="${article.articleImg1URL}" alt="${article.articleTitle!}"添加之后的结果为：
<img class="thumbnail" src="${adminUser.userAvatar!}" data-src="${article.articleImg1URL}" alt="${article.articleTitle!}" referrerpolicy="origin">最后添加如下js代码
$(document).ready(function(){
$(".thumbnail").each(function(){
var src = $(this).attr("data-src");
// 只处理自家图床中的图片，社区的图片处理了会有问题，具体可以根据实际情况修改。
if (src.indexOf("img.zeekling.cn") != -1){
src = src.replace(".jpg", ".jpg!253-150");
}
$(this).attr("src", src);
});
});至此，图片支持压缩功能修改结束。
后续
由于本人租的服务器是1C1G的，上面跑着好几个服务，使用图片压缩占用CPU太多，所以后面去掉了。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2020.08.23，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读