关于这两天试验网站动态背景这件事

Web 个人随笔动态背景前端GIF
浏览数 - 430发布于 - 2025-06-17 - 16:50

为什么要动态壁纸?

因为好看可爱动态!还有一部分是技术实验。

众所周知,我不是专业的前端开发。其实大一上还是在走这条路的,现在大一下跑去做cpp老婆图形渲染方面辣!


如何实现并想起要做的?

最近嘛,关于存储这件事情还是引起许多讨论的,刚好OpenList(前Alist)出Beta版了,我就拉到docker里面玩一玩。然后挂载各种存储,测试本地速度异地测速多平台测速。然后我就发现,他可以改前端欸!!!

然后我就库库改,给背景塞了个gif进去,发现动态效果还不错!给你们看看我滴ArisuList()!(不是动图就是了)

ArisuMika-1750177054264-e6454a922ae1f053c68dc5f74f860c00pngArisuMika-1750177064666-be4cecd63aa85f6e89cc8aba3cf313f5png其实以上都是动态背景的。好看吧!可爱吧!欸嘿嘿嘿嘿嘿嘿嘿!~~~Sticker


发现问题辣!:

  1. gif压缩特别严重,噪点比较明显(但是发现加一层遮罩蒙版似乎可以轻微缓解)
  2. gif太大辣!然后我的流量就被干爆惹~!!!!!!!!ArisuMika-1750177416270-d050de4dbb147c377f6ffd759e669702png其实我后来转到CF的R2去测试,发现不是很稳定,毕竟不是内地,这个动态背景算是被带宽和流量干掉了(被资本做局了!呜呜呜呜呜!!)
  3. 可能会影响用户体验,因为你光一个背景就50MB(我还是多次压缩过的),加载会慢辣!但我个人用下来感觉是很快的,跟静态图差个0.x秒吧(中国内地存储下)
  4. 其他待补充喵!

总结:

我觉得网站应该兼容实用性和艺术美观,优化依托,卡死的网站会缺失很多用户的(kungal有那么多可爱的人真是太好了!Sticker)。

关于动态背景是否会加入我的Gal站以及未来新的ArisuList(嘻嘻,没想到吧,本站要采用双自建盘存储啦,因为测试效果确实还行,有待优化!):我也不要好说,因为不是很确定所有人是否会接受压缩画质的动态图。毕竟会有人更喜欢高清的静态图。可能会试运行一段时间吧!

我也有一直在征求优化意见啦,虽然大部分其实都是测试的朋友提出的。

现在?我现在是又把gif压缩到了30MBSticker,丢到图床给ArisuList(未上线)使用,目前gal站没有投入(但是本地已经在测试了,似乎效果还行?)

最近?最近很累很忙啦!又是程序设计答辩又是期末周的!更新缓慢请原谅我喵!Sticker

鲲

5910

#1

可爱就是对的!嗯!以后我会想办法把论坛变得更可爱的!毕竟介绍的第一条就是世界上最萌的 Galgame 论坛!

刚刚给补丁站造了一个消息系统,论坛的消息系统以后再更新吧!

image.png

2025-06-17 - 16:52
#2

Sticker

2025-06-17 - 16:54
辉光
辉光

1164

#3

这个感觉和忧郁的弟弟那个网站动态背景是一样的吧

2025-06-18 - 02:30

评论

ArisuMika
ArisuMika评论辉光

好像不一样,我这个是live2d做的

fylcr
fylcr

1553

#4

我在想你是不是面临两个问题:

  1. 动图文件大小太大而且质量不好
  2. 想要找一个流量费低并且速度快的存储

我来给你解决这两个问题。

  1. 我推荐你使用webp格式而不是gif格式。采用webp格式有以下优点:
    • webp的大小通常比gif小
    • webp的质量通常比gif好
    • webp支持边加载边播放,而且现代主流浏览器的兼容度高
  2. 你可以试试walrus,虽然存储价格有点贵(存储费大约$53TB/月,写入费大约$9TB),但是胜在没有流量费,并且下载速度也比较快

这张图片并不能体现wlrus的下载速度极限,因为这个文件太小了(6MB左右),速度还没有起来就下完了。本人测试的最好速度为单线程25MB/s左右

2025-06-18 - 03:52

评论

ArisuMika
ArisuMika评论fylcr

好的喵!我会去试试看!

kohaku