阅读 24924

这个前端写的免费 Web 版 PS,让他三十岁前财务自由

在 IT 产业的上古时代,流传着许多独行侠程序员们徒手写出操作系统、编程语言、浏览器等高难度软件的传说。随着行业的成熟,这些故事大多已经尘埃落定。但今天,我们有幸见证了一个正在进行中的年轻故事。这个故事的主人公,让世界上数以百万的人,用上了昂贵 Photoshop 软件的免费替代品。

家住捷克的伊万·库茨基尔 (Ivan Kutskir) 是个 90 后自由职业程序员。虽然伊万从来没有公司的正式工作,但这不是因为他太菜了,而是因为他太强了:他就读于捷克最好的大学。自学生时代起,他就靠着自己的编程天赋挣零花钱养活自己。他每月只需工作大约 20 小时,就能赚够一个月 300 美元的生活费——这大致已经相当于国内不加班月薪三万的水平。这样的自由生活给了他极大的空间做自己喜欢的事。在这期间,他写了许多试验性的个人项目,从 Flash 小游戏到 3D 模型渲染工具等等不一而足。这之中一个名叫 Photopea 的图片编辑器项目,让今天的他过上了每月被动收入上万美元的「财务自由」生活。

我们都知道,美国 Adobe 销售的 Photoshop,是图片编辑领域公认最为强大的软件之一。这个庞然大物功能固然强大,但 Adobe 的垄断地位使它对于普通用户并不友好:一份正版的 Photoshop CC 软件国内售价超过 3000 元,对电脑硬件配置有着很高的要求。并且,它的 PSD 格式还是专有的,一般只能用 PS 打开编辑。于是,伊万在浏览器里折腾各种 3D 文件格式解析器之余,有了个大胆的想法:我们能在网页里打开 PSD 文件吗?

想法固然大胆,但稍有经验的程序员都可以看出,这个点子绝对比一开始就喊着「我要重新发明一个 Photoshop」要切实可行得多。伊万最早的规划是这样的:

  • 先做一个简单的 PSD 格式解析器,这以他的经验来说并不难。
  • 再添加一些简单的 UI 界面,来展示图层列表和最终的预览效果。
  • 最后支持几个简单的功能,比如移动图层、隐藏图层、导出 JPG 图片等等。

这么点需求显然难不倒伊万。在 2013 年,伊万做出了第一个版本,这就是 Photopea 的起点了:

photopea-begin

伊万在把这个版本发布试用之后,获得了出乎意料的好反响。于是,他决定持续维护这个项目,解决用户的需求,这一维护就做到了今天。一晃六年过去了,现在的 Photopea 是怎样的呢?

photopea-now

这是现在的 Photopea。你可以看到,最早左侧寥寥无几的工具栏如今已经被填满了,滤镜、蒙版、钢笔、文字、魔棒、曲线等功能更是一应俱全。除了完全支持 PSD 文件和 PNG / JPG / RAW / SVG 等图像格式外,它甚至还能打开编辑 UI 设计师耳熟能详的 Sketch 文件。这个强大的作品,得到了全世界用户的广泛认可。它到底有多受欢迎呢?举几个数据吧:

  • Photopea 的用户量每半年就会翻倍。现在它的每月访问量已经达到了 280 万次,每天用户花费 5500 个小时使用它。
  • 人们每天搜索上万次 “photopea”。在 Google 搜索 “online PS” 和 “online photoshop” 关键词的时候,Photopea 都排在第一名,甚至超过了 Adobe 自己的 Flash 版本。
  • 伊万在国外的 Reddit 网站上和网友互动介绍 Photopea 的「你问我答」活动,获得了四万多个赞同和超过 2000 条评论。
  • 全世界的志愿者无偿地将 Photopea 翻译成了 35 种不同的语言。其中,笔者也贡献了若干中文翻译 :)

别以为 Photopea 只靠抄抄 PS 的样子就能这么火爆。这样的图片编辑器,其实是个非常挑战 Web 技术极限的产品。它的界面之下,隐藏了许多伊万的独门武功,许多技术指标迄今仍然独步天下。举几个容易理解的例子:

  • 图像处理其实非常耗资源。例如一份尺寸 4000x4000 带十个图层的文档,其内存占用就是单张 1000x1000 图片的 160 倍,解压缩后会占用 640MB 内存。如果用每秒 60 帧的频率更新,就意味着每秒要在网页中处理 38GB 的图像数据!这是对普通程序员非常罕见的挑战。Photopea 使用了浏览器底层的硬件加速技术,打开这一量级的文档时也能保证基本的可用性。
  • 对普通网站来说,浏览器是非常稳定的。但对于 Photopea 这样变态的应用,许多极端情形都能让浏览器级别的互联网基础设施暴露出问题。截至今天,Photopea 已经找到了 Chrome 的约 50 个 bug,以及 Firefox 的约 30 个 bug。到现在,伊万甚至已经可以绕过浏览器标准的 bug 反馈流程,直接写邮件找 Chrome 团队熟悉的开发者交流,帮助他们改进。某种程度上,Photopea 改善了浏览器的稳定性。
  • 现在的 Web 应用正在变得日趋膨胀。打开淘宝、网易等网站的首页时,消耗的流量几乎不可能低于 2MB。那么像 Photopea 这样功能强大得多的应用,它的体积多大呢?为了追求极致,伊万几乎完全不使用第三方代码库,并自己实现了代码的压缩算法,最终整个应用只会消耗你 1.4MB 的流量。
  • 几乎你能看到的每个知名网站,都有相当高昂的服务器运维成本。谷歌有几十万台服务器,一年的成本是天文数字。猜猜 Photopea 一年的服务器成本有多高?20000 美元?2000 美元?答案是——20 美元。由于 Photopea 坚持只使用浏览器自身的能力,因此它的运维成本几乎为零,也很好地保护了用户隐私。

现在的 Photopea 已经完全是个成熟的商业级产品了。那么,Photopea 的背后也有一支强大的团队在维护它吗?伊万的故事里最为不可思议的一点,在于即便到了今天,所有 Photopea 的工作,包括开发新功能、修复 bug、听取用户反馈到发布官方博客,仍然只由他自己完成!可以说,他一个人花了几年,就写出了 Adobe Photoshop 一大支精英团队,三十多年来积累出的那些最常用的功能。直到现在,他还在会定期在 Photopea 官方博客上发布更新:

photopea-blog

光是单枪匹马地开发运营 Photopea,就已经够不可思议了。不仅如此,伊万还开源了不少为了 Photopea 自研的技术,包括字体解析、PNG 图片编解码和 ZIP 压缩算法等等。由于工作需要,同样身为程序员的笔者,也使用并阅读过伊万编写的代码。他的代码是什么风格的呢?在笔者个人的印象里,出身乌克兰的伊万,写的代码体现着一种苏式的工业美学——既没有精致的设计模式,也没有应用流行的新式语法,更不讲究换行缩进等优雅的排版,可代码本身就是简单明了、一步到位、性能优良且十分耐用。这些开源代码的许可协议也十分宽松,在 GitHub 上获得了上千个 Star。

看到这里,我们对伊万的技术水平应该不用再赘述了吧。不过相信一些同学肯定会问,像他这样开发完全免费的软件,还要开源义务劳动,是怎么让自己「财务自由」的呢?这就是个经典的技术商业化问题了。那么伊万的策略是怎样的呢?在发布 Photopea 的头三年里,伊万没有用 Photopea 为自己挣一分钱。到了 2017 年,伊万开始全职开发 Photopea,在上面投放了广告,这获得的广告收入一下就让他自给自足了。然而不得不说,伊万的商业化做得非常克制:广告只占很小的页面空间,你也可以选择捐赠开通高级会员来去除广告。但不管是否付费,用户能使用的功能都是完全一致的!即便在这么「不懂得做生意」的策略下,伊万的收入也已经非常丰厚了。按照他告诉笔者的说法,他不久就可以在布拉格全款买房啦。别忘了,他的收入属于完全的被动收入,可不需要 996 加班呢。

这么看来,伊万已经妥妥地实现了国人梦寐以求的「财务自由」了。那么,他过的生活应该是什么样的呢?他需要天天自己一个人拼命工作吗?他有个八台显示器环绕滚动着代码的顶级工作室吗?他会出手购置豪车一掷千金吗?就在今年的五一,笔者在出游欧洲之际有幸在布拉格见到了伊万。我所看到的他的生活状态,可能和你想象的大相径庭。这是笔者和伊万在布拉格 Letna 公园的合影:

ivan-ewind

线下看到的伊万给笔者的感受,是他几乎完全不追求技术之外的奢侈物质生活。到今天,他仍然和朋友合租、用着平价的安卓手机、还没买房买车、作息时间规律、坦言一年也极少光顾布拉格的高级餐厅。而他是怎么开发 Photopea 的呢?没有顶配的苹果电脑、没有低调奢华的机械键盘、甚至连一个外接显示器都没有——只有普通卧室里的一台普通 ThinkPad 笔记本电脑,如此而已。他用来编写代码的软件也是老掉牙的 Notepad++,并没有安装现在前端程序员中流行的各种工具。说实话,如果他来国内的互联网大公司面试前端开发,以某些面试官对工具苛刻的标准,他说不定连一面都过不了。然而就是在这样的环境里,他一个人开发出了 Photopea。看看他的桌子,要不是知道他其实比我不差钱得多,我都想给他赞助点什么了:

ivan-room

伊万和 Photopea 的故事够酷吗?别忘了,他的工作成果是能够让我们每个人都能享受到的。作为普通用户,使用和分享 Photopea 就是对他最大的支持了。尽管直到今天,由于一些网络问题,Photopea 的中国用户占比还非常低,但我们和伊万正在为你解决这个问题!今天我们很高兴地告诉大家,笔者所在的厦门稿定科技和伊万达成了正式合作,特别推出 Photopea 的中国版——稿定在线 PS

photopea-gaoding

稿定 PS 和原版 Photopea 有什么关系呢?可以说,这就是个对国内用户最为友好的版本:

  • 原版 Photopea 难以在大陆访问,稿定版则部署在国内,几乎可以秒开。
  • 原版 Photopea 没有中文字库,稿定版则内置了主流的中文商业字体。
  • 原版 Photopea 界面默认是英文的,稿定版则默认中文。
  • 原版 Photopea 默认有广告,稿定版则为国内用户免费去除了广告。
  • 原版 Photopea 和稿定版,在功能上完全一致。

希望大家有机会能多多体验,看看 Photopea 是否有我们说的这么好用吧!如果你有任何问题反馈,或希望使用伊万的开源代码,也可以关注他的 GitHub 账号噢。

最后送上两个彩蛋:

  1. 本文所有配图均使用稿定 PS 编辑。
  2. 稿定 PS 还支持手机,快打开体验吧!

传送门 - 稿定在线 PS

笔者供职于稿定科技 Web 工具团队,亦为本次 Photopea 引进的中方负责人。全文内容已征得 Ivan Kutskir 本人同意,确保其真实有效,同时欢迎媒体转载。

关注下面的标签,发现更多相似文章
评论