bolo博客图片加载优化

原因

优化博客图片加载的主要原因是自己博客里面使用的图片比较大，并且在首页显示了，这就导致首页加载速度跟不上，于是就有了优化图片加载的想法。

适用范围：

• 使用了bolo或者solo博客，当然其他博客可以提供参考。
• 使用自定义的图床，社区图床不支持压缩。

优化步骤

nginx 安装图片压缩模块

使用apt安装模块：

apt insyall libnginx-mod-http-image-filter

如果是redhat系列的则可以使用下面命令查找对应的模块，然后安装。

yum search nginx | grep images

nginx 配置

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太多，所以后面去掉了。