浏览器图片渲染优化，各位有什么好方案吗

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 834 天前的主题，其中的信息可能已经有所发展或是发生改变。

就拿这个图举例子，在正常 100%缩放的情况下，这个锐化白边真的是没眼看

但是实际上这张图片是这样的

各位老哥有什么好的解决方案吗

锐化白

老哥

图片

方案

13 条回复 • 2022-08-12 18:09:36 +08:00

LeeReamond

2022-08-12 05:46:31 +08:00

缩放算法问题，按一楼效果图，乍看起来 chrome 默认缩小是用 bicubic ？前端好像有很多图片方案，比如 img 标签，或者放个 canvas 里面放图，css 好像也有类似功能，具体细节上算法应该不是统一的，可能有适合你的，就有请楼下资深老哥回答了。

Livid

MOD

2022-08-12 05:58:02 +08:00

可能可以调整 CSS 里的 image-rendering ，但是不同浏览器对这个的支持程度不一样：

https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering

你可以在这里试验调整不同的参数：

https://codepen.io/livid-the-decoder/pen/gOedGeG

话说你第一张图是哪个浏览器里出来的效果？

ZE3kr

2022-08-12 07:00:14 +08:00 via iPhone

或者让服务器去做渲染，显示多少像素就返回多少像素的图片

ZE3kr

2022-08-12 07:00:47 +08:00 via iPhone

Retina 屏幕就用 srcset 逐一适配

Aloento

2022-08-12 07:34:10 +08:00

@Livid 第一个图是 Win11 Edge 最新 Stable 出来的效果，使用的是 -webkit-optimize-contrast
很悲伤的是 high-quality 属性在 Edge 中无效
但是不知道为什么，在 Codepen 里面缩放出来就很丝滑

Aloento

2022-08-12 07:38:50 +08:00

@ZE3kr 做的是一个 SPA 所以，让服务器渲染也不太现实
我在想可不可以让 Worker 缩放好了再传出来
或者用 canvas 绘图，不走浏览器的 img 渲染逻辑

yikyo

2022-08-12 08:01:38 +08:00

@Aloento 楼上有人提到的服务端渲染，指的是图片由服务端提供，跟前端常规概念的服务端渲染是两回事，
自己在服务器上放两份图片，一份提供压缩好的，一份是正常图片，按需求显示对应图片，。
可以测试一下主流 cdn 提供的图片压缩功能，能不能满足你的需求，如果可以的话，成本是最低的，

yuzo555

2022-08-12 08:29:26 +08:00

最好还是不要在前端缩放，不好看还是其次，浪费流量是真的夸张。
现在的 CDN 基本上都支持图片缩放，稍微配置一下就好。

musi

2022-08-12 09:01:20 +08:00

楼上说的服务端渲染应该指的是服务端缩放
在浏览器端缩放既浪费流量也浪费性能，效果还不大好

ZE3kr

2022-08-12 09:23:54 +08:00 via iPhone

对我的意思就是在服务器上调整图片宽高然后返回，类似 example.com/image.jpeg?width=800

客户端的种类是无穷多的，改 CSS 不能保证所有浏览器都没问题

Agdhfdjh

2022-08-12 09:51:29 +08:00

对象存储了解下

biubiu001

2022-08-12 17:39:40 +08:00

image-rendering 在各浏览器的缩放显示不一，我之前是用 image-rendering 是这么写的，在 firefox 、chrome 显示效果都挺好的：

image-rendering: auto;
image-rendering: -webkit-optimize-contrast;

Aloento

2022-08-12 18:09:36 +08:00

@yuzo555 我的服务器是不限流量和大带宽所以才想在在前端做压缩哈哈哈
好，听各位老哥的，在服务器缩小再传回
CDN 和图床也考虑用起来