个人网站无缝切换图片格式到 webp 或 avif

news2024/9/27 6:45:56

当你点进来,恭喜你来对地方了,我写的东西从来都是小白向的(把自己当小白),不会故作厉害写的云里雾里让人看不懂,既然发出来就会有人看到,不是每个人都是程序员懂技术的。

项目

为什么图片格式要webp 或 avif,我就不多解释了。
Gtihub: https://github.com/webp-sh/webp_server_go

文档:https://docs.webp.sh/usage/usage/

场景

当你原本的站点有大量未经压缩的图片,例如png,jpg格式的,你可能试过不少方法来减小图片大小,以减小成本开销。但是这个过程并不容易,现在我告诉你此方案还不错你是否愿意试一试。此方案不会对你的原始图片做任何改动(大小与格式都不变),你唯一要做的就是替换图片地址而已!
别急,这不代表什么都没有改变,直接开始教程,请往下看。

系统环境

这是我自己的,没有限制
debian11
宝塔:7.7.0

Docker安装

首先,你要安装好docker

1. 新建项目文件夹

mkdir -p /opt/docker_data/WebP

cd /opt/docker_data/WebP

mkdir -p ./exhaust ./metadata

2. 新建 docker-compose.yml

vim docker-compose.yml

可以直接引用我的不需要改动,内容如下:

version: '3'

services:
  webp:
    image: webpsh/webp-server-go
    # image: ghcr.io/webp-sh/webp_server_go
    restart: always
    environment:
      - MALLOC_ARENA_MAX=1
      # - LD_PRELOAD=/usr/lib/x86_64-linux-gnu/libjemalloc.so.2
      # - LD_PRELOAD=/usr/lib/x86_64-linux-gnu/libtcmalloc_minimal.so.4.5.6
    volumes:
     # - /path/to/pics:/opt/pics
      - ./exhaust:/opt/exhaust
      - ./metadata:/opt/metadata
      - ./config.json:/etc/config.json
    ports:
      -  127.0.0.1:3333:3333

3.新建 config.json 配置文件

touch config.json
vim config.json

重点改动的地方就是config.json,内容如下:

{
  "HOST": "0.0.0.0",
  "PORT": "3333",
  "QUALITY": "80",
  "IMG_PATH": "",
  "EXHAUST_PATH": "./exhaust",
  "IMG_MAP": {
    "/image": "https://image.leshans.eu.org/image",
    "/pic": "https://imgsrc.baidu.com/forum/pic/item" 
  },
  "ALLOWED_TYPES": ["jpg", "png", "jpeg", "bmp", "gif", "svg", "heic", "nef", "webp"],
  "CONVERT_TYPES": ["avif"],
  "STRIP_METADATA": true,
  "ENABLE_EXTRA_PARAMS": true,
  "EXTRA_PARAMS_CROP_INTERESTING": "InterestingAttention",
  "READ_BUFFER_SIZE": 4096,
  "CONCURRENCY": 262144,
  "DISABLE_KEEPALIVE": false,
  "CACHE_TTL": 0,
  "MAX_CACHE_SIZE": 2000
}

修改配置

  • 假设原本的站点图片域名是 image.aaa.com
  • 现在,请准备另外的域名或者aaa的二级域名都行,例如 image.bbb.com
  • image.bbb.com 做好解析,配置好证书

我们只需要改动 IMG_MAP 字段,例如:

  "IMG_MAP": {
    "/image": "https://image.aaa.com"
  },

解释:

  • 原本的图片地址是https://image.aaa.com/123456.png
  • 新的图片地址是:https://image.bbb.com/image/123456.png
  • 左边的/image就是路径,右边就是原始地址
  • 看出来了吗,就点反向代理的意思

提示:不局限于只你反代自己站点的图片,你可以反代几乎任何站点的图片

可以多个地址,例如:

  "IMG_MAP": {
     "/image": "https://image.aaa.com",
     "/bili": "https://i0.hdslb.com/bfs/archive"  
  },

https://i0.hdslb.com/bfs/archive/123456.png
就变成
https://image.bbb.com/bili/123456.png

注意:/image和/bili的上下排序,字符长的在上面,所以,/image在上面。

修改好后,启动

docker compose up -d

忘了说,安装成功后,记得做好反向代理,端口是3333
反向代理这块并没有特殊要求,不管是使用宝塔,还是其他方式

测试是否生效

在这里插入图片描述
原本的图片格式是png,没有改变,但是查看标头会看到:

  • Content-Type: image/avif 说明转成了avif格式
  • X-Compression-Rate: 0.12 压缩率,即大小为原始图片的12%

avif格式大小为43.3k
在这里插入图片描述

原本的png格式大小为363k
在这里插入图片描述

其他参数说明

可选webp,avif

"CONVERT_TYPES": ["webp"]  # 默认webp

启用额外参数

"ENABLE_EXTRA_PARAMS": true,

例如图片链接末尾添加

?max_width=270&max_height=405

这两个参数用于限制图像的尺寸,并将大尺寸图像限制在这两个维度内,同时保持小尺寸图像不变。

例如,我们有一张名为 big.jpg 的 500x500px 图像。当您访问 /big.jpg?max_height=200&max_width=100 时,由于 max_width 较小,图像将缩放为 100x100px。

如果我们有一张名为 small.jpg 的 80x80px 图片,当你访问 /small.jpg?max_height=200&max_width=100 时,由于图片的长宽都在范围内,所以这张图片不会被处理。

缓存有效期

设置为0则永久缓存

"CACHE_TTL": 259200,

缓存大小

单位为MiB,默认值是0,这意味着不会清理本地缓存文件。如果设置了该值,例如设置为50,那么每分钟后台任务将与WebP Server Go同时运行一次,以确保本地缓存目录的总大小不超过50MiB

"MAX_CACHE_SIZE": 0

常来小站看看:https://blog.taoshuge.eu.org
完结撒花。。。。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2077338.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

QT绘制折现图

做一个小工具,需要根据数据绘制折线图,同时拥有方法缩小拖到等功能 运行结果: 原图: 滚轮缩小 滚轮放大 左移右移 鼠标悬停显示点的坐标 源代码 实现 .pro 使用QChart 加入其对应的模块 QT charts customchartview:继承chartView 重写了鼠标点击,鼠标释放,鼠标移…

MAC +win10 笔记本, OBS 桌面音频不起作用 问题 总结

现象: MAC+WIN10笔记本,音频是好好的,可以听,但是OBS使用的时候,桌面音频条,保持静止,录制的视频,也没有系统声音。 问题排查 1、通常的OBS无法捕获音频解决方法 1)、 驱动问题,更新到最新驱动 2)、声音参数配置问题 3)、右侧小喇叭,音量合成器中, 4)、设…

Midjourney Describe API 的对接和使用

Midjourney Describe API 的对接和使用 Midjourney Describe API 的主要功能是通过上传图片,获取对图片的描述。使用该 API,只需要传递图片文件地址,API 会返回图片的详细描述。无需繁琐的参数设置,即可获得高质量的图片描述。 …

VBA技术资料MF180:将某个文件夹中的某类图片导入Word

我给VBA的定义:VBA是个人小型自动化处理的有效工具。利用好了,可以大大提高自己的工作效率,而且可以提高数据的准确度。“VBA语言専攻”提供的教程一共九套,分为初级、中级、高级三大部分,教程是对VBA的系统讲解&#…

ssrf实现

一、SSRF (Server-side Request Forge, 服务端请求伪造) 1、概念: 它是一种由攻击者构造形成由服务端发起请求的一个安全漏洞。一般情况下,SSRF攻击的目标是从外网无法访问的内部系统。正是因为它是由服务端发起的,所…

SpringBoot项目如何使用和打包本地第三方jar包

有时候我们引用了maven仓库不存在的第三方jar,项目打包后jar包里没有引用的jar,解决方法往下看。 一、目录介绍 SpringBoot项目通过idea打成jar包部署。 将项目打成jar包后,所有引用的jar都存在于BOOT-INF\lib下: 如果存在本地…

HTML静态网页成品作业(HTML+CSS+JS)——迪士尼公主介绍(6个页面)

🎉不定期分享源码,关注不丢失哦 文章目录 一、作品介绍二、作品演示三、代码目录四、网站代码HTML部分代码 五、源码获取 一、作品介绍 🏷️本套采用HTMLCSS,使用Javacsript代码,共有6个页面。 二、作品演示 三、代码…

大白话【8】WindowsServer2016搭建DNS服务

1.DNS服务功能介绍 2.DNS服务器搭建 2.0准备环境 2.1把该DNS服务器设置成静态IP 2.2修改主机名(可省略) 2.3安装DNS服务 DNS服务器名为www;IP为192.168.2.100 3.客户机测试 在网内可网络连通的客户机如何验证DNS服务器域名解析有效性&#…

SparkShop开源商城 uploadFile 任意文件上传漏洞复现

0x01 产品简介 SparkShop开源商城(也被称为星火商城)是一款基于ThinkPHP6和Element UI的开源免费可商用的高性能商城系统。适用于各类电商场景,包括但不限于B2C商城、新零售、分销商城等。无论是初创企业还是成熟品牌,都可以通过SparkShop快速搭建个性化独立商城,实现线上…

机器学习:SVM的代码实现

目录 前言 一、完整代码 二、输出结果 三、实现步骤解析 1.读取数据 2.创建模型并训练 3.可视化SVM结果 总结 前言 支持向量机(SVM,Support Vector Machine)是一种用于分类和回归的监督学习算法。它的核心思想是通过在特征空间中找到…

全网最适合入门的面向对象编程教程:39 Python 常用复合数据类型-集合

全网最适合入门的面向对象编程教程:39 Python 常用复合数据类型-集合 摘要: 在 Python 中,集合(set)是一种常用的复合数据类型。集合是一组无序且不重复的元素。与列表和元组不同,集合中的元素是无序的&am…

Webpack中的 HTTP 压缩

http压缩介绍 http压缩,是指一种内置在服务器和客户端之间改进传输速度和带宽利用率的方式。 http 压缩的流程: http 数据在服务器发送前,通过 webpack配置进行压缩;兼容的浏览器在向服务器发送请求时,在请求头中会…

JS Java Script知识简单记录

JS 参考 导入方式 内联样式,和css(style)很像 script标签导入,可以放在head或body标签中 外联样式 打印内容方式 console.log:在控制台显示 alert:网页弹窗 JS变量 var函数作用域,let是块作用域…

OpenCV杂项图像变换(2)线性混合函数blendLinear()的使用

操作系统:ubuntu22.04 OpenCV版本:OpenCV4.9 IDE:Visual Studio Code 编程语言:C11 算法描述 执行两个图像的线性混合: dst ( i , j ) weights1 ( i , j ) ∗ src1 ( i , j ) weights2 ( i , j ) ∗ src2 ( i , j ) \texttt{…

FaceFormer嘴形同步论文复现

一、项目地址 https://github.com/EvelynFan/FaceFormer 二、复现过程 1、项目环境 系统:Ubuntu 18.04.1 python版本:Python 3.7 使用conda创建一个虚拟环境,安装requirements.txt中所需要的库 2、安装ffmpeg 教程网址:http…

kafka 入门

kafka 有分区和副本的概念,partition 3 表示有3个分区,replication 2 表示有2个副本 通过 --describe --topic test命令可以知道 test这个 主题的分区和副本情况,途中的replicas 表示 其他副本分区的情况,如第一条,t…

Docker 安装 Zookeeper + Kafka 保姆级教程

1.创建 docker-compose.yml 创建一个名为 docker-compose.yml 的文件,并添加以下内容: version: 3.6services:zookeeper:image: zookeeper:3.6container_name: zookeeperports:- "2181:2181"networks:- kafka-networkenvironment:ZOO_STANDA…

策略路由与路由策略

1.策略路由与路由策略 1.1 策略路由(Policy Routing) 1.1.1 定义 策略路由是一种根据特定策略或条件(如源地址、目的地址、协议类型、接口、QoS等)来决定网络包转发路径的技术,而不是单纯依赖传统的最短路径或最优路…

Linux-kubesphere(K8S)小白单机版搭建部署

目录 一、虚拟机环境设置 二、Kubesphere安装 1、安装工具 1)Socat、conntrack、ebtables、ipset 2)Docker 2、下载KubeKey 3、开始安装 参考官网:https://www.kubesphere.io/zh/docs/v3.4/quick-start/all-in-one-on-linux/ 一、虚拟机…

无监督3D场景理解,LLM 在 3D 场景理解中的应用与探索 !

构建能够理解和推理3D场景的模型很难,原因在于缺乏3D监督训练的数据来源和大规模训练策略。 在这项工作中,作者问到:在没有3D预训练的情况下,预训练语言模型中的知识如何被利用来理解和推理3D场景? 本工作的目标是确定…