【💰 投票】表情尺寸问题,好像没办法既降低图片宽高又不降低图片显示质量

20 条回复
164 次浏览

目前表情的像素我是控制在 350px,在一些 RSS 开启 webview 上浏览时就没啥好体验,尝试通过行内样式减小图片显示宽度好像也没生效。

图片宽高像素降低 -> 图片体积减小 -> 图片变糊force_smile

SVG 显示效果最好,不过 SVG 导出即便做了优化,尺寸还是较大,个别 emoji 超过 1M,就算 cdn 首次加载也会消耗一些流量。

投票

表情图片显示建议

按目前,你再想想办法 👀
减少图片像素尺寸,糊一些
使用 SVG,流量多一些

选择一项进行投票,无截止时间。

金币池
💰 404 金币

金币池金币数量会随着回复数量动态增加,回复有概率获得金币池中部分金币奖励。

表情包相对比较复杂,用 SVG 属实是不划算,是否可以尝试缩小后进行轻微锐化,这样格式保持 PNG/WebP 尺寸变小之后看起来也不会那么糊

种子用户
OP
Admin

从 350px 缩减到 100px,对比了下,还是有些明显的锯齿

我测试了下,就你发的那个表情,我改成 100 像素的 PNG,在论坛上实际体感没有任何变化,就算网页放大 200% 也基本看不出来,再放大就能看出来区别了。

测试截图

种子用户
OP
Admin

@OAO 实际现在是中等大小,看起来还好,我一会弄一套上去试试看,还有个大 size 的 emoji,可能显示就更容易看起来糊

@Jimmy 我一般处理图片都是在实际渲染大小的 1.5x ~ 2x,效果最好的同时可以保持图片适量压缩

前排打手

肯定是优先减少图片尺寸更好点,大部分时候,糊一点问题不大。

糊一点无所谓, 用网上那种包浆质感也挺好的, 反正大家知道那个表情啥意思就好了, 系统自带的 emoji 小小一个不也用得好好的 🐶

种子用户

表情在我这里,实际显示也就是 30px 左右?直接生成一个 30px 的表情为什么会糊啊

种子用户
Guardian

不知道下面两个方案能不能实现

  1. 服务端渲染时用小尺寸图片,客户端渲染时替换为大尺寸图片
  2. 根据请求 referer 或 user-agent 判断,如果是非官方网站请求,服务端返回小尺寸
讲故事的人
Guardian

没必要特别高清,你用 QQ 发一遍都给你压缩了,腾讯的压缩算法还可以,或者用 png 压缩,有损压一下不影响。

前排打手

感觉可以糊,但是要 清晰的糊 像素风也行。

之前那几个是太小了,而且糊,糊的看不清楚神态了。 不知道我『糊言乱语』 的对不。

糊一点问题不大,基本可以保证显示效果,性价比更高

前排打手
Guardian

总的来看应该是偏向显示的一致性,同样的行高还是最美观的

前排打手

这个只是个渲染方案,底层还是基于 emoji 的 unicode 来的,不支持本站的自定义表情。纯渲染方案的话不如用各个系统自带的,不用站点操心。

前排打手

目前 100px 的图,我都没感觉到你换了小图,还以为是原来我发给你的那个 1000px 版本,直到我鼠标放上去了才发现你放的 100px 的图(我扩展装了个 imagus,hover 时可以显示原图)。

不过我还是觉得可以考虑下 SVG,这玩意本来就这么几个,缓存一下就行了,十来兆流量不算啥,又不是每次都花十来兆。不过我最担心的还是 svg 能不能还原表情质感的问题。

种子用户
OP
Admin

现在表情体积很小,显示也还 ok,就不换 svg 了,svg 体积很大,显示效果也差不多

发表一个评论

R保持