最近重构了我的个人项目图小小( Pic Smaller ),无论是技术上还是 UI 上都进行了重构,改动巨大,这次我决定完全开源它( Github 地址在文末)。因为之前跑了一年几乎无人问津,它一直是一个完全免费项目,没有广告,没有打赏,甚至联系方式都没有,做成这个样子属实让人很不甘,所以干脆完全开源算了,希望能吸引一些关注,先看看新版本预览效果:
图小小是一个图片压缩工具,基于 Vite+React 技术栈开发,它可以完全取代类似 TinyPNG 之类的在线图片压缩工具,且压缩之后视觉表现效果往往更好。但图小小有个更大的优势:通过图小小进行图片压缩完全是基于浏览器本地的,没有任何服务端交互,图片不会上传到远程服务器,所以非常安全,不用担心隐私图片被泄露。
目前图小小支持 JPEG/PNG/WebP/Gif 四种格式的图片压缩,基本上能满足绝大部分日常使用需求,本项目为个人业务时间开发,为了节约时间,采用了大量的第三方开源项目,所以图小小本身是没什么技术含量的,我个人认为图小小优秀在于提供了良好的 UI 和使用体验,虽然是缝合怪,但鲜有人做出类似的产品
简单说一下技术实现,感兴趣的自行研究,不得不感谢 Webassembly 技术的加持,让 PNG/Gif 编解码这类 CPU 密集计算型需求在纯网页端实现成为了现实,并且还有不错的性能表现
为了防止 UI 阻塞,运用了 Web Worker 技术进行编解码和压缩,同时为了防止同一时刻浏览器的内存占用过大(内存占用过大也会导致卡顿),用了一点小技巧在 Worker 端实现了一个简单的队列 Queue,这里不展开,有兴趣的自行研究源码
网站部署在 vercel 上,主要原因是穷,所以初次访问速度会有一定的影响,国内其实大部分地区已经屏蔽了 vercel ,为了让国内用户也能访问,不得已通过 Cloudflare 做别名解析了 txx.cssrefs.com 这个域名。这里要强烈推荐个人开发者采用国外的解决方案,这个网站除了域名(域名是以前在腾讯云买的),其他证书服务器等都是免费的,感谢万恶的资本主义
由于图小小是纯本地执行,因而不同的电脑配置会有不同的压缩表现,实测批量压缩成百上千张图片会有明显的卡顿甚至浏览器崩溃现象。这是正常的,由于没有任何限制,使用本工具可能会导致浏览器耗尽 CPU 和内存资源,所以使用时请自行评估
项目地址:https://github.com/joye61/pic-smaller
1
EmbraceQWQ 184 天前
https://www.toolcat.cloud/ 收录你的,感谢你的付出
|
2
sfqtsh 184 天前 via Android
我的主手机 iPhone 刚好前几天在 app store 里买了个图片压缩的应用,一些拍的好多 M 的图片压缩后小了很多,质量看起来差不多。我觉得这类放在手机上需求更大点更能赚 money 吧
|
3
Admstor 184 天前 12
1 使用 web 工具的用户往往不是隐私敏感型,你的纯浏览器处理模式与同类产品并无明显优势
2 界面复杂明显并没有做到简单易用。从用户角度看,当我需要用压缩的时候,往往是要么体积或者分辨率的限制,所以其实对这些用户,他们需要的是,我上传一个照片,你返回一个符合我要求的压缩后照片,而不是让我选所谓的压缩率等等参数 3 批量处理用户会选择更专业的软件,而不是选择 web 工具 4 你这个东西更适合作为某个比较大型的 web 项目,其中一个组件,指望赚钱或者广告流量,你除非做个站点,全都是类似的 web 工具库,才有可能。但是说实在的,竞争压力依然巨大,同样市场极小。 |
4
lizhenda 184 天前
确实很难商业化
|
5
joye OP @Admstor 感谢建议,说的很对。我会抽时间优化功能,采纳你的建议,我今年 37 岁了,公司面临倒闭,马上要离开职场了,只想让自己以后能留下一点技术的回忆,这个工具太小,永远不为赚钱,只为有人使用,有人记得就足够
|
6
angrylid 184 天前 via Android
如果流量达标了,光贴广告应该是能赚到钱的,进阶一点的话还可以搞社区和云存储等增值服务。
不过第三方库为什么是以二进制加入到版本控制里的方式来管理? |
8
osilinka 184 天前
推广不好吧, 记得一个人在 reddit 的 sideproject 推广类似的,一个月有几百美元的收入
|
9
MaizerShuahu 184 天前 via Android
我经常有需求需要使用网站压缩图片,目前你做的网站对我来讲有一些体验上的问题
1.一打开就要上传图片,不能进行我想要的质量设置 2.一般我找网站压缩,都是求保质的,也就是说我期望压缩的更小,而质量可以接近原图,否则我用 ps 也可以搞定,而我使用了之后发现质量变化太大,无法达到预期 |
10
syozzz 184 天前
感觉很像这个 https://squoosh.app/
|
11
xhawk 184 天前 via Android
我最近有个跟这个相关的需求场景跟你分享,电商里头的图片管理,要解决 2 个问题,图片的存储管理,图片的打标签分类,你这属于高级功能,需要能对图片做基础编辑,因为亚马逊会对图片严格审核,需要能对图片的信息重新组织。
|
12
TuTouPower 184 天前
@xhawk 可以联系,RmVpS2FpNjgyMw==
|
13
wlf92 184 天前
有个产品叫 PP 鸭,我愿意付费,因为只要把文件夹拖进去就会遍历所有图片进行压缩了。
题主可以借鉴一下他的设计和商业模式。 |
14
BeijingBaby 184 天前
挺好的,可自定义压缩率
|
15
MillaMaxwell 184 天前
试用一下,感觉如果我想处理大量图片还是不够方便
|
16
jisuowei 184 天前 1
这就不得不提到以前公司做的 https://tuya.xinxiao.tech/
|
17
InsideSeed 184 天前
已 star 支持
|
18
sundev 184 天前
star 支持
|
19
abccccabc 184 天前
兄弟,能不能 build 一个,我是做后端的,对压缩也挺感兴趣的。
再去学一遍前端,可能性不大。 |
20
zhuang0718 184 天前
为开源点个赞~
|
21
zhangkui 184 天前
star 支持
|
22
googlehub 184 天前
已 star ,感谢楼主的开源,看着挺不错的,还可以有更多优化的空间,慢慢打磨下,更专业体验更好的方向试试呢。
|
23
zhangyl 184 天前
star 支持
|
24
SunsetShimmer 184 天前
@abccccabc 用 Vercel 部署一下就可以吧,前端好像一般没有发布 build 的习惯
|
25
daimao 184 天前
不是 哥们 你这网站打开了连个功能介绍都没有 谁知道是干嘛的啊
|
26
DefoliationM 184 天前 via Android
这种简单的东西其实很多都是自己写着玩玩,感觉很难火起来。
|
27
c330 184 天前
兄弟,感觉你可以试着把它搞成插件的形式,然后上架卖出。(地址: https://www.zentao.net/redirect-index-24073.html)
|
28
jellyX 184 天前
大佬加油
|
29
ttyhtg 184 天前 via Android
加油
|
31
moreant 184 天前
支持批量真不错,之前都是用 squoosh.app ,只能一张一张压缩有点烦
|
32
iorilu 184 天前
我也有个站点在 vercel , 能说说看怎么用 Cloudflare 加速国内访问吗
|
33
theprimone 184 天前
好奇 OffscreenCanvas 怎么实现 JPEG/WebP 的压缩的,找个算法重绘 Canvas 再导出?
|
34
seedhk 184 天前
已 star ,感谢楼主的开源
|
36
abccccabc 184 天前
@me1onsoda
@SunsetShimmer 隔行如隔山呀,我主要写 php 的,不写前端 JS 。说实话,vue 都看得我一 meng 一 meng 的,现在又冒出一个 Vercel ,又是 react ,又是编译。 算了,不扯了,不玩了。 |
37
walkingmoonwell 184 天前
这样部署的话,那你这个域名是不是就不用备案了
|
38
huihushijie1996 184 天前
|
40
skyworker 184 天前
正好需要在内网部署一个类似的工具, OP 可以放 buy me coffee 的二维码, 我愿意赞助
|
41
zealotxxxx 184 天前
压缩率很不错啊,而且看着很可以。
不过产品对于有需求的轻量用户来说,还是偏复杂了。 收藏了,这个挺好用的。比 tiny 还好点。 |
42
dylan593 184 天前 3
看了一下该站点的域名是 19 年就开始使用的,下面是我作为 PM 给楼主一些优化建议:
1. 简化用户操作步骤,让用户以上传图片——等待压缩——下载图片的工作流进行体验(可通过自行测试设置一个默认参数,保证压缩体积与图片质量的平衡); 2. 优化板块布局,上传页面还可以,下载页面的下载按钮应突出展示,另外压缩的比例以及具体数值可以在下载按钮上方进行展示; 3. SEO 优化,你的标题、元描述、关键词等内容都存在优化空间,另外爬虫文件也没设置,这样对于自然流量的获取会很吃亏; 4. 营收点:通过数据分析了解用户上传图片的主要体积大小范围,设置分级收费制度,如 50M 以上的图片上传处理需要收费; 以上是个人看完你的网站后的一些思路,希望对你有帮助。 |
43
giyear 184 天前
压缩图片绝大部分目的就是为了传播吧,你这个巨大的隐私优势完全无用武之地……
|
44
AmaQuinton 184 天前
op 有没有考虑通过 url 方式获取图像文件,例如 B 站的壁纸
|
45
rlds 184 天前
挺好的,支持!!!
|
46
rookie2luochao 184 天前
害,我也重复造了个新 swagger-ui 的轮子, 也是无人问津,还好我的 UI 设计和使用体验和其他竞争者大部分不一样,不然我真的好像是抄袭了,至少我没出圈我也不至于被吐槽吧😂,其实早就完成了 60%,但是没有设计成通用的开源包,我要是早 2 年放出来估计好很多,我给 swagger-ui 也成立了一个组织用于收录 所有后端语言的 swagger-ui, 链接在下面
核心 UI 包: https://github.com/rookie-luochao/openapi-ui 后端 swagger-ui 中间件: https://github.com/openapi-ui |
47
skyworker 184 天前
@giyear 为了传播的用户, 一般不会付钱
比如商业用户, 需要保护图片隐私, 不会使用网络工具, 如果能够定制化(比如增加 AI 功能, 符合特定行业对图片处理的需求, 比如自动加用户水印之类), 我觉得商业化不是问题. |
48
Xinu 184 天前
很棒!
|
49
chf007 184 天前
squoosh 不香么,同类的还有很多种,这种工具太多了,没有什么特别的优点很难胜出
|
50
LowBi 184 天前
支持 太难了 我想也让濒死/死亡项目开源 留下最后的痕迹
|
51
polobug 184 天前
另外你这个如果能在小程序 那才能获取流量。
|
52
yuyuf 184 天前
感觉稍微缺少的用户思维。
1 、调整图片尺寸那里。适应宽度,适应高度、这些词,普通用户大概率是不知道什么意思的。 2 、图片质量那里。可以就给几个选项就行了, 等等,下面的那些参数,普通用户也基本都不知道是什么意思的。可以都设置为默认,隐藏起来。给个高级选项按钮,给专业人用。普通用户就用默认的就好了 |
53
cndenis 184 天前
现在产品太难, 别说免费, 贴钱给用户人家都不见得会肯用.
靠技术和功能来吸引用户真要做得非常独到才行 这几年我在桌面上使用的新工具软件, 每年可能就一两个而已 |
55
Grefer 184 天前
star 支持一下,加油
|
57
joye OP @walkingmoonwell 是的
|
58
insignificance 184 天前
给你点个赞
|
59
joye OP @AmaQuinton 当前技术无法实现,由于采用的 Vite ,它是一个非常纯粹的前端 SPA 项目,在技术上会存在 [跨域和画布污染]( https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image) 的问题,因为前面有人提到 SEO ,所以等有时间我会考虑用 nextjs 实现,就可以做到通过 URL 获取图像文件,但本质上是借助于服务器实现
|
60
realJamespond 184 天前
感觉可以考虑用 electron ,或 wails 实现,压图更多可能是要批量运行所以结果要实时写回本地
|
61
likunyan 184 天前
有 bug ,我还是选择 tinypng
|
62
sojson 184 天前
....要我拿吗,我拿必火
|
63
yzding 184 天前
在压类似 10kb 左右小图片的的时候,画质会变糊,压缩后的图片体积会增大
|
64
xianqin 184 天前
又一个图片压缩,前两天刚看到一个,今天又个。
https://www.v2ex.com/t/1040551 |
66
nuffin 184 天前
已 star
|
67
IJustmaogepao 184 天前
点赞,已 star
|
68
cloudzhou 184 天前
@joye
这段很感慨,没想到互联网都变老人了 --- 感谢建议,说的很对。我会抽时间优化功能,采纳你的建议,我今年 37 岁了,公司面临倒闭,马上要离开职场了,只想让自己以后能留下一点技术的回忆,这个工具太小,永远不为赚钱,只为有人使用,有人记得就足够 |
69
iniko 184 天前
点赞,已 star
|
70
server 184 天前
star, 加油
|
71
brookegas 184 天前
看了这个帖文,有点兔死狐悲的感觉
码农成了跟维修工、木工、水电工类似的手工匠人 程序员改变世界的时代已经过去了 |
72
linyongxin 184 天前
支持一下,这种桌面软件很多,我用的是洋芋田,好多年了。现在图片处理比较热门的就是 ai 抠图
|
73
FakerLeung 184 天前
试用了一下,手机拍摄的图片压缩还可以,但是用了一张夜景图压缩,居然把灯给我压没了。。。再试了一张 gif ,那效果只能用惨不忍睹来形容。所有参数配置均为默认未调整
|
74
chenzw2 184 天前
https://online.bqrdh.com/image/compress 以前做过一个,楼主的更棒
|
75
guanguans 184 天前
看到 37 岁自我感叹,破防了。已 star ,收录到 https://github.com/guanguans/favorite-link 中了。不过好像有点 bug 。
![]( https://img2.imgtp.com/2024/05/17/LbLD4Tx2.jpg) |
76
zzbd 184 天前
需求确实挺大,现在手机拍的图都太大了,再加几个小功能可能会更好,增加文字层,增加图片层(打码用),可以用简单标记。现在 edge 自带的编辑器用这还算顺手,就是缺一个打码功能。
|
77
vimiix 184 天前
支持,感谢作者开源,已 star ,我做了个 docker 镜像,供搭建体验( Dockerfile 已提 PR )
docker pull vimiix/pic-smaller |
78
iMusic 184 天前
已 star ,还没看源码。好奇,新大小/压缩率是预测值还是选择完就进行压缩操作?
|
79
Tyrant1984 184 天前
已 star ,之前一直用的是 pingo ,虽然超级方便但是它不支持 gif 压缩,官方说仅针对 png 图片开发,但实测 jpg 也行~~
|
80
allenby 184 天前 via Android
已 star
|
81
wencaiwulue 184 天前
做开源难哦。做开源已经三年了。https://github.com/wencaiwulue/kubevpn 项目还是起不来。难难。
|
82
BQsummer 184 天前
一直用 squoosh.app 竞品太多了
|
83
lwc645089781 184 天前
https://squoosh.app/ 的好。up 的网站试了下,改了参数以后就卡住了。
|
84
forty 184 天前
能做 AI 扩图就更好了
|
85
ShaoLongFei 184 天前
感觉很不错啊
|
86
fushall 184 天前
楼主好厉害!千万不要放弃热爱的代码,念念不忘必有回想
|
87
haikea 184 天前
支持 op
|
88
xz410236056 184 天前
@sfqtsh 这玩意也能赚钱? 一句代码的事儿啊 image.jpegData(compressionQuality: 0.6) 这个方法基本无损,有损压缩的话就得重绘了
|
89
diagnostics 184 天前
图片对比很不错,UI 可以再优化(已经 80 分)了,默认参数降了色彩很差劲( 1 分),用户更多是拿来即用的,不符合要求再调参数
|
90
xianqin 184 天前
@diagnostics
同感。颜色数量低到这程度,从非技术型用户角度看就是 BUG 了 |
91
R31 184 天前
支持已 star
|
92
zw1one 184 天前
你做成 app ,或者公众号呀,手机用户对这个需求比较大。
|
93
17681880207 184 天前 1
我一直在用 https://squoosh.app/
但是图片压缩的需求其实并不是一个高频需求,不论从尤其是使用界面来手动压缩,这种情况真的很偶尔才会碰到。 |
94
SunsetShimmer 184 天前
Star 了,好像没对移动端适配?
|
95
rj 184 天前
已 Star
|
96
Lamlam147 184 天前
感谢付出 已 star
|
97
Nich0la5 184 天前
感谢 哎~这个方向商业化有点难
|
98
binge921 184 天前
感谢付出!
|
99
rivenqinyy 184 天前
Star.
|
100
mioktiar56 184 天前
其实我也做了一个图片压缩软件,不过是客户端的,也是无人问津。无人问津我倒不奇怪,毕竟我没推广过,只在 V2EX 上面写了个帖子
https://jiangxueqiao.com/post/2053741240.html |