原因

優(yōu)化博客圖片加載的主要原因是自己博客里面使用的圖片比較大，并且在首頁(yè)顯示了，這就導致首頁(yè)加載速度跟不上，于是就有了優(yōu)化圖片加載的想法。

適用范圍：

• 使用了bolo或者solo博客，當然其他博客可以提供參考。
• 使用自定義的圖床，社區圖床不支持壓縮。

優(yōu)化步驟

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");
                // 只處理自家圖床中的圖片，社區的圖片處理了會(huì )有問(wèn)題，具體可以根據實(shí)際情況修改。
		if (src.indexOf("img.zeekling.cn") != -1){
			src = src.replace(".jpg", ".jpg!253-150");
		}
		$(this).attr("src", src);
	});

});

至此，圖片支持壓縮功能修改結束。

后續

由于本人租的服務(wù)器是1C1G的，上面跑著(zhù)好幾個(gè)服務(wù)，使用圖片壓縮占用CPU太多，所以后面去掉了。