bolo博客圖片加載優(yōu)化
原因
優(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太多,所以后面去掉了。

0 評論