为了能在chiphell上发大图，我写了一款图床软件

relsoul

# 前言

萌新发的第一篇游记的时候发现chiphell只支持500kb的图片,但是我拍出来的图片基本上都是10M往上，并且懒得再用软件批量压缩了，常用的图片压缩软件不清楚最后压出来的尺寸是否会小于500kb，而且一个一个看太麻烦了，后面发现discuz（chiphell 论坛程序）支持网络图片，也正好我有一台闲置的服务器（每个月1T流量，不限带宽），那为啥不把闲置的服务器利用起来呢？

# 调研

免费图床/自建图床 已经不是什么新鲜事了 目前图床可以有多种选择
1. （阿里云/腾讯云/七牛云）Oss
2.  自有服务器
3. 公开的存储仓库 如github（没错 他也可以用来做图床）

其中oss是按照存储和流量付费的，看了一下价格并不便宜，公开图床 如github的话网络访问也是一个问题，主要的还是上传的时候不支持压缩，对外输出的还是10M的原图....这个尺寸量多了肯定影响访问，于是结合前言 还是把闲置的服务器利用起来（国外服务器 每个月大概12美元）。

# 自有服务器

如果你有一台服务器你可以做很多很酷的事情，比如搭建一个私有图床，调研了一下目前自建图床的开源，已经有很多很优秀的产品了，基本上功能都是比较完善丰富的 还带web ui可以管理上传过的图片等等。

虽然但是.... 自己看了一下还是想有一款非常轻量级的上传程序，调研了一下 发现客户端有一款名为 `picgo`的神器程序




完全开源的https://github.com/Molunerfinn/PicGo
初步看了一下目前picgo已经支持阿里云等私有/公开图床了... 搜索插件搜了半天没找到自由主机 也就是 self-host的整套服务（包括客户端和服务端），于是打算自己写一款轻量级的图床服务

# minify-upload

说干就干，想起来几年前自己写过一个chrome插件版本的上传程序，不过由于之前后端的版本写的比较早，这次也趁机会重构一下。

预想写出来的图床服务应该要支持

1. 简单易用，能快速部署，不包含任何数据库服务
2. 支持压缩图片和转化图片格式
3. 支持已有的图片批量压缩
4. 能多一点配置项服务
5. docker一键构建部署
6. 兼容picgo和原有的chrome插件


画了一两天时间折腾折腾就出来了


# minify-upload 后端服务


https://github.com/Relsoul/minify-ts-node

基于nodejs+nest+typescript的船新版本，想要的功能都支持成功了。

• 基于文件目录化的用户文件保存与查看
• 文件大小等后端校验与过滤
• 支持user认证
• 文件上传与保存
• 静态服务器
• picgo插件支持
• 上传压缩/转换图片
• 读取图片支持调整宽高&输出格式
• 支持批量压缩/转码原有图片
  

# minify-upload 客户端服务

picgo已经开发的很不错了～ 站在巨人肩膀上会更加轻松，于是我开发了一款picgo的插件: https://github.com/Relsoul/minify-picgo-host



并且兼容了之前自己开发的chrome插件:https://github.com/Relsoul/minify-upload-chrome-extension




# 上传完图片如何使用？


上传完图片后会得到一个url地址比如这个

1. https://cdn.relsoul.com/public/uploads/soul/2023-06-16/38c5c5e8-9b4c-4a04-ae73-67e8dc894abd.png

复制代码

上面的这串地址是原图，原图是png格式的 一般来说质量比较好，尺寸比较大，那有没有一种格式能保证质量差不多的前提还能缩小尺寸呢？ 答案是有的 那就是谷歌推出的webp格式

摘录至维基百科

WebP（发音：weppy[6][7]）是一种同时提供了有损压缩与无损压缩（可逆压缩）的图片文件格式[8]。

WebP最初在2010年9月发布，其支持库于2018年4月发布1.0版本。截至2021年5月，已有94%的浏览器支持此格式[9]。

WebP的设计目标是在减少文件大小的同时，达到和JPEG、PNG、GIF格式相同的图片质量，并希望借此能够减少图片档在网络上的发送时间。[10]根据Google较早的测试，WebP的无损压缩比网络上找到的PNG档少了45％的文件大小，即使这些PNG档在使用pngcrush和PNGOUT处理过，WebP还是可以减少28％的文件大小[11]。

WebP支持的像素最大数量是16383x16383。有损压缩的WebP仅支持8-bit的YUV 4:2:0格式。而无损压缩（可逆压缩）的WebP支持VP8L编码与8-bit之RGBA色彩空间。而无论是有损或无损压缩皆支持Alpha透明通道、ICC色彩配置、XMP诠释资料。

WebP有静态与动态两种模式。动态WebP（Animated WebP）支持有损与无损压缩、ICC色彩配置、XMP诠释资料、Alpha透明通道。

那么浏览器/设备的兼容性如何呢？



从上图可以看出大部分现代浏览器和设备都已经支持了，如果不考虑古早设备的话，可以放心大胆的用起来了。

# webp实际效果如何？

拿一张尺寸比较大的图片为例吧

1. https://cdn.relsoul.com/public/uploads/soul/2023-06-15/ba0555b8-127c-442f-90c4-891089999c05.jpg

复制代码

可以看到原图的大小为4000x2999，尺寸为2.2MB，那么转为webp格式后的尺寸是多少呢？

1. https://cdn.relsoul.com/public/uploads/soul/2023-06-15/ba0555b8-127c-442f-90c4-891089999c05.jpg?f=webp

复制代码

复制上面的代码浏览器打开即是webp格式



转化为webp后，尺寸减少了500kb 也就是22%的压缩率。质量的话可以对比两个图片均无太大区别。


# minify的格式转化支持

1. https://cdn.relsoul.com/public/uploads/soul/2023-06-15/ba0555b8-127c-442f-90c4-891089999c05.jpg?f=webp

复制代码

可以看到通过minify的服务在图片的路径后面加了一个`?f=webp`，这个的意思就是转化当前图片为webp格式，那么当然也可以`?f=png`,`?f=jpeg`的形式


# minify的尺寸转化支持

1. https://cdn.relsoul.com/public/uploads/soul/2023-06-15/ba0555b8-127c-442f-90c4-891089999c05.jpg?f=webp

复制代码

还是以上图为例，某些场景下并不需要那么大的一个尺寸输出，通过minify可以快速的等比调整图片尺寸

1. https://cdn.relsoul.com/public/uploads/soul/2023-06-15/ba0555b8-127c-442f-90c4-891089999c05.jpg?f=webp&w=1920

复制代码

通过添加`w=1920`即可实现图片转化操作，在不指定高度的前提会自动进行高度适应裁剪。那么同理 通过添加`h=600` 会自动根据高度裁剪



# 难道没有缺点么？

有，并且不止一个，阿里云等云服务商的oss服务也提供了上述的尺寸转化支持，只不过需要付费，并且云厂商提供的转化效率更高，并且还有缓存技术，minify依赖于本身服务器的算力，上述用的服务器配置为1核，2g内存，目前来看压力负债还好。
通过cloudflare提供的cdn及缓存加速服务，重复的图片实际上流量并没有打到实际服务器上。

本文仅供有一定动手能力，自有服务器的玩家进行尝试，毕竟代替方案还是挺多的。

看到这里不点个赞咩？

xsdianeht

可以上avif把，现在浏览器和系统都支持了
https://www.bilibili.com/read/cv22543150

relsoul

xsdianeht 发表于 2023-6-18 16:00
可以上avif把，现在浏览器和系统都支持了
https://www.bilibili.com/read/cv22543150

底层框架也是支持的，只是在format的allow格式没有开放出来，配置一下json就👌了

ref： https://sharp.pixelplumbing.com/api-output#toformat

relsoul

xsdianeht 发表于 2023-6-18 16:00
可以上avif把，现在浏览器和系统都支持了
https://www.bilibili.com/read/cv22543150

avif的兼容性基本上还是有点新的

xsdianeht

relsoul 发表于 2023-6-18 16:03
底层框架也是支持的，只是在format的allow格式没有开放出来，配置一下json就👌了

ref： https://sharp.p ...

感谢，picgo的压缩真不好用，经常抽风，还是服务器端压缩靠谱

BFG9K

我之前图都是传z4a上的，太累了，久而久之就不怎么带图发帖了

可以抱的萝卜

牛逼，虽然看不太懂，还是要支持下，另外我一直用的是https://imgse.com/

qy680ty

支持一下！！


提供一个透明背景的本站logo，分辨率256x256

自取链接（⬅可点击）


如下图有水印，可点上面链接自取原图，否则右键保存即可



.

xsdianeht

CAVIF默认，1.24MB
http://imgbed1212.test.upcdn.net/CAVIF.avif
AVIFENC CQ36，616KB
http://imgbed1212.test.upcdn.net/CQ36.avif

Narumi

我只希望这个贴能让轮子把签名档恢复回来。

kkyaaaa

6，楼主牛皮

阿诺德施瓦辛格

我直接牛逼

endlessbest

牛啊！！！！！自己家里DDNS出来的服务器可以用吗？

relsoul

endlessbest 发表于 2023-6-18 17:38
牛啊！！！！！自己家里DDNS出来的服务器可以用吗？

可以，本身监听的是本地10244的http 端口，通过nginx反向代理即可，等下周我把docker部署和nginx部署的文档再完善一下，后面部署就简单很多了

relsoul

qy680ty 发表于 2023-6-18 16:26
支持一下！！

后面的版本我觉得可以加个上传水印功能

relsoul

可以抱的萝卜 发表于 2023-6-18 16:16
牛逼，虽然看不太懂，还是要支持下，另外我一直用的是https://imgse.com/

对，公开的图床也是一种解决方案，有些公开的图床不会保存上传的文件太久，也有一些没办法输出原始图都会压缩一下，同时裁剪功能可能也是缺失的

relsoul

xsdianeht 发表于 2023-6-18 16:58
CAVIF默认，1.24MB
http://imgbed1212.test.upcdn.net/CAVIF.avif
AVIFENC CQ36，616KB

这个压缩率可以

relsoul

xsdianeht 发表于 2023-6-18 16:10
感谢，picgo的压缩真不好用，经常抽风，还是服务器端压缩靠谱

picgo本身也是一个浏览器，底层压缩也是js，实际上可以在插件中引用服务端的压缩工具，也可以实现上述的效果😃

Kotaka

lznb，挺不错的，学到了

andyaldi

最近也在准备重新学一下nestjs，一直在用expressjs，三年前用过一段时间nestjs，有点抽象，各种装饰器……有点不太好理解。后来大部分后端只用express，也就作罢了。

可以抱的萝卜

relsoul 发表于 2023-6-18 17:56
对，公开的图床也是一种解决方案，有些公开的图床不会保存上传的文件太久，也有一些没办法输出原始图都会 ...

可以私信下这个12美元是哪的服务器吗，给下运营商，谢谢了

sad1111

战马         

该ID用户不存在

看不懂也支持一下

bigeblis

门槛好高！闲置服务器这玩意一般人没有吧？

fcs15963

我一直用画图放缩，500kb的清晰度还是可以的

Sieben

一直用的sm.ms，因为是之前买的终身高级会员

litccc

支持一下，我记得sharex可以添加自用图床

tasagapro

膜拜高手

relsoul

litccc 发表于 2023-6-19 09:04
支持一下，我记得sharex可以添加自用图床

right，不过每个服务端的上传接口和定义都不一样，这个估计得额外处理

relsoul

bigeblis 发表于 2023-6-19 07:54
门槛好高！闲置服务器这玩意一般人没有吧？

哈哈，这倒是，我的这台吃灰太久了，每个月流量都剩下900多G，正好图床利用起来