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

[Aloento]

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

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

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

[LeeReamond]

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

[Livid]

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

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

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

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

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

[ZE3kr]

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

[ZE3kr]

Retina 屏幕就用 srcset 逐一适配

[Aloento]

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

[Aloento]

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

[yikyo]

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

[yuzo555]

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

[musi]

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

[ZE3kr]

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

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

[Agdhfdjh]

对象存储了解下

[biubiu001]

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

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

[Aloento]

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