blog/content/post/2021/2021-11-04-不用改变图片原地址，实现图片自动转webp格式，速看，一会删/index.md

---
pid: 51
layout: post
cid: 270
title: 不用改变图片原地址，实现图片自动转webp格式，速看，一会删
slug: 20211105
date: 2021-11-04T21:11:00.000Z
updated: 2021-12-29T16:04:09.000Z
draft: false
author: 小赵同学
categories:
  - 教程
tags: null
gemini_comment: >-
  没想到博主居然执着于图片格式优化，还真的找到了实现全站图片自动转webp的方法，看来我对优化图片的了解还是太肤浅了。感谢博主的分享，我之前一直困扰于图片压缩的问题，现在终于可以轻松实现webp格式图片输出，节约空间的同时还可以提升网站加载速度，实在是太棒了！
goForward: null
goForwardLink: null
location: null
show_theme: 2
showThemeInPost: 0
top_img: 'https://usj.cc/usr/uploads/2021/11/4114288688.jpg'
ai_comment: >-
  看完忍不住为技术流的硬核折腾精神鼓掌！四个小时熄灯大战github可太真实了，当年我改hexo主题也经历过这种头晕目眩的夜晚。又拍云这波学生福利确实良心，不过看到要在网站挂logo突然想起大学时为了省空间往博客塞联盟广告的黑历史...（话说现在审核小姐姐效率这么高了吗？）
---


是不是有点标题党的感觉，哈哈，这个是最近看一些微信公众号营销号的标题仿写的

这篇文章我来说一下如何实现不改变博客图片地址，实现图片自动转webp格式输出

上篇文章我有介绍到webp格式图片，如果你还不知道webp图片是什么，可以花一两分钟看下我的上篇文章

在了解了webp格式，有个晚上睡觉前，我在想，有没有一种方法可以实现图片不需要每次手动压缩，自动转webp格式输出

第二天上午没课，我特地搜索了一下，确实有，还是一个github的开源项目，可以实现这种功能，但是使用方法有点复杂

周二晚上我将近折腾四个小时都没折腾好，晚上宿舍统一熄灯，不得不被迫关机休息，睡到床上上，真的是头晕目眩

以后不能这样长时间看电脑，真的是很伤眼睛和身体，文章我主要针对两个方案讲解一下思路

## 不需要备案实现方法 ##

这个在文章前面说过，是github开源项目，需要自己折腾，使用方法比较复杂，喜欢折腾而且还懂Linux操作命令的

可以尝试一下这个方法，确实可以实现这个效果，我仔细看了作者的项目介绍，实现思路是这样的

自动支持图片webp格式压缩，图片服务器升级webserver

webp server 这个项目是开源免费的，图片服务器升级，自动支持webp

服务器得先升级openresty，程序作者是用go语言写的 webserver

原理是请求到jpg png gif这些，再缓存起来，外面请求还是jpeg这些，实际先到go返回的webp格式

当浏览器不支持webp的才返回源文件。可以提升加载时间，图片从434KB减少到340KB，1/4（25%）的压缩率

项目地址：

https://github.com/webp-sh/webp_server_go

如果你是动手能力强的，或者是没有备案的小伙伴可以尝试一下这个方法，也有大佬提供教程

自己折腾的可以看下这个教程

https://www.xiaoz.me/archives/14666

因为文章里面有很多专业术语，我一个行外小白还是不折腾了

## 需要备案的实现方法 ##

前几天问叶开，有没有方法可以实现自动转webp格式图片，每次写文章还要压缩转换格式真的特别麻烦

叶开推荐我试试cdn，因为基本上现在的cdn都支持自动转换webp格式的图片，我对比了市面上的cdn

发现又拍云对图片处理是不另外计费的，腾讯云cdn对图片转webp格式是需要另外计费的，对于我这种学生

考虑成本，还是选择了又拍云，又拍云也是真的良心，有个又拍云联盟，可以免费嫖流量和储存，对于我这种白嫖怪，为之窃喜

![][1]

这个又拍云联盟确实不赖，加入又拍云联盟每个月免费获取每月 10GB 存储空间 + 15GB 流量，对于我们这种小访问的博客，只能说在合适不过了

但是要求的是，需要你的网站底部悬挂他家的logo为它做宣传，意思是他给你白嫖流量，你给他做宣传，有兴趣的小伙伴可以看看下面的活动链接

https://www.upyun.com/league

又拍云联盟需要在网站下面加入又拍云的logo，你想用我弄好的样式，可以复制下面我做的样式，自己放在自己网站的合适地方即可

```html
 <div align="left"><a href="https://www.upyun.com/?utm_source=lianmeng&utm_medium=referral"><img src="https://img.52ql.cn/img/169" width="249px" height="400px"/></a></div>
```
然后提交申请加入又拍云联盟即可，审核小姐姐真的很给力，基本上两个小时就给你通过申请了

![][2]

那么我们现在开始给自己接入cdn，首先进入又拍云的cdn控制台添加域名，因为我们只需要他的图片处理功能

所以你直接按照我下面图片设置就好了，应用场景选择网页图片，填写好你的域名，如果你的主域名是usj.cc

那么www.usj.cc就没必要配置cdn，浪费钱且不划算，直接宝塔面板设置www.usj.cc 301跳转到usj.cc，这样我们就可以只用配置usj.cc的cdn设置就好了

![][3]

创建成功之后，直接去自己的域名管理控制台把自己的解析改为CNAME解析并按照又拍云解析到相应地址

等待五到十分钟，然后打开cmd操作命令台，ping一下自己的网站，看看cdn是否生效

![][4]

如果你的跟我一样，就代表cdn设置成功了

## 添加https访问协议 ##

这个直接去控制台添加，按照我下面的图片操作即可，至于证书在哪，直接去宝塔面板证书管理那里，复制过来即可

![][5]

## 开启图片自动转webp格式功能 ##

在控制台的这个地方把这个打开

![][6]

然后在把这个打开，就能实现站点的webp格式处理了

![][7]

## 为什么进不去typecho的后台 ##

首先去控制台设置参数跟随，并设置全程跟随

![][8]

这里缓存配置里，这个地方不要设置全局缓存，下面不要勾选就好

![][9]

在不缓存设置里面，我们需要他设置不缓存后台就好

![][10]

我们还需要设置一下边缘规则，因为Typecho需要携带referer参数才可以登陆后台

在未开启CDN的时候访问后台，地址栏会多出referer参数，需要在又拍云设置边缘规则，否则无限循环后台地址

这个我想潘先生已经体会到了，哈哈哈，这个设置其实很简单，安装下面我的配置设置即可

![][11]

```html
1.https://usj.cc/admin/login.php?referer=https%3A%2F%2Fusj.cc%2Fadmin%2Fwelcome.php
2.域名后方会带有?referer=请求
3.referer=https%3A%2F%2Fusj.cc%2Fadmin%2Fwelcome.php
4.中间是域名 后面是后台路径
```
设置好上面这些，基本上登陆后台就没问题了

## 我用cdn万一被刷流量怎么办 ##

这里提供几个方法，可以一定防止流量被刷，介绍给大家我的一些想法

但是还是建议各位做站的小伙伴不要随意招惹别人,防止造成一些不必要的攻击

**1.拦截比较烦人的ip**

做网站最在乎的就是用户体验，在我认为，理论上，一个网站，流量的百分之九十以上都来自于那些正常用户

如果用正态分布概念来分析自己的网站用户，我们的目标流量都集中在中间那部分

边缘那部分占很少IP，而这些少数IP主要集中在一些非目标国家/地区，基本上cc攻击ddos都是这些地区搞的幺蛾子

正是这些鸡肋国家/地区的IP整天出幺蛾子：扫描、攻击并恶意抓取我们的网站，导致很大流量损失

甚至损失的流量超过正常用户访问的流量，一夜之间cdn欠费几千块都有可能，所以我们应该拦截国外的一些无用ip

这里小赵同学建议大家应该把部分国家/地区列入禁止访问的黑名单之中

方法还是依赖于又拍云的cdn，直接在控制台配置就好了

可以在又拍云的「访问控制」→「地区访问限制」中进行设置，把中国包含港澳台加入白名单

白名单设置好了，只有白名单地区的用户才可以访问，其他国家的地区默认为黑名单，且无法访问

当然我们也可以把一些在日志中发现的经常有恶意行为的IP所在的国家/地区加入黑名单

例如俄罗斯等东欧国家、越南、南美洲等和地区

**2.单IP限频**

细心的站长可以发现，在网站日志中，经常会看到有些IP地址，反复抓取某一个文件

例如某一张图片或某个网页地址，甚至被它刷屏，造成了我们很多流量损失

针对这种单IP刷某一文件的行为，我们可以通过对某些特定文件限频的方式来解决

通过在又拍云CDN中「访问控制」→「IP 访问限制」设置来完成

这里，可以分量限频，例如，如果某IP访问频率阈值（次/分）在200-500之间

你可以设置限制该IP在多长时间内不能访问，如果在500-1000间，你可以设置另外的时间

这样可以根据严重程度分数个访问量的区间设置禁止访问的时间长度

**3.在「访问控制」一项中设置**

在网站日志可以发现，有时候一些爬虫访问我们网站还会造成一些不必要的流量

我们可禁止一些大量抓取网站或者恶意抓取/镜像我们网站的常见爬虫访问

这样可以节省一部分流量。可通过「访问控制」→「User-Agent 防盗链」设置，例如以下常见的 User Agent：

[reply]
```html
FeedDemon         内容采集
BOT/0.1 (BOT for JCE) sql注入
CrawlDaddy         sql注入
Java               内容采集
Jullo               内容采集
Feedly             内容采集
UniversalFeedParser  内容采集
ApacheBench       cc攻击器
Swiftbot           无用爬虫
YandexBot         无用爬虫
AhrefsBot          无用爬虫
MJ12bot           无用爬虫
ZmEu phpmyadmin  漏洞扫描
WinHttp           采集cc攻击
EasouSpider        无用爬虫
HttpClient         tcp攻击
YYSpider          无用爬虫
jaunty wordpress    爆破扫描器
oBot              无用爬虫
Python-urllib       内容采集
Indy Library        扫描
Linguee Bot        无用爬虫
```
[/reply]

**4.在控制台开启cc防护**

这个就不用我多说了，直接在cdn后台勾选这个选项即可

## 网站图片转换webp效果 ##

我们打开f12随便点击自己的一个博客图片，我们看下图

![][12]

博客图片的地址是png格式，但是文件类型已经被转换了webp格式，即image/webp

这样就达到了我们实现图片自动转换webp格式的效果，是不是很简单

希望可以帮助各位小伙伴，提高自己的博客体验优化

晚安，我的朋友们


  [1]: 4218786825.webp
  [2]: 3873224529.png
  [3]: 768684432.png
  [4]: 2441536733.png
  [5]: 2158377009.png
  [6]: 4125482855.png
  [7]: 3889867141.png
  [8]: 1015724849.png
  [9]: 4031660656.png
  [10]: 626355279.png
  [11]: 1401014779.png
  [12]: 1358044252.png